A Look at the React Native Elements UI Toolkit

Stephen Hartfield

React Native Elements is a styling library with pre-built components to replace the basic, limited React Native components. It’s similar to Bootstrap, giving you useable styles that are broad enough to customize as your own. Every one of the components in React Native Elements is wrapped with the basic React Native <View /> component with styling based on the props you indicate.

Throughout this article, we’ll abbreviate React Native Elements as RNE. We’ll go through the basics so you can understand how to use other components from RNE not discussed. But before we get there, let’s look at the basic installation.

Installation

$ npm i react-native-elements
// or
$ yarn add react-native-elements

If you’re not using Expo but the basic React Native CLI, you’ll need to install react-native-vector-icons. You will likely need to link as well by running: react-native link react-native-vector-icons.

Now that we have the library installed, it’s ready to use, and we can import any component from it like this: import { Icon } from 'react-native-elements';

Text Element and Why React Native Elements?

The primary purpose of React Native Elements is 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. Can someone say “DRY”? Using RNE is perfect for this, as it is already written into the pre-built components, and you just need to use the same props.

The RNE <Text /> component is a perfect example of this. It is the basic <Text /> component from React Native, but 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. On top of that, there’s a prop for each heading size, like h1Style, h2Style, and so on. These apply to the container around the text. Look at the following example:

<Text h1 h1Style={styles.h1}>Your Heading</Text>

Now we know our heading has a font-size of 34. That h2 is all we need and we can be sure all of our primary headings are the same size across our entire app. And the h2Style is for the container around it, if for any reason you wish to style the container. Of course, there are other ways to make it even more customizable to your own needs, but as you can see here, it’s easy to create a theme with the pre-built RNE components.

Implement Button Element

As discussed above, every component from RNE is already wrapped in a <View /> (that’s the container styled by h2style in the <Text> component above). What that means, is you can get away from manually wrapping all your components with a <View /> and instead you simply need to style the component with its prop: containerStyle. Take this example for instance:

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

const App = () => (
  <SafeAreaView>
    <Button containerStyle={{height: 500}} buttonStyle={{height: '100%'}} title='button title'>
  </SafeAreaView>
)

What’s going on here? The <View> component inside the RNE <Button /> is styled by containerStyle to have a height of 500. But, if you didn’t include the buttonStyle={{height: '100%'}}, the button would remain its default height (nowhere near 500). 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 and you’ll find this pattern followed in most all the RNE components.

There are plenty of other styles to give a button, like you may notice that this component defaults with TouchableOpacity on iOS and TouchableNativeFeedback for Android. These defaults can be changed with the TouchableComponent prop, like: TouchableComponent={TouchableHighlight}.

You can set the type of button to “clear”, “outline”, or the default “solid” like: type='outline'. This is pretty simple; “solid” is the default and includes a background, even in iOS. “Outline” defaults to no background, but keeps a thin outline, and “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.

different buttons

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 info, see the official docs.

Icons

You can also put 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 just 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 a 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 to 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 icons (in this site, the long red banner is what you put in the type prop as in the example below, and then put the name of the icon in the name prop). Here is an example:

<Button icon={{ name: "mail", size: 15, type: 'entypo', color: "black"}} iconRight title="Mail">

button with icon

Note that if you use FontAwesome Icons, you might need import the Icon component like this: import Icon from 'react-native-vector-icons/FontAwesome5';

Icons are possible through the react-native-vector-icons. One type of an icon might look different than another type. You may notice we are just putting an object in the icon prop. You can also replace the object in the example above with the following <Button icon={<Icon name="mail" size={15} type="entypo" color="white" />}>. 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 see 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 look like buttons, using the reverse prop. There is a circular border behind icons, but it is normally invisible. 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.

icon examples

SearchBar & Input

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 />.

Input & SearchBar

When you start typing, you’ll notice an “x” at the far right (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 a basic way to have it show up is like this:

<SearchBar platform='ios' cancelButtonTitle='cancel' onChangeText={(search) => { updateSearch(search) }} value={search} />

SearchBar cancel

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), with a nice blue text like you have probably seen before. 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 />.

Further Reading

React Native Elements is full of components and ways to customize your application. There is much more than we covered here, such as a nice <Rating /> component that’s easy to pick up and use, but with the basic understanding here, you should be able to pick up on how the rest of it works. There are bunch of pre-built props that can save you plenty of time and take away hours of manual styling, moving pixel by pixel.

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

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#