Category: Core Concepts

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…

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…

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…

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…

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…

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…

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…

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…