Getting Started with React Native Elements UI

Introduction

React Native Elements is a styling library with pre-built components that build upon React Native components. Every one of the components in React Native Elements is wrapped with the React Native <View /> component with styling based on the props you indicate.

The primary purpose of React Native Elements for building on top of the basic React Native components to give you more flexibility and ease to theme your entire app. If you’ve ever written CSS for an entire app, you have probably found ways to save yourself some time and write things once instead of over and over. Using React Native Elements allows you to use pre-built components and customize or extend them to re-use the same props.

In this article, you will explore some of the components provided by React Native Elements. You will be able to take what you learn here and apply them to the other components.

Prerequisites

If you would like to follow along with this article, you will need:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
• Familiarity with setting up your environment to create a new React Native project and using the iOS or Android simulators may be beneficial.
• Familiarity with using JSX syntax in React Native.
• Some familiarity with React Native components.

This tutorial was verified with Node v16.4.0, npm v7.19.0, react v16.13.1, react-native v0.63.4, and react-native-elements v3.4.2.

Setting Up the Project

First, use create-react-native-app to create a new React Native application:

npx create-react-native-app

Answer the prompts for creating a new project. Then navigate to the new project directory.

Then, install react-native-elments:

npm install react-native-elements@3.4.2

Now that we have the library installed, it’s ready to use, and we can import any component from it like this:

import { Text } from 'react-native-elements';

For example, this code will make the Text component available for use.

Using the Text Component

The React Native Element’s <Text /> component expands upon React Native’s <Text /> component with more props to style with.

It has font sizes pre-configured, which you can tap into, using either h1, h2, h3, or h4. The corresponding font sizes are 40, 34, 28, and 22.

There is a prop for each heading size, like h1Style, h2Style, and so on. These apply to the container around the text.

Here is an example:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { Text } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Text
        h1
        h1Style={styles.h1}
      >
        Your Heading
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  h1: {
    backgroundColor: '#00f',
    padding: 10,
  },
});

The prop h1 ensures all of our primary headings are the same size across our entire app. And the h1Style is for the container around it if for any reason you wish to style the container.

For more information, consult the official documentation for Text.

Using the Button Component

As discussed earlier, every component from RNE is already wrapped in a <View />. That’s the container styled by h1style in the <Text> component above. This frees you from manually adding parent container <View /> components. You can use containerStyle to add styles to this parent container.

Take this example for instance:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Button
        containerStyle={{ height: 500 }}
        buttonStyle={{ height: '100%' }}
        title='button title'
      />
    </SafeAreaView>
  );
}

In this code, the <View> component inside the RNE <Button /> is styled by containerStyle to have a height of 500. But, if you did not include the buttonStyle={{height: '100%'}}, the button would remain its default height. Only the View would be taking up 500 pixels of the screen. That’s where giving the buttonStyle prop a height of 100% will fill the entire View height. The buttonStyle styled the Button itself. You will find this pattern followed in almost all the RNE components.

There are plenty of other styles to give a button. You may have noticed that this component defaults with TouchableOpacity on iOS and TouchableNativeFeedback for Android. These defaults can be changed with the TouchableComponent prop:

TouchableComponent={TouchableHighlight}

You can set the type of button to "clear", "outline", or the default "solid":

• "solid" is the default and includes a background, even in iOS.
• "outline" defaults to no background, but keeps a thin outline.
• "clear" defaults to no background and no outline.

You can also add the raised prop to give your button a raised appearance with a box-shadow.

There are plenty of other ways to add style to your button:

• You can also set a loading prop to display a loading indicator on the button and style it.
• You can style the title text with titleStyle.
• You can set a disabledStyle prop as well for a custom disabled look, as well as a disabledTitleStyle.
• Finally, you can even give your button a linear-gradient design.

For more information, consult the official documentation for Button.

Using the Icon Component

Icons are possible through the react-native-vector-icons.

You can also place an icon in the button with the icon prop. This is a prop in a few of the components, where you can insert the Icon component or, alternatively, an object. It will default to center the icon in the button, then it will be pushed to the left of the text if there is text in the title prop. You can switch this to the right side of the text with the iconRight prop.

Within the Icon component, the name prop is important - it matches the official icon name and if it isn’t found, you will only see a question mark instead of the desired icon.

Here’s the full list of supported icons. Each section has a heading that indicates the type of icon. This includes "entypo", "feather", and "fontawesome". The design of icons will often be different with each type.

Here is an example:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

This code will result in the following:

You can also replace the object in the example above with the following:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Icon } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={<Icon name="mail" size={15} type="entypo" color="white" />}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

This is using the RNE <Icon /> component and any time you use icons in RNE, you can implement either way.

Again, all React Native Elements components are wrapped in a <View>, so one of the props you can generally count on is containerStyle - that applies here for <Icon />. Then, instead of buttonStyle, you can style the icon itself with iconStyle. Of course, this is only needed if you desire to style beyond the built-in props. Now, it is important to understand the distinction - you can style the icon container with a prop in the parent <Button /> with iconContainerStyle, which would be the same as the containerStyle prop within the <Icon /> component.

You can also make icons resemble buttons, using the reverse prop. There is a circular border behind icons, but it is not visible by default. With reverse, your icon becomes white (unless you set it specifically with reverseColor), while the background color of the circle is filled in with whatever color you have specified (defaults to black). If you give your icon a raised prop, the circle background will show up, with a default white fill, unless you have reverse as well. The circle background will receive the raised box-shadow, not the icon itself.

For more information, consult the official documentation for Icon.

Using the SearchBar and Input Components

One very useful component in RNE is the <SearchBar />. It begins with all the props a standard <TextInput /> would have, just as the RNE <Input /> component does, but it adds some style props. Besides a few naming differences, <SearchBar /> is largely just a specialized version of the RNE <Input />. Right out of the gate, <SearchBar /> has a magnifying glass icon at the far left (this is your default searchIcon prop), and a dark background. The searchIcon prop is basically the leftIcon prop when using the more generic <Input />.

When you start typing, you’ll notice an x at the far right. This is your default clearIcon prop - which would be equivalent to your rightIcon prop when using <Input /> component. When you press the x icon, it clears the text, which can be handled with the onClear callback prop.

One important thing to remember is that the icons come with style-able containers - you can style with leftIconContainerStyle or rightIconContainerStyle. This would be styling the icon container in the <SearchBar /> component, not the <Icon /> itself.

The cancel button is a bit trickier, but one way to have it show up is like this:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {
    const { search } = this.state;

    return (
      <SafeAreaView>
        <SearchBar
          platform='ios'
          cancelButtonTitle='cancel'
          onChangeText={(search) => { this.updateSearch(search) }}
          value={search}
        />
      </SafeAreaView>
    );
  }
}

This code will result in the following:

Having the platform set to 'ios' and the cancelButtonTitle to whatever text you desire will make the button show up on both platforms when the SearchBar is focused (default behavior). It triggers an onCancel callback. You will also find the default dark theme will turn off when adding this cancel button.

In the <SearchBar> component, you can set the <View /> with containerStyle, and SearchBar here has the prop inputContainerStyle to style an inner container around the TextInput within. To style the TextInput, the box where you write your text, use inputStyle - this styles the text container, but doesn’t include the icons. The inputContainerStyle container does include the icons. These are the same with <SearchBar /> and <Input /> - you will see the <SearchBar /> defaults with padding on the containerStyle and rounded borders on inputContainerStyle.

One difference between <SearchBar /> and <Input /> is the search seems to require setting the value as seen in the example above. without it and the onChangeText callback updating the value, it doesn’t allow you to type anything. This isn’t true of <Input />. Also with the <Input /> component, you can set up a label and error message, each will be within the outer <View />.

Conclusion

In this article, you explored some of the components provided by React Native Elements: Text, Button, Icon, SearchBar, and Input.

React Native Elements is full of components and ways to customize your application. There are many pre-built props that can save you plenty of time and take away hours of manual styling and moving elements around pixel-by-pixel.

There is much more than we covered here, such as a nice <Rating /> component, but with the basic understanding here, you should be able to pick up on how the rest of it works.

The official documentation is a great place to look through their components and find what props you can use in each component and how to implement them.