SearchBar | NativeBase | Universal Components for React and React Native

Playground
function SearchBar() {
  return <VStack space={5} width="100%" divider={<Box px="2">
          <Divider />
        </Box>}>
      <VStack width="100%" space={5} alignItems="center">
        <Heading fontSize="lg">Cupertino</Heading>
        <Input placeholder="Search" variant="filled" width="100%" bg="gray.100" borderRadius="10" py="1" px="2" placeholderTextColor="gray.500" _hover={{
        bg: "gray.200",
        borderWidth: 0
      }} _web={{
        _focus: {
          style: {
            boxShadow: "none"
          }
        }
      }} InputLeftElement={<Icon ml="2" size="5" color="gray.500" as={<Ionicons name="ios-search" />} />} />
      </VStack>

      <VStack width="100%" space={5} alignItems="center">
        <Heading fontSize="lg">Material</Heading>
        <Input placeholder="Search People & Places" bg="#fff" width="100%" borderRadius="4" py="3" px="1" fontSize="14" _web={{
        _focus: {
          borderColor: "muted.300",
          style: {
            boxShadow: "none"
          }
        }
      }} InputLeftElement={<Icon m="2" ml="3" size="6" color="gray.400" as={<MaterialIcons name="search" />} />} InputRightElement={<Icon m="2" mr="3" size="6" color="gray.400" as={<MaterialIcons name="mic" />} />} />
      </VStack>
    </VStack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1} px="2">
        <SearchBar />
      </Center>
    </NativeBaseProvider>;
}
function SearchBar() {
  return <VStack space={5} width="100%" divider={<Box px="2">
          <Divider />
        </Box>}>
      <VStack width="100%" space={5} alignItems="center">
        <Heading fontSize="lg">Cupertino</Heading>
        <Input placeholder="Search" variant="filled" width="100%" bg="gray.100" borderRadius="10" py="1" px="2" placeholderTextColor="gray.500" _hover={{
        bg: "gray.200",
        borderWidth: 0
      }} _web={{
        _focus: {
          style: {
            boxShadow: "none"
          }
        }
      }} InputLeftElement={<Icon ml="2" size="5" color="gray.500" as={<Ionicons name="ios-search" />} />} />
      </VStack>

      <VStack width="100%" space={5} alignItems="center">
        <Heading fontSize="lg">Material</Heading>
        <Input placeholder="Search People & Places" bg="#fff" width="100%" borderRadius="4" py="3" px="1" fontSize="14" _web={{
        _focus: {
          borderColor: "muted.300",
          style: {
            boxShadow: "none"
          }
        }
      }} InputLeftElement={<Icon m="2" ml="3" size="6" color="gray.400" as={<MaterialIcons name="search" />} />} InputRightElement={<Icon m="2" mr="3" size="6" color="gray.400" as={<MaterialIcons name="mic" />} />} />
      </VStack>
    </VStack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1} px="2">
        <SearchBar />
      </Center>
    </NativeBaseProvider>;
}