With NativeBase components, you don’t have to create fundamental components such as buttons, containers, and lists from scratch. This enables you to work more efficiently on the business logic and not worry too much about the UI design of your React Native app.
React Native is a framework for building cross-platform, native apps using JavaScript and React. React Native uses JSX and a component-based UI system just like React, but instead of DOM components, React Native uses native components to create native UI elements. React Native has a very low-level API and atomic components that force you to rewrite many basic components repeatedly for each new project.
When it comes to developing the user interface, there is a lot of basic styling that is required for every component. Styling can be tedious, and you would love to avoid creating a new design system for every app you work on. Ideally, you would have a styling library that contains the basic styling for components.
That’s where NativeBase comes in. In this guide, we’ll show you how to use and customize NativeBase components in your React Native app.
What is NativeBase?
NativeBase is an open-source UI library that helps you get up and running with user interface components such as buttons, cards, input fields, and more.
Think of it as a CSS framework for building mobile apps with React Native. You can get suitable styles right out of the box. All you have to do is grab and call the component from the NativeBase library.
Installing NativeBase
Create a new React Native project using the react-native init command and then cd into the project directory.
react-native init NativeBaseIntroApp
cd NativeBaseIntroApp
Install NativeBase by running the following commands.
npm i native-base
react-native link
Basic NativeBase components
Header
The Header component renders the header for the app. It expects its children to be the Left, Body, and Right components.
The Left component wraps the components that need to be rendered on the left portion of the header. It might be a drawer navigation icon, for example. Similarly, the Right component is a wrapper for the components that need to be displayed on the right side of the header.
The Body component serves as a wrapper for components to render at the center of the Header. The Title and Subtitle components are usually wrapped by the Body component and are used to display the header title and subtitle, respectively.
import React, { Component } from "react";
import {
Container,
Header,
Left,
Body,
Right,
Title,
Subtitle,
} from "native-base";
export default class App extends Component {
render() {
return (
<Container>
<Header>
<Left />
<Body>
<Title>Header</Title>
<Subtitle>Example subtitle</Subtitle>
</Body>
<Right />
</Header>
</Container>
);
}
}
#react-native #nativebase #developer
