How to setup app theme by native base?
Setup nativebase with Expo
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
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>
)
}
Leave a Reply