How to create a React Native app (5)?

How to setup app theme by native base?

Setup nativebase with Expo

  • Install package
yarn add native-base styled-components styled-system

expo install react-native-svg

expo install react-native-safe-area-context

npx pod-install

yarn android
  • Edit root component
import { NativeBaseProvider } from 'native-base'

export default function App() {
  return <>
    <NativeBaseProvider><Home /></NativeBaseProvider>
  </>
}

Usage

import React from 'react'
import { View, Pressable } from 'react-native'

import {
  Menu,
  Divider,
  HamburgerIcon,
  Center,
} from 'native-base'

export default function Home() {

  return (
    <View>
      {/** native base drop down menu */}
      <Center flex={1} px="3">
        <Menu
          trigger={(triggerProps) => {
            return (
              <Pressable {...triggerProps}>
                <HamburgerIcon />
              </Pressable>
            )
          }}
        >
          <Menu.Item>Aria</Menu.Item>
          <Menu.Item>Nunito Sans</Menu.Item>
          <Menu.Item isDisabled>Tahoma</Menu.Item>
          <Divider />
          <Menu.Item>Roboto</Menu.Item>
          <Menu.Item>Montserrat</Menu.Item>
        </Menu>
      </Center>
    </View>
  )
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*