This is a generic component for low level layout needs. It is similar to a
in HTML.
const Example = () => {
return <Box bg="primary.400" p={4} _text={{
fontSize: "md",
fontWeight: "bold",
color: "white"
}}>
This is a Box
</Box>;
};
const Example = () => {
return <Box width={72} shadow={1} _light={{
backgroundColor: "gray.50"
}} _dark={{
backgroundColor: "gray.700"
}}>
<Box>
<AspectRatio ratio={16 / 9}>
<Image roundedTop="lg" source={{
uri: "https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg"
}} alt="image" />
</AspectRatio>
<Center bg="red.500" _text={{
color: "white",
fontWeight: "700",
fontSize: "xs"
}} position="absolute" bottom={0} px={2} py={1}>
PHOTOS
</Center>
<Center p={1} rounded="full" bg="red.500" boxSize={10} position="absolute" right={0} m={2} _text={{
color: "white",
textAlign: "center",
fontWeight: "700",
fontSize: "xs"
}}>
27 MAR
</Center>
</Box>
<Stack p={4} space={2}>
<Stack space={2}>
<Heading size="md" ml={-1}>
The Garden City
</Heading>
<Heading size="xs" _light={{
color: "red.500"
}} _dark={{
color: "red.300"
}} fontWeight="500" ml={-0.5} mt={-1}>
The Silicon Valley of India.
</Heading>
</Stack>
<Text lineHeight={6} fontWeight={400}>
Bengaluru (also called Bangalore) is the center of India's high-tech
industry. The city is also known for its parks and nightlife.
</Text>
<HStack alignItems="center" space={4} justifyContent="space-between">
<HStack alignItems="center">
<Icon as={<MaterialIcons name="access-time" />} color="gray.500" size="sm" />
<Text ml={1} color="gray.500" fontWeight="500">
6 mins ago
</Text>
</HStack>
<HStack alignItems="center">
<Icon as={<Ionicons name="ios-chatbubbles" />} color="gray.500" size="sm" />
<Text ml={1} color="gray.500" fontWeight="500">
39 comments
</Text>
</HStack>
</HStack>
</Stack>
</Box>;
};
If you're using
managed or bare workflow, you can install
and configure it in the
as shown below.
const App = () => {
return <Box bg={{
linearGradient: {
colors: ['lightBlue.300', 'violet.800'],
start: [0, 0],
end: [1, 0]
}
}} p={12} rounded="lg" _text={{
fontSize: 'md',
fontWeight: 'bold',
color: 'white'
}}>
This is a Box with Linear Gradient
</Box>;
};
const config = {
dependencies: {
'linear-gradient': LinearGradient
}
};
function Example() {
return <NativeBaseProvider config={config}>
<Center flex={1}>
<App />
</Center>
</NativeBaseProvider>;
}
If you're not using Expo, you can install
and configure in the
as shown below.
import React from 'react';
import { Box, NativeBaseProvider } from 'native-base';
const Example = () => {
return (
<Box
bg={{
linearGradient: {
colors: ['lightBlue.300', 'violet.800'],
start: [0, 0],
end: [1, 0],
},
}}
p={12}
rounded="lg"
_text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }}
>
This is a Box with Linear Gradient
</Box>
);
};
const config = {
dependencies: {
'linear-gradient': require('react-native-linear-gradient').default,
},
};
export default () => {
return (
<NativeBaseProvider config={config}>
<Example />
</NativeBaseProvider>
);
};
const Example = () => {
const myRef = React.useRef({});
React.useEffect(() => {
myRef.current.setNativeProps({
borderWidth: 10,
opacity: 0.5,
borderRadius: 10
});
}, [myRef]);
return <Box width="90%" bg="primary.400" p={4} shadow={2} _text={{
fontSize: "md",
fontWeight: "bold",
color: "white"
}} ref={myRef}>
This is a Box
</Box>;
};
Tip: Common use cases for Box component are:
Create responsive layouts with ease.
Provide a shorthand to pass styles via props (bg instead of backgroundColor).Box implements
,
,
,
,
,
,
,
,
,
,
,
Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.
Applies box shadow and accepts a number from 0 to 9
For providing props to Text inside Box