Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
nativebase
react
react native
communitycreator

What is Nativebase?

Chibuike Nwachukwu

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

NativeBase is an open-source UI library that makes it easy to build universal design systems.

NativeBase was built for react native and is supported in Expo, Webwith the help of react-native-web, and React Native CLI initiated apps.

NativeBase has UI components like Button, Image, Alert, Progress, Spinner, Card, and more built into it. We only need to include the NativeBase library and use the component we need.

Installing NativeBase

We start by creating a new React native project using expo. Then, we move into the project directory and install nativebase.

npm install --global expo-cli
expo init educative
cd educative
npm install native-base styled-components styled-system

Basic NativeBase components

Button

Buttons are used to trigger actions on the screen, like submitting a form.

import { Button } from 'native-base'; 

For example:

import React from "react"
import { Button, Text, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Button>
       <Text>Educative</Text>
      </Button>
    </NativeBaseProvider>
  )
}

Output

Center

Center is used to place contents at the middle of the page.

import { Center } from 'native-base';

For example:

import React from "react"
import { Center, Text, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <Text> Educative in center </Text>
      </Center>
    </NativeBaseProvider>
  )
}

Output

Image

Image is used to add an image to an app.

import { Image } from "native-base"

For example:

import React from "react"
import { Image, NativeBaseProvider } from "native-base"


export default () => {
  return (
    <NativeBaseProvider>
      <Image
      source={{
        uri: "https://wallpaperaccess.com/full/31750.jpg",
      }}
      alt="Text"
      size={"xl"}
    />
    </NativeBaseProvider>
  )
}

Output

Alert

Alerts are used to show messages in the app.

import { Alert } from "native-base"

For example:

import React from "react"
import { Alert, Center, NativeBaseProvider } from "native-base"

export default () => {
  return (
    <NativeBaseProvider>
      <Alert>
      <Alert.Icon />
      <Alert.Title>Educative</Alert.Title>
      <Alert.Description>
        Learning alert in Nativebase.
      </Alert.Description>
    </Alert>
    </NativeBaseProvider>
  )
}

Output

Box

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

import { Box } from "native-base"

For example:

import React from "react"
import { Box, NativeBaseProvider } from "native-base"


export default () => {
  return (
    <NativeBaseProvider>
       <Box
      bg="secondary.800"
      p={6}
      _text={{
        fontSize: "md",
        fontWeight: "bold",
        color: "white",
      }}
    >
      Educative Box
    </Box>
    </NativeBaseProvider>
  )
}

Output

widget

Progress

Progress is used to display the progress status for a time-based task.

import { Progress } from "native-base"

For example:

import React from "react"
import { Box, Progress, Center, NativeBaseProvider } from "native-base"


export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <Box w="90%">
      <Progress value={45} mx={4} bg="primary.200" colorScheme="primary"/>
    </Box>
      </Center>
    </NativeBaseProvider>
  )
}


Output

Spinner

Spinner can be used to display a loading effect.

import { Spinner } from "native-base"

For example:

import React from "react"
import {
  Spinner,
  Center,
  NativeBaseProvider,
} from "native-base"


export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <Spinner />
      </Center>
    </NativeBaseProvider>
  )
}

Output

RELATED TAGS

javascript
nativebase
react
react native
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring