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
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
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
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> ) }
Leave a Reply