3 Steps to Use React Native Elements in React Native

Installing the library

I am using it already or ready to use react native example. By running the below command you can install the UI library.

yarn add react-native-elements

You also need to install the dependency to use to components.

yarn add react-native-safe-area-contextand yarn add react-native-vector-icons

Also to install add the below code in android/settings.gradle .

include ':react-native-vector-icons'project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')// then run the below commandreact-native link react-native-vector-icons

Hence everything is ready to use. Enjoy the components provided by the library.

Wrapping the Provider

The next part is to wrap the provider to the root of the application. You can even pass your custom theme to this wrapper or wrap another wrapper like Redux Provider to it. The main agenda to wrap is to make use of a custom theme to edit at one place and make changes in the entire application.

Inside app.js wrap the provider provided by react-native-elements to the root view component. We can even pass the custom theme to our component

import React from 'react';
import { View, Text } from 'react-native';
import { Button, CheckBox, ThemeProvider } from 'react-native-elements';


const theme = {
  Button: {
    raised: true,
  },
};


const App = () => {
  // Now evey button we will be using will be raised in nature
  return (
    <ThemeProvider theme={theme}>
      <View style={{ display: 'flex', flex: 1, justifyContent:'center', alignItems: 'center'}}>
        <Text>Boilerplate for React Native Elements</Text>
        <Button title="React Native Element Button" type="contained" color="black" />
        <CheckBox
          title='Click Here'
        />
      </View>
    </ThemeProvider>
  );
};
export default App;

Creating sample component

The last part is very easy as it only shows the sample usage of components provided by the library. You can read more about the components in the actual docs. Below is the sample product I’ve developed using react-native-elements.

That’s all we need to install the library and start building the UI.

read more here https://reactnativeelements.com/

See you in the next one

Shrey