diff --git a/releases/next/docs/getting-started.html b/releases/next/docs/getting-started.html index dcc0318f2a4..7030b23fbb3 100644 --- a/releases/next/docs/getting-started.html +++ b/releases/next/docs/getting-started.html @@ -224,11 +224,11 @@ react-native run

Modifying your app #

Now that you have successfully run the app, let's modify it.

- + - + -

Modifying your app #

Now that you have successfully run the app, let's modify it.

+

Modifying your app #

Now that you have successfully run the app, let's modify it.

That's it! #

Congratulations! You've successfully run and modified your first React Native app.

diff --git a/releases/next/docs/integration-with-existing-apps.html b/releases/next/docs/integration-with-existing-apps.html index a2defb2ebff..9e44c1fb7dd 100644 --- a/releases/next/docs/integration-with-existing-apps.html +++ b/releases/next/docs/integration-with-existing-apps.html @@ -163,7 +163,7 @@ Pod installation complete! There are

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).

-

Code integration #

Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.

The React Native component #

The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.

1. Create a index.ios.js file #

First, create an empty index.ios.js file in the root of your React Native project.

index.ios.js is the starting point for React Native applications on iOS, and it is always required. It can be a small file that requires other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in index.ios.js.

2. Add your React Native code #

In your index.ios.js, create your component. In our sample here, we will add simple <Text> component within a styled <View>

'use strict'; +

Code integration #

Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.

The React Native component #

The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.

1. Create a index.js file #

First, create an empty index.js file in the root of your React Native project.

index.js is the starting point for React Native applications, and it is always required. It can be a small file that requires other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in index.js.

2. Add your React Native code #

In your index.js, create your component. In our sample here, we will add simple <Text> component within a styled <View>

'use strict'; import React from 'react'; import { @@ -211,11 +211,11 @@ Pod installation complete! There are }); // Module name -AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

RNHighScores is the name of your module that will be used when you add a view to React Native from within your iOS application.

The Magic: RCTRootView #

Now that your React Native component is created via index.ios.js, you need to add that component to a new or existing ViewController. The easiest path to take is to optionally create an event path to your component and then add that component to an existing ViewController.

We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

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.

Event Path

2. Event Handler #

We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

When you build a React Native application, you use the React Native packager to create an index.ios.bundle that will be served by the React Native server. Inside index.ios.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.ios.bundle resource (via NSURL) and tie it to the module.

We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the index.ios.bundle. Finally, we will create the main RCTRootView. Notice how we provide RNHighScores as the moduleName that we created above when writing the code for our React Native component.

+AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

RNHighScores is the name of your module that will be used when you add a view to React Native from within your iOS application.

The Magic: RCTRootView #

Now that your React Native component is created via index.js, you need to add that component to a new or existing ViewController. The easiest path to take is to optionally create an event path to your component and then add that component to an existing ViewController.

We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

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.

Event Path

2. Event Handler #

We will now add an event handler from the menu link. A method will be added to the main ViewController of your application. This is where RCTRootView comes into play.

When you build a React Native application, you use the React Native packager to create an index.bundle that will be served by the React Native server. Inside index.bundle will be our RNHighScore module. So, we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.

We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the index.bundle. Finally, we will create the main RCTRootView. Notice how we provide RNHighScores as the moduleName that we created above when writing the code for our React Native component.

First import the RCTRootView header.

#import <React/RCTRootView.h>

The initialProperties are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use this.props to get access to that data.

- (IBAction)highScoreButtonPressed:(id)sender { NSLog(@"High Score Button Pressed"); - NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; + NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation @@ -241,7 +241,7 @@ Pod installation complete! There are

First import the React library.

import React

The initialProperties are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use this.props to get access to that data.

@IBAction func highScoreButtonTapped(sender : UIButton) { NSLog("Hello") - let jsCodeLocation = URL(string: "http://localhost:8081/index.ios.bundle?platform=ios") + let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios") let mockData:NSDictionary = ["scores": [ ["name":"Alex", "value":"42"], @@ -264,7 +264,7 @@ Pod installation complete! There are

When moving your app to production, the NSURL can point to a pre-bundled file on disk via something like let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle"). You can use the react-native-xcode.sh script in node_modules/react-native/scripts/ to generate that pre-bundled file.

-
3. Wire Up #

Wire up the new link in the main menu to the newly added event handler method.

Event Path

One 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 Inside event, drag that to the storyboard and then select the created method from the list provided.

Test your integration #

You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the index.ios.bundle package and the server running on localhost to serve it.

1. Add App Transport Security exception #

Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.

<key>NSAppTransportSecurity</key> +
3. Wire Up #

Wire up the new link in the main menu to the newly added event handler method.

Event Path

One 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 Inside event, drag that to the storyboard and then select the created method from the list provided.

Test your integration #

You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the index.bundle package and the server running on localhost to serve it.

1. Add App Transport Security exception #

Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.

<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> @@ -293,7 +293,7 @@ $ react-native run} } ... -}

Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.

Configuring permissions #

Next, make sure you have the Internet permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

If you need to access to the DevSettingsActivity add to your AndroidManifest.xml:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.

Code integration #

Now we will actually modify the native Android application to integrate React Native.

The React Native component #

The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.

1. Create a index.android.js file #

First, create an empty index.android.js file in the root of your React Native project.

index.android.js is the starting point for React Native applications on Android, and it is always required. It can be a small file that requires other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in index.android.js.

2. Add your React Native code #

In your index.android.js, create your component. In our sample here, we will add simple <Text> component within a styled <View>:

'use strict'; +}

Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.

Configuring permissions #

Next, make sure you have the Internet permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

If you need to access to the DevSettingsActivity add to your AndroidManifest.xml:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.

Code integration #

Now we will actually modify the native Android application to integrate React Native.

The React Native component #

The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.

1. Create a index.js file #

First, create an empty index.js file in the root of your React Native project.

index.js is the starting point for React Native applications, and it is always required. It can be a small file that requires other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in index.js.

2. Add your React Native code #

In your index.js, create your component. In our sample here, we will add simple <Text> component within a styled <View>:

'use strict'; import React from 'react'; import { @@ -351,7 +351,7 @@ AppRegistry. mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") - .setJSMainModuleName("index.android") + .setJSMainModuleName("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) @@ -365,7 +365,7 @@ AppRegistry. public void invokeDefaultOnBackPressed() { super.onBackPressed(); } -}

If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.android.js file (it’s the first argument to the AppRegistry.registerComponent() method).

If you are using Android Studio, use Alt + Enter to add all missing imports in your MyReactActivity class. Be careful to use your package’s BuildConfig and not the one from the ...facebook... package.

We need set the theme of MyReactActivity to Theme.AppCompat.Light.NoActionBar because some components rely on this theme.

<activity +}

If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.js file (it’s the first argument to the AppRegistry.registerComponent() method).

If you are using Android Studio, use Alt + Enter to add all missing imports in your MyReactActivity class. Be careful to use your package’s BuildConfig and not the one from the ...facebook... package.

We need set the theme of MyReactActivity to Theme.AppCompat.Light.NoActionBar because some components rely on this theme.

<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> @@ -408,7 +408,7 @@ AppRegistry. return true; } return super.onKeyUp(keyCode, event); -}

Now your activity is ready to run some JavaScript code.

Test your integration #

You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the index.android.bundle package and the server running on localhost to serve it.

1. Run the packager #

To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:

$ npm start
2. Run the app #

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:

Screenshot

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.android.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/

Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.

Now just create a release build of your native app from within Android Studio as usual and you should be good to go!

+}

Now your activity is ready to run some JavaScript code.

Test your integration #

You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the index.bundle package and the server running on localhost to serve it.

1. Run the packager #

To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:

$ npm start
2. Run the app #

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:

Screenshot

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/

Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.

Now just create a release build of your native app from within Android Studio as usual and you should be good to go!

Now what? #

At this point you can continue developing your app as usual. Refer to our debugging and deployment docs to learn more about working with React Native.

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

Learn the Basics #

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.

Let's do this thing.

Hello World #

In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello world". Here it is:

import React, { Component } from 'react'; -import { AppRegistry, Text } from 'react-native'; +import { Text } from 'react-native'; export default class HelloWorldApp extends Component { render() { @@ -8,19 +8,8 @@ tutorial is aimed at all audiences, whether you have React experience or not.

<Text>Hello world!</Text> ); } -} - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your App.js, index.ios.js, or index.android.js file to create a real app on your local machine.

What's going on here? #

Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.

First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, class, extends, and the () => syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.

The other unusual thing in this code example is <Text>Hello world!</Text>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> -is a built-in component that just displays some text.

Components #

So this code is defining HelloWorldApp, a new Component. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a render function which returns some JSX to render.

- - -

This app doesn't do very much #

Good point. To make components do more interesting things, you need to learn about Props.

← PreviousContinue Reading →

Improve this page by sending a pull request!