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:
You should also install react-native-vector-icons and 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:
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
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:
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:
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:
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:
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:
Alternatively, you can use the useTheme() hook to access the theme inside a component.
For example:
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:
With this module, you can pass in your custom colors as values when creating a theme:
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.
