6

A Food delivery with React Native

 1 year ago
source link: https://reactnativeexample.com/a-food-delivery-with-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
logo

Deliveroo Clone with REACT NATIVE!

Deliveroo Clone with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

🌟 About the Project

📷 Screenshots

React
React
React
React

🔴 Open the camera app on your device and scan the code below (live demo)

qr qr

👾 Tech Stack

ClientDatabase

🧰 Getting Started

‼️ Prerequisites

  • Sign up for a Sanity account HERE
  • Install Node JS in your computer HERE

⚙️ Installation

Install my-project with expo

Installing Expo CLI

npm install --global expo-cli

Initializing the project

npx create-expo-app deliveroo-clone

cd deliveroo-clone

Install dependencies

Setup Tailwind CSS

npm install tailwindcss-react-native
npm install --save-dev tailwindcss

Tailwindcss requires a tailwind.config.js file with the content section configured to include the paths to all of your components and any other source files that contain Tailwind class names.

// tailwind.config.js
module.exports = {
  content: [
    "./screens/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
};

Add TailwindProvider at the top level of your application. The TailwindProvider creates the context for reactive styles and the atomic style objects.

import { TailwindProvider } from "tailwindcss-react-native";

function MyAppsProviders({ children }) {
  return <TailwindProvider>{children}</TailwindProvider>;
}
Configure your babel.config.js
// babel.config.js
module.exports = {
  plugins: ["tailwindcss-react-native/babel"],
};

Install dependencies

🔶 Dependency Info

🏃 Run Locally

Clone the project

  git clone https://github.com/SashenJayathilaka/Deliveroo-Clone.git

change directory

  cd Deliveroo-Clone

Install dependencies

  npx expo install

Start the server

  npx expo start

Creating a Build

  • Optimize the assets for speed – npx expo-optimize (formerly expo optimize)
  • Bundle the project for production – npx expo export:web (expo build:web in the legacy Expo CLI).
  • Creates a production ready static bundle in the web-build/ directory. Don’t edit this folder directly.
  • If you make any changes to your project, you’ll need to re-build for production.
  • For more help use npx expo export:web --help
  • More Info

🚩 Deployment

To deploy this project run

Expo Publish

publish your project

expo publish

🤝 Contact

Sashen – @twitter_handle – [email protected]

Project Link: https://github.com/SashenJayathilaka/Deliveroo-Clone.git

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK