Scribd Logo
Upload

Welcome to Scribd!

  • 0 views

    Lesson 3 - React Native UI Components

    Uploaded by

    huutv

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lesson 3 - React Native UI Components

    Uploaded by

    huutv
    0 views42 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    0 views42 pages

    Lesson 3 - React Native UI Components

    Uploaded by

    huutv

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 42

    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

    You might also like