mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -1256,12 +1256,48 @@ div[data-twttr-id] iframe {
|
||||
background-color: hsl(198, 100%, 94%);
|
||||
}
|
||||
|
||||
.survey {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
background-color: rgba(5, 165, 209, 0.05);
|
||||
border: 2px solid #05A5D1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.survey-image {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
height: 83px;
|
||||
width: 120px;
|
||||
background-image: url('../img/survey.png');
|
||||
background-size: 272px 198px;
|
||||
background-position: -8px -8px;
|
||||
}
|
||||
|
||||
.survey p {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.survey .button {
|
||||
font-size: 24px;
|
||||
background: #05A5D1;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width: 1024px) {
|
||||
#content {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.survey-image {
|
||||
position: static;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.survey p {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
<CustomRadioButton
|
||||
accessibleComponentType<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>radioButton<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></div><p>In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="docs/accessibility.html#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></div><p>In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="docs/accessibility.html#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -28,7 +28,7 @@ dependencies <span class="token punctuation">{</span>
|
||||
rootProject<span class="token punctuation">.</span>allprojects <span class="token punctuation">{</span>
|
||||
buildDir <span class="token operator">=</span> <span class="token string">"/path/to/build/directory/${rootProject.name}/${project.name}"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="testing"></a>Testing <a class="hash-link" href="docs/android-building-from-source.html#testing">#</a></h2><p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing.html" target="">Testing</a>.</p><h2><a class="anchor" name="troubleshooting"></a>Troubleshooting <a class="hash-link" href="docs/android-building-from-source.html#troubleshooting">#</a></h2><p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/activityindicatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="testing"></a>Testing <a class="hash-link" href="docs/android-building-from-source.html#testing">#</a></h2><p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing.html" target="">Testing</a>.</p><h2><a class="anchor" name="troubleshooting"></a>Troubleshooting <a class="hash-link" href="docs/android-building-from-source.html#troubleshooting">#</a></h2><p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/activityindicatorios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -375,7 +375,7 @@ make them customizable, React Native exposes a
|
||||
pop<span class="token punctuation">:</span> CustomLeftToRightGesture<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><a href="https://rnplay.org/apps/HPy6UA" target="_blank">Run this example</a></p><p>For further information about customizing scene transitions, <a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" target="_blank">read the
|
||||
source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -74,7 +74,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F
|
||||
newFrame<span class="token punctuation">.</span>size <span class="token operator">=</span> rootView<span class="token punctuation">.</span>intrinsicSize<span class="token punctuation">;</span>
|
||||
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> newFrame<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -130,7 +130,7 @@ the jerky animation each 250ms when <code>setState</code> triggers a re-render.<
|
||||
<code>shouldComponentUpdate</code></a>
|
||||
you can avoid the unnecessary overhead involved in reconciling unchanged
|
||||
component subtrees, to the point where it may be performant enough to
|
||||
use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/debugging.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/debugging.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -88,7 +88,7 @@ class <span class="token class-name">MyAwesomeApp</span> extends <span class="to
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'MyAwesomeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="docs/embedded-app-android.html#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="docs/embedded-app-android.html#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You'll want to make your own "ReactFragment" or "ReactActivity" and have a singleton "holder" that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'MyAwesomeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="docs/embedded-app-android.html#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="docs/embedded-app-android.html#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You'll want to make your own "ReactFragment" or "ReactActivity" and have a singleton "holder" that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -83,7 +83,7 @@ class <span class="token class-name">ReactView</span><span class="token punctuat
|
||||
<<span class="token boolean">true</span><span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span></div><p>If you don't do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="docs/embedded-app-ios.html#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload and all of the debugging tools will work from the simulator. Just make sure that <code>DEBUG=1</code> is set under Build Settings -> Preprocessor Macros. If you're using Cocoapods and a custom configuration (that is, not "Debug"), make sure you've specified it to be a debug configuration using the <a href="https://guides.cocoapods.org/syntax/podfile.html#xcodeproj" target="_blank"><code>xcodeproj</code> setting</a> in your Podfile. Also make sure you've got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="docs/embedded-app-ios.html#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/hfossli/ReactNativeIntegration" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<<span class="token operator">/</span>dict<span class="token operator">></span></div><p>If you don't do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="docs/embedded-app-ios.html#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload and all of the debugging tools will work from the simulator. Just make sure that <code>DEBUG=1</code> is set under Build Settings -> Preprocessor Macros. If you're using Cocoapods and a custom configuration (that is, not "Debug"), make sure you've specified it to be a debug configuration using the <a href="https://guides.cocoapods.org/syntax/podfile.html#xcodeproj" target="_blank"><code>xcodeproj</code> setting</a> in your Podfile. Also make sure you've got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="docs/embedded-app-ios.html#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/hfossli/ReactNativeIntegration" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/communication-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -303,7 +303,7 @@ var isWindows = navigator.platform === 'Win32';
|
||||
display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
|
||||
display('platform', isMac ? 'ios' : 'android');
|
||||
</script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/tutorial.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/tutorial.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -21,7 +21,7 @@ using local resources that are outside of <code>Images.xcassets</code>.</p><h3><
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Inside<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Image<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="docs/images.html#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/gesture-responder-system.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="docs/images.html#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/gesture-responder-system.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -19,7 +19,7 @@ received.</p><p>For that we need to know the library's headers. To achieve
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search
|
||||
Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -81,7 +81,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token
|
||||
|
||||
<span class="token keyword">var</span> RCTMyCustomView <span class="token operator">=</span> <span class="token function">requireNativeComponent<span class="token punctuation">(</span></span>`RCTMyCustomView`<span class="token punctuation">,</span> MyCustomView<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>onChange<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -247,7 +247,7 @@ import <span class="token punctuation">{</span> UIManager <span class="token pun
|
||||
@<span class="token string">"datetime"</span><span class="token punctuation">:</span> @<span class="token punctuation">(</span>UIDatePickerModeDateAndTime<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking-libraries-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking-libraries-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -263,7 +263,7 @@ public void <span class="token function">onHostPause<span class="token punctuati
|
||||
@Override
|
||||
public void <span class="token function">onHostDestroy<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Actvity `onDestroy`
|
||||
</span><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -136,7 +136,7 @@ class <span class="token class-name">CalendarManager</span><span class="token pu
|
||||
<span class="token function">RCT_EXTERN_METHOD<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>nonnull NSNumber <span class="token operator">*</span><span class="token punctuation">)</span>date<span class="token punctuation">)</span>
|
||||
|
||||
@end</div><p>For those of you new to Swift and Objective-C, whenever you <a href="https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html" target="_blank">mix the two languages in an iOS project</a>, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode <code>File>New File</code> menu option. You will need to import <code>RCTBridgeModule.h</code> in this header file.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// CalendarManager-Bridging-Header.h
|
||||
</span>#import <span class="token string">"RCTBridgeModule.h"</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span>#import <span class="token string">"RCTBridgeModule.h"</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -12,7 +12,7 @@ class, and <code>Navigator</code> re-implements that functionality entirely in
|
||||
JavaScript as a React component. A corollary of this is that <code>Navigator</code>
|
||||
will be compatible with Android and iOS, whereas <code>NavigatorIOS</code> will
|
||||
only work on the one platform. Below is an itemized list of differences
|
||||
between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="docs/navigator-comparison.html#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple's, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="docs/navigator-comparison.html#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li><li>You may find an alternative in the community project <a href="https://github.com/wix/react-native-navigation" target="_blank">react-native-navigation</a> which replaces <code>NavigatorIOS</code>.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behavior that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won't be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/known-issues.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="docs/navigator-comparison.html#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple's, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="docs/navigator-comparison.html#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li><li>You may find an alternative in the community project <a href="https://github.com/wix/react-native-navigation" target="_blank">react-native-navigation</a> which replaces <code>NavigatorIOS</code>.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behavior that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won't be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/known-issues.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -83,7 +83,7 @@ request<span class="token punctuation">.</span>onload <span class="token operato
|
||||
request<span class="token punctuation">.</span>ontimeout <span class="token operator">=</span> onTimeout<span class="token punctuation">;</span>
|
||||
request<span class="token punctuation">.</span>onerror <span class="token operator">=</span> onError<span class="token punctuation">;</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'https://mywebsite.com/endpoint.php'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you're probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://github.com/niftylettuce/frisbee" target="_blank">frisbee</a> or <a href="https://github.com/mzabriskie/axios" target="_blank">axios</a> directly from npm.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/timers.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you're probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://github.com/niftylettuce/frisbee" target="_blank">frisbee</a> or <a href="https://github.com/mzabriskie/axios" target="_blank">axios</a> directly from npm.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/timers.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -184,7 +184,7 @@ inside of your <code>onPress</code> handler in <code>requestAnimationFrame</code
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h3><a class="anchor" name="profiling"></a>Profiling <a class="hash-link" href="docs/performance.html#profiling">#</a></h3><p>Use the built-in Profiler to get detailed information about work done in
|
||||
the JavaScript thread and main thread side-by-side.</p><p>For iOS, Instruments are an invaluable tool, and on Android you should
|
||||
learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/upgrading.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/upgrading.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -31,7 +31,7 @@ on Android.</p><p>Since it accepts <code>any</code> value, you can also use it t
|
||||
|
||||
<span class="token keyword">if</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Running on Lollipop!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -15,7 +15,7 @@ Bus <span class="token number">001</span> Device <span class="token number">002<
|
||||
Bus <span class="token number">001</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub
|
||||
Bus <span class="token number">004</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0003</span> Linux Foundation <span class="token number">3.0</span> root hub
|
||||
Bus <span class="token number">003</span> Device <span class="token number">001</span><span class="token punctuation">:</span> ID 1d6b<span class="token punctuation">:</span><span class="token number">0002</span> Linux Foundation <span class="token number">2.0</span> root hub</div><p>You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.</p><p><code>Bus 001 Device 003: ID 22b8:2e76 Motorola PCS</code></p><p>From the above line, you want to grab the first four digits from the device ID:</p><p><code>22b8:2e76</code></p><p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p><p>You'll need to input this into your udev rules in order to get up and running:</p><div class="prism language-javascript">echo SUBSYSTEM<span class="token operator">==</span><span class="token string">"usb"</span><span class="token punctuation">,</span> ATTR<span class="token punctuation">{</span>idVendor<span class="token punctuation">}</span><span class="token operator">==</span><span class="token string">"22b8"</span><span class="token punctuation">,</span> MODE<span class="token operator">=</span><span class="token string">"0666"</span><span class="token punctuation">,</span> GROUP<span class="token operator">=</span><span class="token string">"plugdev"</span> <span class="token operator">|</span> sudo tee <span class="token operator">/</span>etc<span class="token operator">/</span>udev<span class="token operator">/</span>rules<span class="token punctuation">.</span>d<span class="token operator">/</span><span class="token number">51</span><span class="token operator">-</span>android<span class="token operator">-</span>usb<span class="token punctuation">.</span>rules</div><p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p><p>Now check that your device is properly connecting to ADB, the Android Debug Bridge, by using <code>adb devices</code>.</p><div class="prism language-javascript">List of devices attached
|
||||
TA9300GLMK device</div><h2><a class="anchor" name="accessing-development-server-from-device"></a>Accessing development server from device <a class="hash-link" href="docs/running-on-device-android.html#accessing-development-server-from-device">#</a></h2><p>You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.</p><blockquote><p>Hint</p><p>Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (to reload, debug, etc.). Alternatively, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the <a href="http://developer.android.com/reference/android/view/KeyEvent.html#KEYCODE_MENU" target="_blank">Menu</a> key code).</p></blockquote><h3><a class="anchor" name="using-adb-reverse"></a>Using adb reverse <a class="hash-link" href="docs/running-on-device-android.html#using-adb-reverse">#</a></h3><blockquote><p>Note that this option is available on devices running android 5.0+ (API 21).</p></blockquote><p>Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).</p><ol><li>Run <code>adb reverse tcp:8081 tcp:8081</code></li><li>You can use <code>Reload JS</code> and other development options with no extra configuration</li></ol><h3><a class="anchor" name="configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi"></a>Configure your app to connect to the local dev server via Wi-Fi <a class="hash-link" href="docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi">#</a></h3><ol><li>Make sure your laptop and your phone are on the <strong>same Wi-Fi network</strong>.</li><li>Open your React Native app on your device. You can do this the same way you'd open any other app.</li><li>You'll see a red screen with an error. This is OK. The following steps will fix that.</li><li>Open the <strong>Developer menu</strong> by shaking the device or running <code>adb shell input keyevent 82</code> from the command line.</li><li>Go to <code>Dev Settings</code>.</li><li>Go to <code>Debug server host for device</code>.</li><li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). <strong>On Mac</strong>, you can find the IP address in System Preferences / Network. <strong>On Windows</strong>, open the command prompt and type <code>ipconfig</code> to find your machine's IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information" target="_blank">more info</a>).</li><li>Go back to the <strong>Developer menu</strong> and select <code>Reload JS</code>.</li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/embedded-app-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
TA9300GLMK device</div><h2><a class="anchor" name="accessing-development-server-from-device"></a>Accessing development server from device <a class="hash-link" href="docs/running-on-device-android.html#accessing-development-server-from-device">#</a></h2><p>You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.</p><blockquote><p>Hint</p><p>Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (to reload, debug, etc.). Alternatively, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the <a href="http://developer.android.com/reference/android/view/KeyEvent.html#KEYCODE_MENU" target="_blank">Menu</a> key code).</p></blockquote><h3><a class="anchor" name="using-adb-reverse"></a>Using adb reverse <a class="hash-link" href="docs/running-on-device-android.html#using-adb-reverse">#</a></h3><blockquote><p>Note that this option is available on devices running android 5.0+ (API 21).</p></blockquote><p>Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).</p><ol><li>Run <code>adb reverse tcp:8081 tcp:8081</code></li><li>You can use <code>Reload JS</code> and other development options with no extra configuration</li></ol><h3><a class="anchor" name="configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi"></a>Configure your app to connect to the local dev server via Wi-Fi <a class="hash-link" href="docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi">#</a></h3><ol><li>Make sure your laptop and your phone are on the <strong>same Wi-Fi network</strong>.</li><li>Open your React Native app on your device. You can do this the same way you'd open any other app.</li><li>You'll see a red screen with an error. This is OK. The following steps will fix that.</li><li>Open the <strong>Developer menu</strong> by shaking the device or running <code>adb shell input keyevent 82</code> from the command line.</li><li>Go to <code>Dev Settings</code>.</li><li>Go to <code>Debug server host for device</code>.</li><li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). <strong>On Mac</strong>, you can find the IP address in System Preferences / Network. <strong>On Windows</strong>, open the command prompt and type <code>ipconfig</code> to find your machine's IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information" target="_blank">more info</a>).</li><li>Go back to the <strong>Developer menu</strong> and select <code>Reload JS</code>.</li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/embedded-app-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -23,7 +23,7 @@ android <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><h3><a class="anchor" name="generating-the-release-apk"></a>Generating the release APK <a class="hash-link" href="docs/signed-apk-android.html#generating-the-release-apk">#</a></h3><p>Simply run the following in a terminal:</p><div class="prism language-javascript">$ cd android && <span class="token punctuation">.</span><span class="token operator">/</span>gradlew assembleRelease</div><p>Gradle's <code>assembleRelease</code> will bundle all the JavaScript needed to run your app into the APK. If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p><p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p><h3><a class="anchor" name="testing-the-release-build-of-your-app"></a>Testing the release build of your app <a class="hash-link" href="docs/signed-apk-android.html#testing-the-release-build-of-your-app">#</a></h3><p>Before uploading the release build to the Play Store, make sure you test it thoroughly. Install it on the device using:</p><div class="prism language-javascript">$ cd android && <span class="token punctuation">.</span><span class="token operator">/</span>gradlew installRelease</div><p>Note that <code>installRelease</code> is only available if you've set up signing as described above.</p><p>You can kill any running packager instances, all your and framework JavaScript code is bundled in the APK's assets.</p><h3><a class="anchor" name="enabling-proguard-to-reduce-the-size-of-the-apk-optional"></a>Enabling Proguard to reduce the size of the APK (optional) <a class="hash-link" href="docs/signed-apk-android.html#enabling-proguard-to-reduce-the-size-of-the-apk-optional">#</a></h3><p>Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.</p><p><em><strong>IMPORTANT</strong>: Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See <code>app/proguard-rules.pro</code>.</em></p><p>To enable Proguard, edit <code>android/app/build.gradle</code>:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
|
||||
* Run Proguard to shrink the Java bytecode in release builds.
|
||||
*/</span>
|
||||
def enableProguardInReleaseBuilds <span class="token operator">=</span> <span class="token boolean">true</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/android-ui-performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
def enableProguardInReleaseBuilds <span class="token operator">=</span> <span class="token boolean">true</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/android-ui-performance.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// ... in another file ...
|
||||
</span><List style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span> elementStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><h2><a class="anchor" name="supported-properties"></a>Supported Properties <a class="hash-link" href="docs/style.html#supported-properties">#</a></h2><p>You can checkout latest support of CSS Properties in following Links.</p><ul><li><a href="docs/view.html#style" target="_blank">View Properties</a></li><li><a href="docs/image.html#style" target="_blank">Image Properties</a></li><li><a href="docs/text.html#style" target="_blank">Text Properties</a></li><li><a href="docs/flexbox.html#content" target="_blank">Flex Properties</a></li><li><a href="docs/transforms.html#content" target="_blank">Transform Properties</a></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="docs/images.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span><List style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span> elementStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><h2><a class="anchor" name="supported-properties"></a>Supported Properties <a class="hash-link" href="docs/style.html#supported-properties">#</a></h2><p>You can checkout latest support of CSS Properties in following Links.</p><ul><li><a href="docs/view.html#style" target="_blank">View Properties</a></li><li><a href="docs/image.html#style" target="_blank">Image Properties</a></li><li><a href="docs/text.html#style" target="_blank">Text Properties</a></li><li><a href="docs/flexbox.html#content" target="_blank">Flex Properties</a></li><li><a href="docs/transforms.html#content" target="_blank">Transform Properties</a></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="docs/images.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><p>Note: you may have to install/upgrade/link Node.js and other parts of your environment in order for the tests to run correctly. Check out the latest setup in <a href="https://github.com/facebook/react-native/blob/master/.travis.yml#L11-24" target="_blank">.travis.yml</a></p><h2><a class="anchor" name="unit-tests-android"></a>Unit tests (Android) <a class="hash-link" href="docs/testing.html#unit-tests-android">#</a></h2><p>React Native uses the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a> to run tests. Unit tests run locally on your machine, no emulator is needed. To run the tests:</p><div class="prism language-javascript">$ cd react<span class="token operator">-</span>native
|
||||
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>unit<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-android"></a>Integration tests (Android) <a class="hash-link" href="docs/testing.html#integration-tests-android">#</a></h2><p>React Native uses the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a> to run tests. Integration tests run on an emulator / device and verify that modules and components, as well as the core parts of React Native (such as the bridge) work well end-to-end.</p><p>Make sure you have the path to the Android NDK set up, see <a href="/react-native/docs/android-building-from-source.html#prerequisites" target="">Prerequisites</a>.</p><p>To run the tests:</p><div class="prism language-javascript">$ cd react<span class="token operator">-</span>native
|
||||
$ npm install
|
||||
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-ios"></a>Integration Tests (iOS) <a class="hash-link" href="docs/testing.html#integration-tests-ios">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>. The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios"></a>Snapshot Tests (iOS) <a class="hash-link" href="docs/testing.html#snapshot-tests-ios">#</a></h2><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-ios"></a>Integration Tests (iOS) <a class="hash-link" href="docs/testing.html#integration-tests-ios">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>. The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios"></a>Snapshot Tests (iOS) <a class="hash-link" href="docs/testing.html#snapshot-tests-ios">#</a></h2><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<span class="token number">500</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p><p>Keep in mind that if you use ES6 classes for your React components <a href="https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins" target="_blank">there is no built-in API for mixins</a>. To use <code>TimerMixin</code> with ES6 classes, we recommend <a href="https://github.com/brigand/react-mixin" target="_blank">react-mixin</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/colors.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p><p>Keep in mind that if you use ES6 classes for your React components <a href="https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins" target="_blank">there is no built-in API for mixins</a>. To use <code>TimerMixin</code> with ES6 classes, we recommend <a href="https://github.com/brigand/react-mixin" target="_blank">react-mixin</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/colors.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -13,7 +13,7 @@ sudo chown <span class="token operator">-</span>R $USER <span class="token opera
|
||||
<span class="token string">'RCTNetwork'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'RCTWebSocket'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span></div><p>Next, make sure you have run <code>pod install</code> and that a <code>Pods/</code> directory has been created in your project with React installed. CocoaPods will instruct you to use the generated <code>.xcworkspace</code> file henceforth to be able to use these installed dependencies.</p><p>If you are adding React manually, make sure you have included all the relevant dependencies, like <code>RCTText.xcodeproj</code>, <code>RCTImage.xcodeproj</code> depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the <code>Linked Frameworks and Binaries</code> section in the Xcode project settings. More detailed steps are here: <a href="docs/linking-libraries-ios.html#content" target="_blank">Linking Libraries</a>.</p><h5><a class="anchor" name="argument-list-too-long-recursive-header-expansion-failed"></a>Argument list too long: recursive header expansion failed <a class="hash-link" href="docs/troubleshooting.html#argument-list-too-long-recursive-header-expansion-failed">#</a></h5><p>In the project's build settings, <code>User Search Header Paths</code> and <code>Header Search Paths</code> are two configs that specify where Xcode should look for <code>#import</code> header files specified in the code. For Pods, CocoaPods uses a default array of specific folders to look in. Verify that this particular config is not overwritten, and that none of the folders configured are too large. If one of the folders is a large folder, Xcode will attempt to recursively search the entire directory and throw above error at some point.</p><p>To revert the <code>User Search Header Paths</code> and <code>Header Search Paths</code> build settings to their defaults set by CocoaPods - select the entry in the Build Settings panel, and hit delete. It will remove the custom override and return to the CocoaPod defaults.</p><h2><a class="anchor" name="unable-to-connect-to-development-server"></a>Unable to connect to development server <a class="hash-link" href="docs/troubleshooting.html#unable-to-connect-to-development-server">#</a></h2><h5><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/troubleshooting.html#ios">#</a></h5><p>Ensure that you are on the same WiFi network as your computer. If you're using a cell data plan, your phone can't access your computer's local IP address.</p><h5><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/troubleshooting.html#android">#</a></h5><p>You need to run <code>adb reverse tcp:8081 tcp:8081</code> to forward requests from the device to your computer. This works only on Android 5.0 and newer.</p><h2><a class="anchor" name="module-that-uses-websocket-such-as-firebase-throws-an-exception"></a>Module that uses <code>WebSocket</code> (such as Firebase) throws an exception <a class="hash-link" href="docs/troubleshooting.html#module-that-uses-websocket-such-as-firebase-throws-an-exception">#</a></h2><p>React Native implements a polyfill for WebSockets. These polyfills are initialized as part of the react-native module that you include in your application through <code>import React from 'react-native'</code>. If you load another module that requires WebSockets, be sure to load/require it after react-native.</p><p>So:</p><div class="prism language-javascript">import React from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
import Firebase from <span class="token string">'firebase'</span><span class="token punctuation">;</span></div><p>Requiring firebase <em>before</em> react-native will result in a 'No transports available' redbox.</p><p>Discovered thanks to issue <a href="https://github.com/facebook/react-native/issues/3645" target="_blank">#3645</a>. If you're curious, the polyfills are set up in <a href="https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js" target="_blank">InitializeJavaScriptAppEngine.js</a>.</p></div><div class="docs-prevnext"></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
import Firebase from <span class="token string">'firebase'</span><span class="token punctuation">;</span></div><p>Requiring firebase <em>before</em> react-native will result in a 'No transports available' redbox.</p><p>Discovered thanks to issue <a href="https://github.com/facebook/react-native/issues/3645" target="_blank">#3645</a>. If you're curious, the polyfills are set up in <a href="https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js" target="_blank">InitializeJavaScriptAppEngine.js</a>.</p></div><div class="docs-prevnext"></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -295,7 +295,7 @@ class <span class="token class-name">AwesomeProject</span> extends <span class="
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/videos.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/videos.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -6,7 +6,7 @@ version of React Native:</p><h2><a class="anchor" name="1-upgrade-the-react-nati
|
||||
run <code>react-native init</code>, like the iOS and the Android sub-projects. To get these latest changes,
|
||||
run this in a terminal:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native upgrade</div><p>This will check your files against the latest template and perform the following:</p><ul><li>If there is a new file in the template, it is simply created.</li><li>If a file in the template is identical to your file, it is skipped.</li><li>If a file is different in your project than the template, you will be prompted; you have options
|
||||
to view a diff between your file and the template file, keep your file or overwrite it with the
|
||||
template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="docs/upgrading.html#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it's tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="docs/upgrading.html#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new "Run Script" step to your project's build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience "react-native: command not found". See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/platform-specific-code.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="docs/upgrading.html#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it's tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="docs/upgrading.html#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new "Run Script" step to your project's build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience "react-native: command not found". See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/platform-specific-code.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -46,7 +46,7 @@ This player is only available in HTML5 enabled browsers. Please update your brow
|
||||
<a download="146-jsj-react-with-christopher-chedeau-and-jordan-walke.mp3" href="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?download=true?download=true">download the episode</a>
|
||||
</p>
|
||||
</audio>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/newsletter.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/newsletter.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=681969738611332">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Reference in New Issue
Block a user