React Native UI Components
libraries
(REACT – NATIVE)
1
1
Why use React Native UI Components?
These components provide various functionalities, including
buttons, text inputs, images, and more, to help developers easily
create visually appealing and interactive apps.
Developers use React Native UI Components for
several reasons:
Cross-platform Compatibility
Reusability
Customization
Improved UX
Improved Coding Experience
3
Top 5 React Native UI Components in 2023
1. React Native Elements
This project has 23.3K stars and 4.5K forks on Github, You can find
the full walk-through here. They also provide a VS code extension.
Overall it is a vibrant open community to which anyone can contribute.
4
Top 5 React Native UI Components in 2023
2. React Native Paper
This project has 10.3K stars and 1.9K forks on Github, and is another
popular UI component library for React Native app dets for developers to
use in their apps.
5
Top 5 React Native UI Components in 2023
3. Native Base
This project has 19k stars and 2.3k forks on Github. It is an accessible,
utility-first component library that helps build consistent UI across
android, iOS and web.
4. Shoutem UI
With 4.8k stars and 500+ forks on Github, these components
are built to be both composable and customizable. Each
component has a predefined style compatible with the rest of
the Shoutem UI, making it possible to build complex
components.
5. React Native Material UI
Is another set of modular and customizable Material Design
UI components for React Native with 150+ stars on Github
6
React Native Paper
Cross-platform Material Design for React Native
Paper is a collection of customizable and production-ready
components for React Native, following Google’s Material
Design guidelines. Link
7
Installation
Open a Terminal in your project's folder and run:
For React Native v5
For iOS platform
For React Native project
8
Components of React Native Paper
Theming
Icons
ActivityIndicator
Appbar
Avatar
Banner
BottomNavigation
Button
Card
Checkbox
Chip
9
Components of React Native Paper
DataTable
Dialog
Divider
Drawer
HelperText
IconButton
List
Menu
Modal
ProgressBar
RadioButton
Searchbar
Switch 10
Components of React Native Paper
Text
TextInput
ToggleButton
Tooltip
TouchableRipple
11
Theming
https://callstack.github.io/react-native-paper/docs/guides/theming
12
Theming
Applying a theme to the whole app use <PaperProvider>
Use the built-in useTheme() hook to get access to the theme's
variables.
13
Theming
c
c
c
c
c
c
c
c
14
Theming
15
Icons
Using the icon prop
An icon name
You can pass the name of an icon from MaterialCommunityIcons. This
will use the react-native-vector-icons library to display the icon
Remote image
Local image:
16
Icons
A render function: customize icon with image
17
ActivityIndicator
Activity indicator is used to present progress of some
activity in the app.
18
Appbar
A component to display action items in a bar. It can be placed at
the top or bottom.
19
Appbar
A component to display action items in a bar. It can be placed at
the top or bottom.
Chú ý: nên đặt trong SafeAreaProvider thuộc
react-native-safe-area-context
20
Avatar
Avatar.Icon
Avatar.Image
Avatar.Text
21
Banner
22
BottomNavigation
23
Button
24
Button
Resize Button
25
Card
Card.Title
Card.Content
Card.Cover
Card.Actions
26
DataTable
27
DataTable
28
Divider
A divider is a thin, lightweight separator
that groups content in lists and page
layouts.
29
Drawer
A component to group content inside a navigation drawer.
• Drawer.Section
• Drawer.Item
30
Drawer:
• Drawer.CollapsedItem
Collapsed component used to show an action item with
an icon and optionally label in a navigation drawer.
31
HelperText
• Helper text is used in conjuction with input elements to provide
additional hints for the user.
• https://www.tutorialspoint.com/es6/es6_regexp.html
32
IconButton
An icon button is a button which displays only an icon without a label.
33
List
A component used to group list items.
• List.Section
• List.Item
• List.Icon
34
List
List.AccordionGroup
35
List
List.AccordionGroup
36
Menu
Menus display a list of choices on temporary elevated surfaces. Their placement
varies based on the element that opens them.
37
Modal
The Modal component is a simple way to present content above an enclosing
view. To render the Modal above other components, you'll need to wrap it with the
Portal component.
38
Switch
Switch is a visual toggle between two mutually exclusive states — on and off.
39
Text
Typography component showing styles
complied with passed variant prop and
supported by the type system.
40
TextInput
A component to allow users to input text.
41
42
