Component libraries are a collection of customizable and reusable code that can be made to suit a specific app’s design pattern. They help maintain consistent design across platforms and speed up the development process.

Here you will learn how to use the React Native Elements component library when building your next React Native app.

What Is React Native Elements?

React Native Elements (RNE) is an open-source effort by React Native developers to create a component library that can be useful when building Android, iOS, and web apps. Unlike many other React Native component libraries, RNE supports TypeScript syntax.

The library consists of over 30 components that focus on component structure.

Installing Reactive Native Elements With the React Native CLI

The following instructions are to install React Native Elements in a project created using the React Native cli.

Install React Native Elements in your bare React Native app by running:

        npm install @rneui/themed @rneui/base   

    

You should also install react-native-vector-icons and safe-area-context:

        npm install react-native-vector-icons react-native-safe-area-context

    

How to Install React Native Elements in an Expo Project

To install React Native Elements in an existing Expo project, install the package and react-native-safe-area-context:

        yarn add @rneui/themed @rneui/base react-native-safe-area-context

    

Maintain one package manager like npm or yarn while installing packages to evade the risk of dependency clashes.

Projects built using the expo cli have react-native-vector-icons installed by default, so you don’t need to install it.

Styling Single React Native Elements Components

All components available through RNE take various props for styling the component and the container of the component.

The component's container is a basic <View/> tag wrapping around a component tag, like the <Button/>. The <View/> tag is invincible around the component and takes a containerStyle prop to apply view styles.

A component can receive default styling props like color, type, and size. A component can also receive a unique custom style prop to handle the component's styles.

These are all external styles for the component.

For example, styling the Button component:

        import { View } from "react-native";
import { Button } from "@rneui/themed";
 
const MyComponent = () => {
  return (
    <View>
      <Button
        buttonStyle={{ backgroundColor: "grey" }}
        containerStyle={{ width: 150 }}
      >
        Solid Button
      </Button>
      <Button
        type="outline"
        containerStyle={{ width: 150, margin: 10 }}
        title="Outline Button"
      />
    </View>
  );
}

    

The code above shows how you can apply styles to a Button component. One Button uses a default type prop, and the other uses the custom buttonStyle prop. Both buttons also use the containerStyle prop to add view styles.

Creating Themes for React Native Elements Components

Creating themes for RNE components is useful when you want to apply a style to every instance of those components. With themes, customizing your components to suit the desired design pattern becomes an easy task.

RNE provides a createTheme() function to style components. This function will hold theme styles that override every component's internal or default styles.

To create a theme, call createTheme() and pass the desired theme styles as a function argument:

        import { ThemeProvider, createTheme } from '@rneui/themed';
 
const theme = createTheme({
    components: {
      Button: {
        containerStyle: {
          margin: 10,
        },
        titleStyle: {
          color: "black",
        },
      },
    },
});

    

The ThemeProvider will apply styles to any component wrapped inside it.

The provider accepts a theme prop that is set to the theme created above:

        <ThemeProvider theme={theme}>
    <Button title="Themed Button" />
</ThemeProvider>
<Button title="Normal Button" />


    

Close

Theme styles override internal or default component styles but will not override an external component style.

RNE’s order of precedence places external styles at the top of the hierarchy.

Example:

        // Theme
const theme = createTheme({
    components: {
      Button: {
        containerStyle: {
          margin: 10,
          backgroundColor: "red",
        },
      },
    },
});
 
//Component
<ThemeProvider theme={theme}>
    <Button title="Themed Button" color={"secondary"}/>
</ThemeProvider>

    

In the above code, the background color of the Button component will be secondary, which is a green color as opposed to the theme style of red.

A theme object is shipped with RNE, providing numerous default color values out of the box. RNE provides various options like the ThemeConsumer component, useTheme() hook, and makeStyles() hook generator to access the theme object.

The ThemeConsumer component will wrap your components rendered with an anonymous function. This anonymous function takes theme as a prop.

You can access the theme values with a style prop:

        import React from 'react';
import { Button } from 'react-native';
import { ThemeConsumer } from '@rneui/themed';
 
const MyComponent = () => (
  <ThemeConsumer>
    {({ theme }) => (
      <Button title="ThemeConsumer" style={{ color: theme.colors.primary }} />
    )}
  </ThemeConsumer>
)

    

Alternatively, you can use the useTheme() hook to access the theme inside a component.

For example:

        import React from 'react';
import { Button } from 'react-native';
import { useTheme } from '@rneui/themed';
 
const MyComponent = () => {
  const { theme } = useTheme();
 
  return (
    <View style={styles.container}>
      <Button title="useTheme" style={{ color: theme.colors.primary }}/>
    </View>
  );
};

    

The makeStyles() hook generator is similar to using a style sheet to define styles. Like the style sheet, it separates any styling from outside your rendered component. Referencing the theme object inside a components style prop.

Extending Themes With TypeScript

RNE supports TypeScript declarations in your app, allowing developers to take advantage of the benefits of using TypeScript language.

With TypeScripts declaration merging, you can extend theme definitions to add custom colors and props for both RNE’s default and custom components.

To extend the colors inside the theme object, you will create a separate TypeScript.ts file and declare the module @rneui/themed inside the file.

You can then go ahead to add your custom colors and specify their expected type:

        // **TypeScript.ts**
 
import '@rneui/themed';
 
declare module '@rneui/themed' {
  export interface Colors {
    primaryLight: string;
    secondaryLight: string;    
  }
}

    

With this module, you can pass in your custom colors as values when creating a theme:

        const theme = createTheme({
  colors: {
    primaryLight: "",
	secondaryLight: ""
  },
})

    

Now the custom colors are part of your theme object and can be accessed using ThemeProvider, ThemeConsumer, or the useTheme() hook.

RNE Components vs. React Native Components

Component libraries like React Native Elements are a great way to get an app up and running fast. They keep your focus on the app's structure rather than on the details of the design. Using RNE components over React Native components should be guided primarily by the focus of your application and how much development time you have.