Introducing React Native Elements

Table of Contents

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.

Attempt free GK Mock Test! Download Entri App!

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.

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.

Grab Latest Study Materials! Register Here!

Usage of 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 (

<Text

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.

Usage 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 (

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

Grab Latest Study Materials! Register Here!

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.

Usage of 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 (

<Button

icon={{ name: “mail”, size: 15, type: ‘entypo’, color: “black” }}

iconRight

title=”Mail”

</SafeAreaView>

);

}

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 (

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

Usage of 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 (

<SearchBar

platform=’ios’

cancelButtonTitle=’cancel’

onChangeText={(search) => { this.updateSearch(search) }}

value={search}

</SafeAreaView>

);

}

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

In this article, we saw 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.

Attempt free GK Mock Test! Download Entri App!

Why is it important to choose Entri?

Excellent online platform for all the Competitive Exams.
Provides updated materials created by the Entri Experts.
Entri provides a best platform with full- length mock tests including previous year question papers.
You can download the app for free and join the required classes.
Entri wishes you all the best for your examinations and future endeavours.