How to create a React Native app (5)?

How to setup app theme by native base?

Setup nativebase with Expo

  • Install package
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
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
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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { NativeBaseProvider } from 'native-base'
export default function App() {
return <>
<NativeBaseProvider><Home /></NativeBaseProvider>
</>
}
import { NativeBaseProvider } from 'native-base' export default function App() { return <> <NativeBaseProvider><Home /></NativeBaseProvider> </> }
import { NativeBaseProvider } from 'native-base'

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

Usage

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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>
)
}
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> ) }
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.


*