diff --git a/docs/0.54/integration-with-existing-apps.html b/docs/0.54/integration-with-existing-apps.html index 3e6ca34fb8c..fa119eea6bf 100644 --- a/docs/0.54/integration-with-existing-apps.html +++ b/docs/0.54/integration-with-existing-apps.html @@ -130,14 +130,14 @@

Install the react and react-native packages. Open a terminal or command prompt, then navigate to the directory with your package.json file and run:

$ yarn add react-native
-

This will print something like:

+

This will print a message similar to the following (scroll up in the yarn output to see it):

warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

-

This is OK, it means we also need to install react:

-
$ yarn add react@16.2.0    # Make sure you use the same react version as printed by yarn when installing react-native!
+
This is OK, it means we also need to install React:

+
$ yarn add react@version_printed_above
 

-
This will create a new /node_modules folder. This folder stores all the JavaScript dependencies required to build your project.

+
Yarn has created a new /node_modules folder. This folder stores all the JavaScript dependencies required to build your project.

 
Add node_modules/ to your .gitignore file.

 

 
3. Install CocoaPods

@@ -156,6 +156,9 @@
 
Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.

 

 
Before RN Integration

+
Command Line Tools for Xcode

+
Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

+
Xcode Command Line Tools

 
Configuring CocoaPods dependencies

 
Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

 
The list of supported subspecs is available in /node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want the Core subspec. That will get you the AppRegistry, StyleSheet, View and other core React Native libraries. If you want to add the React Native Text library (e.g., for <Text> elements), then you will need the RCTText subspec. If you want the Image library (e.g., for <Image> elements), then you will need the RCTImage subspec.

@@ -175,7 +178,8 @@ target 'NumberTileGame' 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
     'RCTText',
     'RCTNetwork',
-    'RCTWebSocket', # needed for debugging
+    'RCTWebSocket', # Needed for debugging
+    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
     # Add any other subspecs you want to use in your project
   ]
   # Explicitly include Yoga if you are using RN >= 0.42.0
@@ -183,7 +187,7 @@ target 'NumberTileGame' # Third party deps podspec link
   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => 'node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
 end
@@ -214,7 +218,7 @@ target 'swift-2048' 
 
   # Third party deps podspec link
   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
+  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
 end
@@ -233,6 +237,9 @@ Integrating client project
 Sending stats
 Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
+
+

If this fails with errors mentioning xcrun, make sure that in Xcode in Preferences > Locations the Command Line Tools are assigned.

+

If you get a warning such as "The swift-2048 [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig. This can lead to problems with the CocoaPods installation", then make sure the Framework Search Paths in Build Settings for both Debug and Release only contain $(inherited).

diff --git a/docs/contributing.html b/docs/contributing.html index fbfcb33fff6..55ff571d3d5 100644 --- a/docs/contributing.html +++ b/docs/contributing.html @@ -35,7 +35,7 @@

We will do our best to keep master in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.

To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.

Bugs

-

We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a bug report.

+

We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a bug report.

If you have questions about using React Native, the Community page list various resources that should help you get started.

We also have a place where you can request features or enhancements. If you see anything you'd like to be implemented, vote it up and explain your use case.

Reporting new issues

diff --git a/docs/improvingux.html b/docs/improvingux.html index 074148b11b0..c3aed5e85b7 100644 --- a/docs/improvingux.html +++ b/docs/improvingux.html @@ -14,7 +14,6 @@
  • Manage layout when keyboard is visible
  • Make tappable areas larger
  • Use Android Ripple
    • -
  • Screen orientation lock
  • Learn More
    • @@ -43,7 +42,7 @@

    Try it on your phone

    Screen orientation lock

    -

    Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add 'android:screenOrientation="portrait"' to lock to portrait or 'android:screenOrientation="landscape"' to lock to landscape.

    +

    Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add 'android:screenOrientation=”portrait”' to lock to portrait or 'android:screenOrientation=”landscape”' to lock to landscape.

    Learn more

    Material Design and Human Interface Guidelines are great resources for learning more about designing for mobile platforms.

    ← AccessibilityTimers →

    React Native

    next

    Edit

    Improving User Experience

    Configure text inputs

    Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:

    • Focus the first field automatically
      • diff --git a/docs/next/sectionlist.html b/docs/next/sectionlist.html index d9e16635eeb..74200c80cf2 100644 --- a/docs/next/sectionlist.html +++ b/docs/next/sectionlist.html @@ -18,20 +18,9 @@
    • Scroll loading.

    If you don't need section support and want a simpler interface, use <FlatList>.

    -

    Simple Examples:

    -
    // Example 1 (Homogeneous Rendering)
-<SectionList
-  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
-  renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>}
-  sections={[
-    { title: 'Title1', data: ['item1', 'item2'] },
-    { title: 'Title2', data: ['item3', 'item4'] },
-    { title: 'Title3', data: ['item5', 'item6'] },
-  ]}
-  keyExtractor={(item, index) => item + index}
-/>
-
-// Example 2 (Heterogeneous Rendering / No Section Headers)
+
    Simple Examples:
+// Example 1 (Homogeneous Rendering) <SectionList renderItem={({ item, index, section }) => {item}} renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}} sections={[ { title: 'Title1', data: ['item1', 'item2'] }, { title: 'Title2', data: ['item3', 'item4'] }, { title: 'Title3', data: ['item5', 'item6'] }, ]} keyExtractor={(item, index) => item + index} />
    
+
    // Example 2 (Heterogeneous Rendering / No Section Headers)
 const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
 
 <SectionList
diff --git a/docs/performance.html b/docs/performance.html
index 1b4004ee5fa..186b10f56c0 100644
--- a/docs/performance.html
+++ b/docs/performance.html
@@ -36,7 +36,7 @@
 
    If your FlatList is rendering slow, be sure that you've implemented getItemLayout to optimize rendering speed by skipping measurement of the rendered items.
    
 
    JS FPS plunges when re-rendering a view that hardly changes
    
 
    If you are using a ListView, you must provide a rowHasChanged function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
    
-
    Similarly, you can implement shouldComponentUpdate and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
    
+
    Similarly, you can implement shouldComponentUpdate and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
    
 
    Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time
    
 
    "Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.
    
 
    The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you set useNativeDriver: true, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.
    
diff --git a/docs/running-on-device.html b/docs/running-on-device.html
index 352dbbf62d0..8c645303138 100644
--- a/docs/running-on-device.html
+++ b/docs/running-on-device.html
@@ -145,7 +145,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 
    22b8:2e76
    
 
    In this case, it's 22b8. That's the identifier for Motorola.
    
 
    You'll need to input this into your udev rules in order to get up and running:
    
-
    echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules
+
    echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
 
    
 
    Make sure that you replace 22b8 with the identifier you get in the above command.
    
 
    
@@ -188,7 +188,7 @@ emulator-5554 offline   
    
 
    Open the Report navigator tab, select the last Build and search for xip.io. The IP address which gets embedded in the app should match your machines IP address plus the domain .xip.io (e.g. 10.0.1.123.xip.io)
    
 
    3. Network/router configuration
    
-
    React Native uses the wildcard DNS service xip.io to address your device, as Apple ATS prohibits URLs with IP addresses instead of domain names, and developers' networks are often not set up to resolve local hostnames. Some routers have security features to prevent DNS Servers from resolving to anything in the local IP range.
    
+
    React Native uses the wildcard DNS service xip.io to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.
    
 
    Now check if you are able to resolve the xip.io address, by running nslookup.
    
 
    $ nslookup 10.0.1.123.xip.io
 
    
@@ -206,10 +206,7 @@ emulator-5554 offline   
    
 
    Run the following in a command prompt:
    
-
    $ adb -s <device name> reverse tcp:8081 tcp:8081
-
    
-
    To find the device name, run the following adb command:
    
-
    $ adb devices
+
    $ adb reverse tcp:8081 tcp:8081
 
    
 
    You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.
    
 
    Method 2: Connect via Wi-Fi
    
@@ -226,7 +223,7 @@ emulator-5554 offline   red screen with an error. This is OK. The following steps will fix that.
 
  • Open the in-app Developer menu.
    • 
-
  • Go to Dev Settings → Debug server host & port for device.
    • 
+
  • Go to Dev Settings → Debug server host for device.
    • 
 
  • Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
    • 
 
  • Go back to the Developer menu and select Reload JS.
    • 
 
diff --git a/docs/state.html b/docs/state.html
index 5391c0447f8..af7a99cd7e5 100644
--- a/docs/state.html
+++ b/docs/state.html
@@ -48,7 +48,7 @@
 AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
    -

    In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux to control your data flow. In that case you would use Redux to modify your state rather than calling setState directly.

    +

    In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like Redux to control your data flow. In that case you would use Redux to modify your state rather than calling setState directly.

    When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.

    State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.

    ← PropsStyle →