Chapter 28: Selecting Native UI Components Using NativeBase

Right out of the box, React Native gives us most of the tools we need to build a fully functional native application that runs on both Android and iOS. However, taking your application to the next level and delivering a consistent and polished user experience (UX) across both platforms requires help. NativeBase can provide us with additional tools that can facilitate quality user interface (UI) designs for React Native apps. It is possible to build a quality native UI without a tool such as NativeBase, but this would require a lot more coding on our part. If you want to deliver applications that address specific challenges faced by your users rather than maintaining your own UI library, NativeBase might be what you're looking for.

We'll cover the following topics in this chapter:

• Application containers
• Headers, footers, and navigation
• Using layout components
• Collecting input using form components...

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-4th-Edition/tree/main/Chapter28.

Application containers

Before we can pull out the NativeBase UI components and render them on our application screens, there are a couple of initialization tasks we have to perform. NativeBase requires you to load font files in order to work. Additionally, we want to set up the same general screen structure for every screen using top-level NativeBase components. To accomplish both of these goals, we can implement a Container component, which can then be used by our screens. We'll start by importing everything that we need:

import React from "react";
import { StatusBar } from "react-native";
import { NativeBaseProvider, Box, Text, HStack } from
  "native-base";
import AppLoading from "expo-app-loading";
import {
  useFonts,
  Roboto_500Medium,
  Roboto_400Regular,
} from "@expo-google-fonts/roboto";
import { Ionicons } from "@expo/vector-icons";
import { theme } from "./theme...

Headers and footers

To implement navigation in our app, we can use the react-navigation package that we learned about in Chapter 18, Navigating between Screens. But, in this example, we will implement the layout of tab navigation without navigation features.

Here's what our App component looks like:

import React from "react";
import { Text } from "native-base";
import Container from "./Container";
export default function App() {
  return (
    <Container title="Home">
      <Text>Home content goes here...</Text>
    </Container>
  );
}

We're passing to the Container component the title that allows us to update the Header title. Let's take a look at the updated Container component:

<NativeBaseProvider theme={theme}>
  <StatusBar bg="#3700B3" barStyle="light-content"...

Using layout components

NativeBase provides layout components that simplify the layout code for your screens. You can use these components to build your own grid layouts for the UI components on your screens. Let's take a look at an example. Here are the App components:

import React from "react";
import { HStack } from "native-base";
import Container from "./Container";
import { CardItem } from "./CardItem";
export default function App() {
  return (
    <Container title="Using Layout Components">
      <HStack space={3} justifyContent="center"
        alignItems="center" mt={2}>
        <CardItem>Card 1</CardItem>
        <CardItem>Card 2</CardItem>
      </HStack...

Collecting input using form components

NativeBase has form components for every type of input imaginable, including the common inputs that you're most likely to use. Form input controls are notoriously difficult for native application developers to use because, even with cross-platform tools such as React Native, the native input controls on the two platforms are so different that you have to write different code for different platforms. With the NativeBase input components, you can usually write your code once. Let's take a look at an example. Here's everything that you need to import:

import React, { useState } from "react";
import {
  Input,
  Stack,
  FormControl,
  Select,
  Checkbox,
  Radio,
} from "native-base";
import Container from "./Container";

Next, let's look at the state that's used by the various input components to store values collected from the...

Summary

Although we barely scratched the surface of the components available in NativeBase, you now have a sense of what's possible with this library and how it greatly reduces the amount of cross-platform code we need to write. We started by looking at application container components that take care of loading NativeBase fonts and establishing the overall structure for every screen in the app. We then learned about adding navigation and navigation links to our NativeBase app. Then, we organized form components on the screen using NativeBase.

In the next chapter, we'll look at scaling application states in React applications.

Further reading

You can find more information on NativeBase at https://nativebase.io/.