Box | NativeBase | Universal Components for React and React Native

Playground
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 bg="primary.400" p={4} _text={{
    fontSize: "md",
    fontWeight: "bold",
    color: "white"
  }}>
      This is a Box
    </Box>;
};

Playground
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>;
};
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>;
};

Playground
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>;
}
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>;
}

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>
  );
};

Playground
//@ts-nocheck
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>;
};
//@ts-nocheck
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>;
};