Button
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
-
If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at diff --git a/docs/0.10/debugging.html b/docs/0.10/debugging.html index 85d8aa12678..44a2d575c94 100644 --- a/docs/0.10/debugging.html +++ b/docs/0.10/debugging.html @@ -8,7 +8,7 @@
React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
Accessing the In-App Developer Menu
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).
@@ -56,23 +56,23 @@The Developer Menu is disabled in release (production) builds.
Now run react-devtools from the terminal to launch the standalone DevTools app:
react-devtools
It should connect to your simulator within a few seconds.
Note: if you prefer to avoid global installations, you can add
react-devtoolsas a project dependency. Add thereact-devtoolspackage to your project usingnpm install --save-dev react-devtools, then add"react-devtools": "react-devtools"to thescriptssection in yourpackage.json, and then runnpm run react-devtoolsfrom your project folder to open the DevTools.
Integration with React Native Inspector
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
-
However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose "Hide Inspector" in the same menu to exit this mode.
Inspecting Component Instances
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.
Performance Monitor
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
diff --git a/docs/0.10/getting-started.html b/docs/0.10/getting-started.html index 0105e655792..11788937f71 100644 --- a/docs/0.10/getting-started.html +++ b/docs/0.10/getting-started.html @@ -122,7 +122,7 @@ automatically once you save your changes.
That's it!
Congratulations! You've successfully run and modified your first React Native app.
-
Now what?
Create React Native App also has a @@ -275,7 +275,7 @@ higher.
choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown. -
+
Java Development Kit
React Native requires a recent version of the Java SE Development Kit (JDK). @@ -321,9 +321,9 @@ Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-
+
-
+
The SDK Manager can also be found within the Android Studio "Preferences" @@ -341,24 +341,24 @@ all checked:
Google APIs Intel x86 Atom_64 System Image
Next, select the "SDK Tools" tab and check the box next to "Show Package
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
then make sure that 23.0.1 is selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.
3. Configure the ANDROID_HOME environment variable
The React Native tools require some environment variables to be set up in order
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
click on Change settings.... Open the Advanced tab and click on
Environment Variables.... Click on New... to create a new ANDROID_HOME
user variable that points to the path to your Android SDK:
The SDK is installed, by default, at the following location:
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
Using a virtual device
You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
-
If you have just installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".
Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
-If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then go back to the AVD Manager.
-If you don't have HAXM installed, follow these instructions to set it up, then go back to the AVD Manager.
Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then @@ -491,7 +491,7 @@ proceed to the next step.
react-native run-iosYou should see your new app running in the iOS Simulator shortly.
-
react-native run-ios is just one way to run your app. You can also run it
directly from within Xcode or Nuclide.
@@ -511,9 +511,9 @@ react-native run-androidIf everything is set up correctly, you should see your new app running in your Android emulator shortly.
-
+
-
+
@@ -546,12 +546,12 @@ see your changes!
react-native run-androidis just one way to run your app - you can also run it directly from within Android Studio or Nuclide.That's it!
Congratulations! You've successfully run and modified your first React Native app.
-+
That's it!
Congratulations! You've successfully run and modified your first React Native app.
-+
Now what?
diff --git a/docs/0.10/handling-touches.html b/docs/0.10/handling-touches.html index 1558df155b6..efa2ad1ebf0 100644 --- a/docs/0.10/handling-touches.html +++ b/docs/0.10/handling-touches.html @@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this: text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button. -
+
Go ahead and play around with the
diff --git a/docs/0.10/integration-with-existing-apps.html b/docs/0.10/integration-with-existing-apps.html index 27e87512641..f4291af3e2c 100644 --- a/docs/0.10/integration-with-existing-apps.html +++ b/docs/0.10/integration-with-existing-apps.html @@ -149,7 +149,7 @@Buttoncomponent using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.
Assume the app for integration is a 2048 game. Here is what the main menu of the native application looks like without React Native.
-
+
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
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);subspecs is available in/node_modules/react-native/React.podspec. They are generally named by functionality. For example, you will generally always want theCoresubspec. That will get you theAppRegistry,StyleSheet,Viewand other core React Native libraries. If you want to add the React NativeTextlibrary (e.g., for<Text>elements), then you will need theRCTTextsubspec. If you want theImagelibrary (e.g., for<Image>elements), then you will need theRCTImagesubspec.We will tie our React Native component with a new native view in the
ViewControllerthat will actually host it calledRCTRootView.1. Create an Event Path
You can add a new link on the main game menu to go to the "High Score" React Native page.
-+
2. Event Handler
We will now add an event handler from the menu link. A method will be added to the main
ViewControllerof your application. This is whereRCTRootViewcomes into play.When you build a React Native application, you use the React Native packager to create an
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);index.bundlethat will be served by the React Native server. Insideindex.bundlewill be ourRNHighScoremodule. So, we need to point ourRCTRootViewto the location of theindex.bundleresource (viaNSURL) and tie it to the module.
3. Wire Up
Wire up the new link in the main menu to the newly added event handler method.
-+
@@ -414,9 +414,9 @@ $ react-native run-iosOne of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the
Touch Up Insideevent, drag that to the storyboard and then select the created method from the list provided.In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.
Here is the native application home screen:
-+
Here is the React Native high score screen:
-+
@@ -630,7 +630,7 @@ AppRegistry.registerComponent('MyReactNativeApp'2. Run the appIf you are getting module resolution issues when running your application please see this GitHub issue for information and possible resolution. This comment seemed to be the latest possible resolution.
Now build and run your Android app as normal.
Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
-+
Creating a release build in Android Studio
You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/ diff --git a/docs/0.10/linking-libraries-ios.html b/docs/0.10/linking-libraries-ios.html index 39e88bf2a1a..29bfdb33e48 100644 --- a/docs/0.10/linking-libraries-ios.html +++ b/docs/0.10/linking-libraries-ios.html @@ -41,12 +41,12 @@ add# Add new pods below this linecomment to places where you expe folder. Drag this file to your project on Xcode (usually under theLibrariesgroup on Xcode); -+
Step 2
Click on your main project file (the one that represents the
-.xcodeproj) selectBuild Phasesand drag the static library from theProductsfolder inside the Library you are importing toLink Binary With Libraries+
Step 3
Not every library will need this step, what you need to consider is:
Do I need to know the contents of the library at compile time?
@@ -61,7 +61,7 @@ received. to your project's file, selectBuild Settingsand search forHeader Search Paths. There you should include the path to your library (if it has relevant files on subdirectories remember to make itrecursive, likeReacton the example). -+
