App drawer | NativeBase | Universal Components for React and React Native

Playground
function AppDrawer() {
  const icons = [{
    name: 'bolt',
    bg: 'amber.600'
  }, {
    name: 'build',
    bg: 'emerald.600'
  }, {
    name: 'cloud',
    bg: 'blue.600'
  }, {
    name: 'delivery-dining',
    bg: 'orange.600'
  }, {
    name: 'favorite',
    bg: 'rose.600'
  }, {
    name: 'music-note',
    bg: 'violet.600'
  }, {
    name: 'invert-colors-on',
    bg: 'lime.600'
  }, {
    name: 'navigation',
    bg: 'indigo.600'
  }, {
    name: 'settings',
    bg: 'pink.600'
  }, {
    name: 'sports-esports',
    bg: 'coolGray.600'
  }, {
    name: 'shield',
    bg: 'darkBlue.600'
  }, {
    name: 'photo-camera',
    bg: 'fuchsia.600'
  }, {
    name: 'network-wifi',
    bg: 'amber.500'
  }, {
    name: 'nightlight-round',
    bg: 'violet.800'
  }, {
    name: 'flight',
    bg: 'blue.800'
  }, {
    name: 'extension',
    bg: 'indigo.600'
  }, {
    name: 'duo',
    bg: 'orange.600'
  }, {
    name: 'album',
    bg: 'rose.600'
  }, {
    name: 'access-alarm',
    bg: 'emerald.600'
  }, {
    name: 'forum',
    bg: 'indigo.600'
  }];
  return <FlatList numColumns={4} m={'-8px'} data={icons} renderItem={({
    item
  }) => {
    return <IconButton m={'8px'} borderRadius="full" bg={item.bg} variant="solid" p="3" icon={<Icon color="white" name={item.name} as={MaterialIcons} size="sm" />} />;
  }} />;
}

function Example() {
  return <NativeBaseProvider>
      <Box alignItems="center" flex={1}>
        <AppDrawer />
      </Box>
    </NativeBaseProvider>;
}
function AppDrawer() {
  const icons = [{
    name: 'bolt',
    bg: 'amber.600'
  }, {
    name: 'build',
    bg: 'emerald.600'
  }, {
    name: 'cloud',
    bg: 'blue.600'
  }, {
    name: 'delivery-dining',
    bg: 'orange.600'
  }, {
    name: 'favorite',
    bg: 'rose.600'
  }, {
    name: 'music-note',
    bg: 'violet.600'
  }, {
    name: 'invert-colors-on',
    bg: 'lime.600'
  }, {
    name: 'navigation',
    bg: 'indigo.600'
  }, {
    name: 'settings',
    bg: 'pink.600'
  }, {
    name: 'sports-esports',
    bg: 'coolGray.600'
  }, {
    name: 'shield',
    bg: 'darkBlue.600'
  }, {
    name: 'photo-camera',
    bg: 'fuchsia.600'
  }, {
    name: 'network-wifi',
    bg: 'amber.500'
  }, {
    name: 'nightlight-round',
    bg: 'violet.800'
  }, {
    name: 'flight',
    bg: 'blue.800'
  }, {
    name: 'extension',
    bg: 'indigo.600'
  }, {
    name: 'duo',
    bg: 'orange.600'
  }, {
    name: 'album',
    bg: 'rose.600'
  }, {
    name: 'access-alarm',
    bg: 'emerald.600'
  }, {
    name: 'forum',
    bg: 'indigo.600'
  }];
  return <FlatList numColumns={4} m={'-8px'} data={icons} renderItem={({
    item
  }) => {
    return <IconButton m={'8px'} borderRadius="full" bg={item.bg} variant="solid" p="3" icon={<Icon color="white" name={item.name} as={MaterialIcons} size="sm" />} />;
  }} />;
}

function Example() {
  return <NativeBaseProvider>
      <Box alignItems="center" flex={1}>
        <AppDrawer />
      </Box>
    </NativeBaseProvider>;
}