Spinner | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <HStack space={2} alignItems="center">
      <Spinner accessibilityLabel="Loading posts" />
      <Heading color="primary.500" fontSize="md">
        Loading
      </Heading>
    </HStack>;
};
const Example = () => {
  return <HStack space={2} alignItems="center">
      <Spinner accessibilityLabel="Loading posts" />
      <Heading color="primary.500" fontSize="md">
        Loading
      </Heading>
    </HStack>;
};

Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading textAlign="center" mb="10">
        Color Scheme
      </Heading>
      <Spinner color="emerald.500" />
      <Spinner color="warning.500" />
      <Spinner color="indigo.500" />
      <Spinner color="cyan.500" />
    </VStack>;
};
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading textAlign="center" mb="10">
        Color Scheme
      </Heading>
      <Spinner color="emerald.500" />
      <Spinner color="warning.500" />
      <Spinner color="indigo.500" />
      <Spinner color="cyan.500" />
    </VStack>;
};

Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <Spinner size="sm" />
      <Spinner size="lg" />
    </VStack>;
};
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <Spinner size="sm" />
      <Spinner size="lg" />
    </VStack>;
};