React Native #2 - Creating Components

In this post, I will take you through how to create a component that is reusable in iOS/Android. First off, we will make a folder where we place all our reusable code, I have called it app and created it under the folder that was created when using the react-native command to initialise your app. There will be a few different things that go in this folder, so I have created another folder under app called components.

ViewContainer Component

I have chosen a simple component for the purpose of this tutorial, and it is a ViewContainer component. It is effectively a react native view, with specified styling applied and will form the base of all the screens you add to your app. Under app/components I add a new folder called viewContainer with 2 new files, the first file defines how the component is rendered and is called viewContainer.js:

  'use strict';

  import React, { Component } from 'react';
  import { View } from 'react-native';
  import styles from './style';

  class ViewContainer extends Component {
      render() {
          return (
              <View style={styles.viewContainer}>
                  {this.props.children}
              </View>
          );
      }
  }

  module.exports = ViewContainer;

The first file imports React and Component, React is a default export (see here for explanation) and so doesn't need to be in {}. We import Component so that we can define a new component and how it is rendered, this is defined in the render function. We also import View from react native, as this is the type of existing component we want to base our custom component off. And finally, we also import the style for the view container which is called style.js:

  'use strict';
  import { StyleSheet } from 'react-native';

  const styles = StyleSheet.create({
      viewContainer: {
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "stretch"
      }
  });

  module.exports = styles;

The second file imports StyleSheet from react native, which can be used to define the style of the view component using flexbox CSS.

Using the ViewContainer Component

Your ViewContainer component can be used by either Android or iOS, so in either your index.ios.js or index.android.js or both, you can change the file to be:

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

  import ViewContainer from 
    './app/components/viewContainer/ViewContainer';

  export default class Goalie extends Component {
    render() {
      return (
        <ViewContainer>
          <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>
        </ViewContainer>
      );
    }
  }

  const styles = StyleSheet.create({
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5
    },
  });

  AppRegistry.registerComponent('Goalie', () => Goalie);