UI/UX Design

What is a React Native Component?

In this article I will explain you what a React Native component is and what is the basic structure of a component. If you didn’t setup your environment yet please check the How to create your first React Native app article.

Let’s create a new React Native project by running the react-native init myFirstProject command in the Terminal.

This is how it should look if the sample project was created successfully:

If you look in the sample project that was created, you will find an android and ios folder as well as a index.ios.js and index.android.js file. Because I’m an iPhone user, I will write all the code for iOS only.

Let’s open the index.ios.js and see what it contains. This file itself is a component.

What is a React Native Component?

You can use a React Native Component to divide the UI into separate, reusable sections. Think about components as if they are javascript functions. A component accepts parameters and returns React elements that describe what will show on the screen.

In a React Native component you can find the following parts:

1. Import

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

Here you specify what other components you want to use. In the sample above you can see I import some components which are part of the React Native library. You can find the full list of supported React Native components at https://facebook.github.io/react-native/docs/getting-started.html

2. Class

export default class myFirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

This is the main part of the React component. Here is the part where you can put all the logic and return what you want to show on the screen. If you look at the example above I have a View which is the most fundamental component for building a UI. The View is basically a container which supports a flexbox layout,  you can style it however you want and it also supports some touch handling and accessibility controls. You can nest Views inside each other and can have unlimited children of any type.

The first child inside the View is a Text component. Similar to the View component, the Text component supports nesting and styling with some touch handling. You can also nest Text components inside each other, it can have unlimited children but only of the same type.

3. Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

This is very similar to CSS. Here you can style how the UI of the application should look like. You can find more about all the supported properties at https://facebook.github.io/react-native/releases/0.21/docs/style.html#content

To run this sample in the iOS simulator, type react-native run-ios in the Terminal and press Enter.

The sample app should look similar to this:


Now let’s play a bit and make some simple changes. I removed the content from the class and only added one Text component which looks like this:

export default class myFirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          This is my first React Native sample from http://imandy.ie
        </Text>
      </View>
    );
  }

To see the result in the simulator press : CMD + R which will reload the app. It should look like this:

If I want to update the color of the url and make it blue, I can put the url in a Text block then add a style to it.

export default class myFirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          This is my first React Native sample from <Text style={styles.url}>http://imandy.ie</Text>
        </Text>
      </View>
    );
  }
}

The style should look like this now:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  url: {
    color: 'blue'
  }
});

This is how it will look in the simulator:

That’s all for now. I hope you liked it and if you have any questions please use the form below.

Thank you!

Add comment