Using NativeBase with React Native
Overview
React Native has gained significant popularity in the mobile app development space, enabling developers to build cross-platform applications efficiently. However, creating visually appealing and responsive user interfaces can be a challenging task. This is where React Native Base, a powerful UI component library, comes into play. In this article, we will explore the benefits and capabilities of React Native Base, and how it simplifies UI development in React Native projects.
Introduction
With NativeBase, developers can save time and effort by leveraging these ready-to-use components, eliminating the need to build UI elements from scratch. NativeBase provides theming and styling options, allowing developers to create consistent and visually appealing designs throughout their applications.
What is NativeBase?
NativeBase is a freely available UI library designed to simplify the process of creating user interfaces in React Native. It offers a range of UI components, including buttons, cards, input fields, and more, allowing developers to quickly implement common UI elements in their mobile apps. It can be likened to a CSS framework for React Native, providing pre-defined styles that can be easily applied to components.
Motivation
Developing an application using React Native from the ground up can be a laborious endeavor, involving various tasks such as implementing styling, handling interactions, managing state, ensuring responsiveness, and maintaining accessibility. React native base aim is to speed up the process of creating and releasing feature-rich, inclusive applications. The creation of this library drew inspiration from renowned design systems and UI frameworks like Material UI, Chakra UI, Ant Design, Braid Design System, Bootstrap, TailwindCSS, and Flutter.
Features
Enhanced Accessibility Features
Integrated seamlessly with React ARIA and React Native ARIA, React hooks are provided, enabling the swift development of accessible design systems.
Streamlined Support for Utility Props
Leveraging the capabilities of Styled System, NativeBase empowers developers to swiftly construct tailored UI components using constraint-based utility style props.
Extensive Component Library
NativeBase encompasses a comprehensive collection of approximately 40 components, including buttons, checkboxes, flex containers, stacks, and more, facilitating seamless development experiences.
Highly Customizable Themes
Customize your application's theme and component styles to your heart's desire, as NativeBase places great emphasis on the ability as a core aspect of its framework.
Versatility for Mobile and Web
By harnessing the power of React Native Web, NativeBase 3.0 facilitates the creation of consistent user interfaces across various platforms, including the Web, Android, and iOS.
Effortless Responsiveness
NativeBase 3.0 simplifies the process by allowing the addition of object and array values for implementing responsive styles.
Dark Mode Integration
NativeBase now offers optimized support for building applications with a dark mode feature, making the development of light and dark mode settings significantly more convenient.
Dependencies
You only need to have React Native and Expo to use react native base in your project.
Installing NativeBase
Run the below command in your project directory to install NativeBase.
For Yarn users:
For NPM users:
Basic NativeBase Components
Header
The Header component is used to create a header section at the top of the screen. It typically contains a title, navigation elements, or other relevant information.
Example:
Button
The Button component represents a clickable button element that triggers an action when pressed. It can be customized with various styles and can include text, icons, or both.
Example:
Card
The Card component provides a visually appealing container to display information or content. It is commonly used to present data in a structured manner, such as for product listings, user profiles, or articles. The Card component is a versatile component that allows developers to display content in a structured format. It can contain various elements such as text, images, buttons, etc., and can be customized with different styles.
Example:
List
The List component is used to display a list of items in a vertical or horizontal layout. It is often utilized for presenting data in a scrollable format, such as a list of contacts, messages, or menu options.
Example:
Form
The Form component in NativeBase is used to create input forms in React Native applications. It provides a set of components that are commonly used in forms, such as Input, Item, Label, and Button. These components allow developers to easily handle user input and implement form validation.
Inside the MyForm component, we use the useState hook to create a state variable email and a setter function setEmail to update the email value. This allows us to keep track of the user's input.
Within the return statement, we wrap the form components with the NativeBaseConfigProvider to ensure proper context for NativeBase components.
We use the Form component as the root element, and inside it, we have an Item component with the floatingLabel prop, which displays a floating label above the input field.
The Label component provides a label for the input field, and the Input component is where the user can enter their email address. We bind the value of the input field to the email state variable and update it using the onChangeText prop.
Examples
Let's create a react native TODO application to demonstrate the usage of NativeBase. Follow the below steps to create a todo list using react native base component.
-
Import the necessary components from the native-base library:
-
Define a functional component called App. Inside the component, set up the initial state using the useState hook:
-
Implement the addTask function to add a new task to the list. It checks if the input field is empty and if not, adds the task to the tasks state array:
-
Implement the deleteTask function to remove a task from the list based on its index:
-
Render the UI using the Box, Heading, VStack, FormControl, Input, Button, HStack, Text, IconButton, and CloseIcon components from native-base. Set up the structure and styling of the to-do list:
-
Export the functional component wrapped with the NativeBaseProvider to ensure the NativeBase theme is applied:
By following the above steps, we have created a to-do list application using React Native and NativeBase. The code sets up the necessary components, manages the state of tasks, allows users to add new tasks, and provides a delete functionality for each task.
Final Output
KitchenSink App
Kitchen Sink serves as an extensive demonstration application that showcases the practical implementation of various NativeBase components. This comprehensive app offers a wide range of features, including buttons, forms, icons, and more, allowing users to experience the functionality and versatility of NativeBase components firsthand.
Tech Stack
The technologies used to build react native base are JavaScript, React Native and Styled System.
Compatible Versions
NativeBase | React Native |
---|---|
v0.1.1 | v0.22 to v0.23 |
v0.2.0 to v0.3.1 | v0.24 to v0.25 |
v0.4.6 to v0.4.9 | v0.26.0 - v0.27.1 |
v0.5.0 to v0.5.15 | v0.26.0 - v0.37.0 |
v0.5.16 to v0.5.20 | v0.38.0 - v0.39.0 |
v2.0.0-alpha1 to v2.1.3 | v0.38.0 to v0.43.0 |
v2.1.4 to v2.1.5 | v0.44.0 to v0.45.0 |
v2.2.0 | v0.44.0 to v0.45.0 |
v2.2.1 | v0.46.0 and above |
v2.3.0 to 2.6.1 | v0.46.0 and above |
v2.7.0 | v0.56.0 and above |
v3.0.0-next.36 to v3.0.0-next-41 | v0.63.0 and above |
v3.0.0 to latest | v0.63.0 and above |
Community
The NativeBase project exists thanks to all the people who contributed. You can also contribute to NativeBase.
Conclusion
- React Native Base is a versatile and powerful library for building React Native applications.
- It offers compatibility with various versions of React Native, allowing developers to choose the version that suits their needs.
- The library provides a range of features and components that accelerate development and enhance UI design.
- React Native Base empowers developers to create cross-platform mobile applications efficiently.
- It simplifies the development process by providing a unified and consistent UI framework.
- The library's extensive documentation and community support make it an excellent choice for React Native developers.