https://github.com/programmershri/deliveroo-clone-react-native

This is a Popular Deliveroo App Clone (Made with react-native)
https://github.com/programmershri/deliveroo-clone-react-native

expo-cli react-native redux-toolkit sanitycms tailwindcss ui-design

Last synced: about 2 months ago
JSON representation

This is a Popular Deliveroo App Clone (Made with react-native)

• Host: GitHub
• URL: https://github.com/programmershri/deliveroo-clone-react-native
• Owner: ProgrammerShri
• Created: 2022-08-24T12:26:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-27T06:57:58.000Z (over 2 years ago)
• Last Synced: 2024-05-02T03:37:41.958Z (8 months ago)
• Topics: expo-cli, react-native, redux-toolkit, sanitycms, tailwindcss, ui-design
• Language: JavaScript
• Homepage:
• Size: 51.9 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Deliveroo Clone with REACT NATIVE!

#### PREREQUISITES:

- Install Node JS in your computer HERE



























This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

 Installing Expo CLI

```

npm install --global expo-cli

```

Initializing the project

```

npx create-expo-app deliveroo-clone 

cd deliveroo-clone

```

 Starting the development server

```

expo start

```

## 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 {children};

}

```

### Configure your babel.config.js

```

// babel.config.js

module.exports = {

  plugins: ["tailwindcss-react-native/babel"],

};

```

### 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

#### 🔴 Open the camera app on your device and scan the code below

![image](https://user-images.githubusercontent.com/64357112/187018774-a17f7c10-f89f-4048-8f03-08a8009d6bb9.png)






#### Expo Publish

publish your project

```

expo publish

```