React Native: Basic Components

Over the past week I've been digging a little bit into React Native. Since I have been focusing mainly on React for Front-End Development, I thought that the jump to React Native for mobile development would be a natural progression. This week, I'd like to take you through some of the basic components that are provided and how they compare to using React for web development.

React is a library that makes it simple to create complex (or simple) web applications by breaking down all of the pieces into components. If you'd like to read a bit about React Components to familiarize yourself before reading on, feel free to check out the article I wrote a few weeks ago here.

React Native provides the same functionality, except instead of using web components to create the building blocks of you application, each React Native component maps to native components. Note that since we are working with Native, your components will not return JSX or HTML, but instead native components. This post will guide you through some of the most used Native components with comparisons to ReactJS if applicable.

View

The View component is the most fundamental component in your React toolbox. View is a container component and maps directly to the equivalent native view for whichever platform you're developing. If would be equivalent to a <div> in web development and just like a <div> can be nested inside other <View>s and have children of any type. Take a look at an example <View> might look like below.

import React from "react";
import ( View, Text } from "react-native";

const WelcomeScreen = () => {
  return (
    <View>
      <Text> Welcome! </Text>
    </View>
  )
}

Text

You may have noticed in the code example above that I snuck in an extra component. That's the Text component and it is used for displaying text on screen. These can also be nested, and are more or less equivalent to a <p>.

Image

The Image component is very similar to the Text component, except that it is used for displaying images instead of text. It is similar to <img/>. You can specify the image to be displayed using the source prop, passing in either a require() function with the image file or an object with the image uri. Take a look below for an example.

import React from 'react';
import { View, Image, Text } from 'react-native';

const ImageExample = () => {
  return (
    <View>
      <Image source={require('./image.jpg')} />
      <Text>This image used the require function!</Text>
      <Image source={ {uri: 'https://image.com'} } />
      <Text>This image used a uri</Text>
    </View>
  )
}

TextInput

This component allows the user to input text into our application via the keyboard. It is very similar to <input type="text">. There are a number of props that can provide some additional functionality and configuration, but we're going to keep it simple. The most simple use case is presenting the user with an input text box and using an onChangeText to read the data. Let's take a look at what a simple component using this would look like.

(If you want to know more about the hook used in this example, check out my post about React Hooks here.)

import React from 'react';
import { TextInput } from 'react-native';

const UselessTextInput = () => {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <TextInput
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

ScrollView

ScrollView is very similar to the View component, except as I'm sure you can guess it gives us a view with a scrollbar. Note that it must have a bounded height or you will run into some issues. This is most easily done by making sure that it's parents have a bounded height. You can also set the property directly, but this is discouraged in the documentation.

import React from 'react';
import { Text, View, ScrollView } from 'react-native';

const ScrollExample = () => {
  return (
    <View style={ {flex: 1} }>
      <ScrollView>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </View>
  );
}

StyleSheet

This last component is used a bit differently than the other components we have talked about before. You wont be seeing something like <StyleSheet>, instead you will be using it to create a StyleSheet object that can be used as an abstraction similar to CSS. The object generally contains key names with values that are themselves objects. Those values contain key value pairs that are similar to CSS properties and values.

You can pass these objects into components as the style prop using dot notation to provide styling for your components. This method is preferable to providing in line styles since the StyleSheet component automatically validates for property names. It also looks a lot cleaner and helps to separate concerns.

If that all seems a little confusing, let's take a look at what a simple example would look like in practice.

import React from "react";
import ( View, Text, StyleSheet } from "react-native";

const WelcomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}> Welcome! </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "blue"
  },
  text: {
    backgroundColor: "red",
    textAlign: "center",
    fontSize: 30
  }
})

There you have it: a basic overview of some of the most commonly used components in React Native. If you'd like to get a little more in depth about what you can do with these different components, check out the Components documentation or to learn more about React Native in general take a look at the Official documentation.