Box | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Box
This is a generic component for low level layout needs. It is similar to a in HTML.
Show Code
Playground
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 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': require('react-native-linear-gradient').default,
},
};
export default () => {
return (
<NativeBaseProvider config={config}>
<App />
</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
_text
For providing props to Text inside Box
Type: Partial<InterfaceTextProps>
bg
Type: ResponsiveValue<|>
background
Type: ResponsiveValue<|>
bgColor
Type: ResponsiveValue<|>
backgroundColor
Type: ResponsiveValue<|>
Nativebase logo
MadeWithNativeBase