React Native UI Components
libraries
(REACT – NATIVE)
Ths. Trần Văn Hữu
Email: huutv@tdmu.edu.vn
Mobile: 0913131732
Khoa Kỹ thuật – Công nghệ
Đại học Thủ Dầu Một
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
THANK YOU! QUESTIONS?
42
