Progress | NativeBase | Universal Components for React and React Native

Show Code
Playground
 {\n return \n \n ;\n};\n\n export default () => {\n return (\n \n \n \n \n \n );\n };\n "}}&dependencies=react-is,expo-font,native-base@3_4_19,styled-system,expo-constants,react-native-web,react-native-safe-area-context,react-native-svg,styled-components,@expo/vector-icons,expo-linear-gradient,formik,yup,@react-navigation/drawer,@react-navigation/native,react-native-vector-icons,react-native-gesture-handler,react-native-linear-gradient,@react-native-community/masked-view,react-native-screens,react-native-reanimated" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-18u37iz r-16l9doz r-iyfy8q">
const Example = () => {
 return <Box w="100%">
 <Progress w="300" shadow={2} value={45} mx="4" />
 </Box>;
};

Copy
import { Progress } from 'native-base';

Playground
const Example = () => {
 return <Center w="100%">
 <Box w="90%" maxW="400">
 <Progress value={45} mx="4" />
 </Box>
 </Center>;
};

Playground
const Example = () => {
 return <Center w="100%">
 <Box w="90%" maxW="400">
 <VStack space="md">
 <VStack mx="4" space="md">
 <Progress colorScheme="primary" value={35} />
 <Progress colorScheme="secondary" value={45} />
 <Progress colorScheme="emerald" value={55} />
 <Progress colorScheme="warning" value={65} />
 <Progress colorScheme="light" value={75} />
 </VStack>
 </VStack>
 </Box>
 </Center>;
};

Playground
const Example = () => {
 return <Center w="100%">
 <Box w="90%" maxW="400">
 <VStack space="md">
 <VStack mx="4" space="md">
 <Progress size="xs" mb={4} value={25} />
 <Progress size="sm" mb={4} value={35} />
 <Progress size="md" mb={4} value={45} />
 <Progress size="lg" mb={4} value={55} />
 <Progress size="xl" mb={4} value={65} />
 <Progress size="2xl" mb={4} value={75} />
 </VStack>
 </VStack>
 </Box>
 </Center>;
};

Playground
const Example = () => {
 return <Center w="100%">
 <Box w="90%" maxW="400">
 <Progress rounded="0" value={65} mx="4" />
 </Box>
 </Center>;
};

Playground
const Example = () => {
 return <Center w="100%">
 <Box w="90%" maxW="400">
 <Progress bg="coolGray.100" _filledTrack={{
 bg: "lime.500"
 }} value={75} mx="4" />
 </Box>
 </Center>;
};