Getting Started with React Native Elements UI
source link: https://www.digitalocean.com/community/tutorials/react-react-native-elements
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
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.
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.
Note: Throughout this article, we will abbreviate React Native Elements as RNE.
In this article, you will explore some of the components provided by React Native Elements. You will be able to take what you learn here and apply them to the other components.
Prerequisites
If you would like to follow along with this article, you will need:
- A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
- Familiarity with setting up your environment to create a new React Native project and using the iOS or Android simulators may be beneficial.
- Familiarity with using JSX syntax in React Native.
- Some familiarity with React Native components.
This tutorial was verified with Node v16.4.0, npm
v7.19.0, react
v16.13.1, react-native
v0.63.4, and react-native-elements
v3.4.2.
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 [email protected]
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.
Using 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 (
<SafeAreaView>
<Text
h1
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.
For more information, consult the official documentation for Text
.
Using 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 (
<SafeAreaView>
<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.
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 adisabledTitleStyle
. - Finally, you can even give your button a linear-gradient design.
For more information, consult the official documentation for Button
.
Using 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 (
<SafeAreaView>
<Button
icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}
iconRight
title="Mail"
/>
</SafeAreaView>
);
}
This code will result in the following:
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 (
<SafeAreaView>
<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.
For more information, consult the official documentation for Icon
.
Using 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 (
<SafeAreaView>
<SearchBar
platform='ios'
cancelButtonTitle='cancel'
onChangeText={(search) => { this.updateSearch(search) }}
value={search}
/>
</SafeAreaView>
);
}
}
This code will result in the following:
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 />
.
Conclusion
In this article, you explored 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.
There is much more than we covered here, such as a nice <Rating />
component, but with the basic understanding here, you should be able to pick up on how the rest of it works.
The official documentation is a great place to look through their components and find what props you can use in each component and how to implement them.
Recommend
-
38
React Native animation is a popular topic for workshops and classes, perhaps because many developers find it challenging to work with. While many online blogs and resources focus on the performance aspects of React Native...
-
9
Getting Started with React Native in 2020 A hybrid approach to create mobile apps have has evolved a lot in the past d...
-
4
Using React Native Elements with the Ignite Bowser boilerplate
-
11
Getting Started With React Native: Windows EditionAnnouncing a new free Infinite Red Academy course!
-
5
react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project. Description The boi...
-
4
Getting started with Protractor UI Elements Reading Time: 2 minutes You must have recalled from my previous blog how and why protractor turns out to be the most trending testing tool in the market. Wit...
-
2
Getting started with React Native for Windows & macOSMarch 26th 2022 new story4React Native as a...
-
5
Getting started with React Native securityKingsley UbahApril 7, 2022React provides an eas...
-
8
Stripe Elements Integration: Getting Started Recently, I was involved with a project that required the client to collect payments from their customers. This brought up many questions on the best approach to process...
-
3
Videos Controls elements and utilities for react-native video players Aug 16, 2022 1 min read
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK