We can run the React Native app on Android platform by running the following code in the terminal. react-native run-android Before you can run your app on Android device, you need to enable USB Debugging inside the Developer Options. When USB Debugging is enabled, you can plug in your device and run the code snippet given above. The Native Android emulator is slow. We recommend downloading Genymotion for testing your app. The developer menu can be accessed by pressing command + M.

If you want to test your app in the IOS simulator, all you need is to open the root folder of your app in terminal and run − The above command will start the simulator and run the app. We can also specify the device we want to use. After you open the app in simulator, you can press command + D on IOS to open the developers menu. You can check more about this in our debugging chapter. You can also reload the IOS simulator by pressing command + R.

In this chapter, we will understand navigation in React Native. Step 1: Install Router To begin with, we need to install the Router. We will use the React Native Router Flux in this chapter. You can run the following command in terminal, from the project folder. Step 2: Entire Application Since we want our router to handle the entire application, we will add it in index.ios.js. For Android, you can do the same in index.android.js. App.js Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. Step 3: Add Router Now we will create the Routes component inside the components folder. It will return Router with several scenes. Each scene will need key, component and title. Router uses the key property to switch between scenes, component will be rendered on screen and the title will be shown in the navigation bar. We can also set the initial property to the scene that is to be rendered initially. Routes.js Step 4: Create Components We already have the Home component from previous chapters; now, we need to add the About component. We will add the goToAbout and the goToHome functions to switch between scenes. Home.js About.js The app will render the initial Home screen. You can press the button to switch to the about screen. The Back arrow will appear; you can use it to get back to the previous screen.

React native offers a couple of methods that help in debugging your code. In App Developer Menu You can open the developer menu on the IOS simulator by pressing command + D. On Android emulator, you need to press command + M.

In this chapter, we will show you how to use LayoutAnimation in React Native. Animations Component We will set myStyle as a property of the state. This property is used for styling an element inside PresentationalAnimationComponent. We will also create two functions − expandElement and collapseElement. These functions will update values from the state. The first one will use the spring preset animation while the second one will have the linear preset. We will pass these as props too. The Expand and the Collapse buttons call the expandElement() and collapseElement() functions. In this example, we will dynamically change the width and the height of the box. Since the Home component will be the same, we will only change the Animations component. App.js

In this chapter, we will show you touchable components in react Native. We call them ‘touchable’ because they offer built in animations and we can use the onPress prop for handling touch event. Facebook offers the Button component, which can be used as a generic button. Consider the following example to understand the same. App.js If the default Button component does not suit your needs, you can use one of the following components instead. Touchable Opacity This element will change the opacity of an element when touched. App.js Touchable Highlight When a user presses the element, it will get darker and the underlying color will show through. App.js Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. Touchable Native Feedback This will simulate ink animation when the element is pressed. App.js Touchable Without Feedback This should be used when you want to handle the touch event without any animation Usually, this component is not used much.

In this chapter, we will show you how to use fetch for handling network requests. App.js Using Fetch We will use the componentDidMount lifecycle method to load the data from server as soon as the component is mounted. This function will send GET request to the server, return JSON data, log output to console and update our state. http_example.js Output

In this chapter, we will understand how to work with images in React Native. Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder. We will show images on the home screen. App.js Local image can be accessed using the following syntax. image_example.js Output Screen Density React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density. The following will be the names of the image inside the img folder. Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. Network Images When using network images, instead of require, we need the source property. It is recommended to define the width and the height for network images. App.js image_example.js Output

In this chapter, we will show you how to work with the ScrollView element. We will again create ScrollViewExample.js and import it in Home. App.js Scrollview will render a list of names. We will create it in state. ScrollView.js When we run the app, we will see the scrollable list of names.

In this chapter, we will show you how to work with TextInput elements in React Native. The Home component will import and render inputs. App.js Inputs We will define the initial state. After defining the initial state, we will create the handleEmail and the handlePassword functions. These functions are used for updating state. The login() function will just alert the current value of the state. We will also add some other properties to text inputs to disable auto capitalisation, remove the bottom border on Android devices and set a placeholder. Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career. inputs.js Whenever we type in one of the input fields, the state will be updated. When we click on the Submit button, text from inputs will be shown inside the dialog box. Whenever we type in one of the input fields, the state will be updated. When we click on the Submit button, text from inputs will be shown inside the dialog box.