What are the basic components of NativeBase?

NativeBase comes in handy when looking for an open-source UI library for your React Native apps. It has a good number of basic components that make developing React Native apps easier and faster.

These components can be categorized into various segmentslike Layout components, Form components, Feedback components, Display components, etc.. We will be looking at some of them in this shot.

Components

Box

Box, similar to the HTML div, is used for low-level layout needs.

Importing Box into a component

import { Box } from 'native-base';

Usage

<Box
  bg="primary.100"
  p={2}
  _text={{
  fontSize: "md",
  fontWeight: "bold",
  color: "white",
  }}
>
 Educative is great
</Box>

Button

Button is used to trigger actions on the screen, like navigating to a new page.

Importing Button into a component

import { Button } from 'native-base';

Usage

<Button
   onPress={() =>
   console.log("You pressed me")}
>
 Bottom
</Button>

Input

Input is a text field used for getting user input. It is mostly used in forms to get user input that can later be sent to a server.

Importing Input into a component

import { Input } from 'native-base';

Usage

<Input
      w="100%"
      placeholder="Enter your name"
      mx={1}
      _light={{
        placeholderTextColor: "red.400",
      }}
      _dark={{
        placeholderTextColor: "red.50",
      }}
    />

Alert

Alerts are used to show customized messages in the app.

Importing Alert into a component

import { Alert } from 'native-base';

Usage

<Alert status="warning" w="100%">
      <Alert.Icon />
      <Alert.Title>
       {`Educative rocks`}
      </Alert.Title>
</Alert>

Select

Select is also used for collecting user input. However, it appears in a dropdown form.

Importing Select into a component

import { Select } from 'native-base';

Usage

<Select
        minWidth={200}
        accessibilityLabel="Select your favorite comic"
        placeholder="Select your favorite comic"
        onValueChange={(itemValue) => setLanguage(itemValue)}
        _selectedItem={{
          bg: "cyan.600"
        }}
      >
        <Select.Item label="JavaScript" value="js" />
        <Select.Item label="Dc Comics" value="dc" />
        <Select.Item label="Marvel" value="mv" />
      </Select>

Spinner

Spinner can be used to display a loading effect.

Importing Spinner into a component

import { Spinner } from 'native-base';

Usage

<Spinner accessibilityLabel="Loading posts" />

Toast

Toast can be used to show alerts on top of an overlay. It is usually used to give feedback to a user after an action has taken place. Its default timeout is 5 seconds.

Like other components, it can be customized. Its location on the screen is flexible.

Importing Toast into a component

import { useToast } from 'native-base';

Usage

<Button
   onPress={() =>
   toast.show({
   title: "Welcome Back, John Doe!",
  })
 }
>
 Bottom
</Button>

Modal

Modal shows content in a window overlay. Any content behind a modal can’t be accessed by the user until the modal is closed.

Importing Modal into a component

import { Modal } from 'native-base';

Usage

<Modal>
     <Modal.Content>
      <Modal.CloseButton />
      <Modal.Header>Educative</Modal.Header>
       <Modal.Body>
         Learn with us, and take your career to another level.
        </Modal.Body>
        <Modal.Footer>
         <Button.Group>
          <Button>
           Start Now
          </Button>
          <Button>
           Close
          </Button>
         </Button.Group>
        </Modal.Footer>
       </Modal.Content>
     </Modal>

Tooltip

Tooltip is an informative message that appears when a user interacts with an element. This interaction can be initiated through either a keyboard-hover or a mouse-hover gesture.

Importing Tooltip into a component

import { Tooltip } from 'native-base';

Usage

 <Tooltip label="Hey, Welcome to Educative!" openDelay={300}>
      <Button>Show</Button>
</Tooltip>

ActionSheet

Action Sheet is used to display a set of options in a dialog. It appears over the app’s content.

Importing ActionSheet into a component

import { Actionsheet } from 'native-base';

Usage

 <Actionsheet>
   <Actionsheet.Content>
     <Actionsheet.Item>
       More
     </Actionsheet.Item>
     <Actionsheet.Item>
       Accept
     </Actionsheet.Item>
     <Actionsheet.Item>
       Reject 
     </Actionsheet.Item>
   </Actionsheet.Content>
 </Actionsheet>