DEV Community

Cover image for Clone Experiment: Food Ordering web & mobile app using a single codebase
NativeBase
NativeBase

Posted on • Updated on • Originally published at nativebase.io

Clone Experiment: Food Ordering web & mobile app using a single codebase

This experiment is a part of our NativeBase Clone Experiment Series. We have taken inspiration from famous food ordering apps to build our own using NativeBase React & React Native. The goal is to write the demo once and it will run anywhere with the behaviour of React Native.

Sneak peek

The final result of the experiment looked like this. Live demo.

Image description

Source code

The source code is available in this Github project.

Project setup

We have created a new project using Next.js CLI with NativeBase template by a simple command.

yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript
Enter fullscreen mode Exit fullscreen mode

The difficult parts

Let's dive into the code of the below banner and understand how easy it is to build with NativeBase.

Image description

import React from "react";
import {
  Center,
  Image,
  HStack,
  Text,
  Heading,
  VStack,
  Icon,
  Divider,
  Input,
  Pressable,
} from "native-base";
import { AntDesign, Entypo, FontAwesome } from "@expo/vector-icons";

function Banner() {
  return (
    <VStack w="100%" h={500}>
      <Image
        position="absolute"
        zIndex="-1"
        source={{
          uri: "https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png",
        }}
        alt="Alternate Text"
        w="100%"
        h={500}
      />
      <HStack
        alignItems="center"
        justifyContent="space-between"
        mx={{ base: 10, md: 20, lg: 40 }}
        py={4}
      >
        <Pressable flexDir="row" alignItems="center">
          <Icon as={FontAwesome} name="mobile" size="xs" color="white" />
          <Text color="white" fontWeight="medium" fontSize="md">
            Get the App
          </Text>
        </Pressable>

        <HStack space={{ base: "5", sm: "10" }} alignItems="center">
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Add restaurant
            </Text>
          </Pressable>
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Log in
            </Text>
          </Pressable>
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Sign up
            </Text>
          </Pressable>
        </HStack>
      </HStack>
      <Center mt={20} w="100%">
        <Image
          width={80}
          height={16}
          src={"/images/tomatoWhite.png"}
          alt="Alternate Text"
        />

        <Heading
          textAlign="center"
          w={{ base: "90%", md: "60%", lg: "48%" }}
          color="white"
          fontSize={{ base: "3xl", md: "3xl", lg: "3xl", xl: "4xl" }}
          fontWeight="normal"
          lineHeight="xs"
          mt={10}
          mx={{ base: 10 }}
        >
          Discover the best food &amp; drinks in Delhi NCR
        </Heading>

        <HStack
          bg="white"
          space="3"
          alignItems="center"
          w={{ base: "90%", md: "60%", lg: "48%" }}
          py={2}
          mt={12}
          borderRadius="lg"
        >
          <Pressable flexDir="row" alignItems="center">
            <Icon
              ml="2"
              as={Entypo}
              name="location-pin"
              size="6"
              color="red.400"
            />
            <Text color="coolGray.500" fontSize="md" mx="1">
              Bangla Sahib Gurdwara |
            </Text>
            <Icon
              as={AntDesign}
              name="caretdown"
              size="3"
              color="coolGray.600"
            />
            <Divider h={5} w={0.5} ml={2} orientation="vertical" />
          </Pressable>
          <HStack space="3" alignItems="center" flex={1}>
            <Icon
              ml={3}
              as={AntDesign}
              name="search1"
              size="5"
              color="coolGray.500"
            />
            <Input
              _hover={{ bg: "white" }}
              _focus={{ bg: "white" }}
              color="coolGray.500"
              fontSize="md"
              flex={1}
              borderWidth={0}
              outline="undefined"
            />
          </HStack>
        </HStack>
      </Center>
    </VStack>
  );
}

export default Banner;
Enter fullscreen mode Exit fullscreen mode

Most of the components in NativeBase are self-explanatory.

Conclusion

Building this app with NativeBase was super easy and fun. Lines of code get reduced significantly with NativeBase. We discovered that by creating with NativeBase, we have access to all of the components that we can utilize directly. All of this was done while also being able to alter them in inconceivable ways for creating complex designs. By default support of Next.js, it lets you use its powerful features of it.

Top comments (0)