Version: 3.2.2


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




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 (
linearGradient: {
colors: ['lightBlue.300', 'violet.800'],
start: [0, 0],
end: [1, 0],
_text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }}
This is a Box with Linear Gradient
const config = {
dependencies: {
'linear-gradient': require('react-native-linear-gradient').default,
export default () => {
return (
<NativeBaseProvider config={config}>
<Example />

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).


Name Type Description Default
children any Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. -
_text ITextProps For providing props to Text inside Box -
bg ResponsiveValue<ColorProps | ILinearGradientProps> - -
background ResponsiveValue<ColorProps | ILinearGradientProps> - -
bgColor ResponsiveValue<ColorProps | ILinearGradientProps> - -
backgroundColor ResponsiveValue<ColorProps | ILinearGradientProps> - -

Box implements View, SafeAreaProps, PlatformProps, ColorProps, LayoutProps, BorderProps, TypographyProps, ShadowProps, PositionProps, FlexProps