Version: 3.0.0-next.40

Box

This is a generic component for low level layout needs. It is similar to a div in HTML.

Example#

Basic#


Composition#


With Linear gradient#

If you're using Expo managed or bare workflow, you can install expo-linear-gradient and configure it in the NativeBaseProvider as shown below.


If you're not using Expo, you can install react-native-linear-gradient and configure in the NativeBaseProvider 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>
);
};

Basic (With Ref)#



Common use cases for Box component are:
  • Create responsive layouts with ease.
  • Provide a shorthand to pass styles via props (bg instead of backgroundColor).

Props#

Name Type Description Default
children any Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. -
shadow number Applies box shadow and accepts a number from 0 to 9 0
_text ITextProps For providing props to Text inside Box -
bg string | ILinearGradientProps - -
background string | ILinearGradientProps - -
bgColor string | ILinearGradientProps - -
backgroundColor string | ILinearGradientProps - -

Box implements View, ColorProps, LayoutProps, FlexProps, PositionProps, BorderProps, ExtraProps, OutlineProps, BackgroundProps, SafeAreaProps, TransformProps, PlatformProps