Box | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Box
This is a generic component for low level layout needs. It is similar to a in HTML.
Example
Basic
Playground

Composition
Playground

With Linear gradient
If you're using managed or bare workflow, you can install and configure it in the as shown below.
Playground

If you're not using Expo, you can install and configure in the as shown below.
Copy
import React from 'react';
import { Box, NativeBaseProvider } from 'native-base';
const LinearGradient = require('expo-linear-gradient').LinearGradient;
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)
Playground


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).
Props
children
Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.
Type: any
shadow
Applies box shadow and accepts a number from 0 to 9
Type: number
Default: 0
_text
For providing props to Text inside Box
bg
Type: ResponsiveValue<|>
background
Type: ResponsiveValue<|>
bgColor
Type: ResponsiveValue<|>
backgroundColor
Type: ResponsiveValue<|>
Nativebase logo
MadeWithNativeBase