Category: Core Concepts

In this chapter, we will show you how to create a list in React Native. We will import List in our Home component and show it on screen. App.js To create a list, we will use the map() method. This will iterate over an array of items, and render each one. List.js When we run the app, we will see the…

To accommodate different screen sizes, React Native offers Flexbox support. We will use the same code that we used in our React Native – Styling chapter. We will only change the PresentationalComponent. Layout To achieve the desired layout, flexbox offers three main properties − flexDirection justifyContent and alignItems. The following table shows the possible options. Property Values Description flexDirection ‘column’, ‘row’ Used to…

There are a couple of ways to style your elements in React Native. You can use the style property to add the styles inline. However, this is not the best practice because it can be hard to read the code. In this chapter, we will use the Stylesheet for styling. Container Component In this section, we will simplify our…

In our last chapter, we showed you how to use mutable state. In this chapter, we will show you how to combine the state and the props. Presentational components should get all data by passing props. Only container components should have state. Container Component We will now understand what a container component is and also how it works. Theory…

The data inside React Components is managed by state and props. In this chapter, we will talk about state. Difference between State and Props The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated. Using State This is our root component. We are just importing Home which will be used in most of the…

If you open the default app you can observe that the app.js file looks like Output Hello world To display a simple message saying “Welcome to Tutorialspoint” remove the CSS part and insert the message to be printed wrapped by the <text></text> tags inside <view></view> as shown below.

There are a couple of things you need to install to set up the environment for React Native. We will use OSX as our building platform. Sr.No. Software Description 1 NodeJS and NPM You can follow our NodeJS Environment Setup tutorial to install NodeJS. Step 1: Install create-react-native-app After installing NodeJS and NPM successfully in your system…

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don’t build a mobile web app, an HTML5 app, or a hybrid app; you build a real mobile app that’s indistinguishable from an app…