Creating and Rendering Components in React Native

In the last post we discussed about React Components and importance of JSX. This post will focus on creating and rendering react components.

Import React Native

We had created the first project while setting up the iOS simulator and modified the index.ios.js file to experience the live reloading. Now open up this file in your code editor. select all and hit delete.

Here is code to import the Native Components.

We’ll discuss more about AppRegistry, Text, View subsequently.

JSX for React Native

We’ll start writing our own Native component from scratch. Before that let’s understand that in React Native we don’t have access to HTML tags like div, span, img and the rest. So what we first need to know are two basic elements — “text” and “view ”.

View

View is basically a wrapper that can contain other custom components, handle touch and support flexbox layout.

Text

This is used to display text along with support for nesting, styling and touch handling.

Here is how the it would look when we put together both View and Text.

MyTaskList class extends Component class, which is the fundamental building block of the UI in the React world.

Rendering Component

Now that we have created a Native Component, next step would be to render it on the screen and display the text content.

AppRegistry

This is where all the Native apps will begin the running process. We need to register the root component with ‘AppRegistry.registerComponent’ to enable loading of all the dependent components and load the final app.

Conclusion

We discussed about importing React Native, creating Component with view & text, rendering it with AppRegistry. Following is our final code:

In the next post we’ll cover styling of our react component.