AppBar | NativeBase | Universal Components for React and React Native

Playground
function AppBar() {
  return <>
      <StatusBar backgroundColor="#3700B3" barStyle="light-content" />

      <Box safeAreaTop backgroundColor="#6200ee" />

      <HStack bg="#6200ee" px={1} py={3} justifyContent="space-between" alignItems="center">
        <HStack space={4} alignItems="center">
          <IconButton icon={<Icon size="sm" as={<MaterialIcons name="menu" />} color="white" />} />
          <Text color="white" fontSize={20} fontWeight="bold">
            Home
          </Text>
        </HStack>
        <HStack space={2}>
          <IconButton icon={<Icon as={<MaterialIcons name="favorite" />} size="sm" color="white" />} />
          <IconButton icon={<Icon as={<MaterialIcons name="search" />} color="white" size="sm" />} />
          <IconButton icon={<Icon as={<MaterialIcons name="more-vert" />} size="sm" color="white" />} />
        </HStack>
      </HStack>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <AppBar />
    </NativeBaseProvider>;
}
function AppBar() {
  return <>
      <StatusBar backgroundColor="#3700B3" barStyle="light-content" />

      <Box safeAreaTop backgroundColor="#6200ee" />

      <HStack bg="#6200ee" px={1} py={3} justifyContent="space-between" alignItems="center">
        <HStack space={4} alignItems="center">
          <IconButton icon={<Icon size="sm" as={<MaterialIcons name="menu" />} color="white" />} />
          <Text color="white" fontSize={20} fontWeight="bold">
            Home
          </Text>
        </HStack>
        <HStack space={2}>
          <IconButton icon={<Icon as={<MaterialIcons name="favorite" />} size="sm" color="white" />} />
          <IconButton icon={<Icon as={<MaterialIcons name="search" />} color="white" size="sm" />} />
          <IconButton icon={<Icon as={<MaterialIcons name="more-vert" />} size="sm" color="white" />} />
        </HStack>
      </HStack>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <AppBar />
    </NativeBaseProvider>;
}