PizzaAnimatedRN

Animated pizza builder app made with React Native, TypeScript and Zustand. Create, customize and animate your pizza with drag & drop ingredients and smooth transitions.

Setup Environment

Project created with React Native CLI. See official docs to set up the environment.

Run

Install dependencies

npm i

Install IOS Pods Navigate to the ios folder:

cd ios

Install Bundler and iOS dependencies:

bundle exec pod install

Run project

npm start

Run IOS

npm run ios

Run Android

npm run android

🛠 Tech and Libraries

• React Native - Mobile app framework
• TypeScript - Strongly typed JS
• React Navigation - Routing and navigation
• Zustand - State management
• Animated API - Animations

Link-video-demo-app

Project Architecture

.
├── App.tsx
├── Gemfile
├── Gemfile.lock
├── README.md
├── app.json
├── babel.config.js
├── gesture-handler.js
├── gesture-handler.native.js
├── index.js
├── jest.config.js
├── metro.config.js
├── package.json
├── tsconfig.json
├── src
│   ├── index.ts
│   ├── assets
│   │   ├── box_front.png
│   │   ├── box_inside.png
│   │   ├── chili_unit.png
│   │   ├── chili.png
│   │   ├── dish.png
│   │   ├── mushroom_unit.png
│   │   ├── mushroom.png
│   │   ├── olive_unit.png
│   │   ├── olive.png
│   │   ├── onion.png
│   │   ├── pea_unit.png
│   │   ├── pea.png
│   │   ├── pickle_unit.png
│   │   ├── pickle.png
│   │   ├── pizza-0.png
│   │   ├── pizza-1.png
│   │   ├── pizza-10.png
│   │   ├── pizza-2.png
│   │   ├── pizza-3.png
│   │   ├── pizza-4.png
│   │   ├── pizza-5.png
│   │   ├── pizza-6.png
│   │   ├── pizza-8.png
│   │   ├── pizza-9.png
│   │   ├── potato_unit.png
│   │   ├── potato.png
│   │   └── ...
│   ├── components
│   │   ├── BenchOfPizza.tsx
│   │   ├── BtnLinearGradient.tsx
│   │   ├── DragDropIngredients.tsx
│   │   ├── FlatListPizzas.tsx
│   │   ├── Header.tsx
│   │   ├── IngredientCard.tsx
│   │   ├── PizzaCard.tsx
│   │   ├── StandardWrapper.tsx
│   │   └── index.ts
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useBenchOfPizza.ts
│   │   ├── useBenchOfPizzaAnimation.ts
│   ├── screen
│   │   ├── index.ts
│   │   ├── NavigationRoot.tsx
│   │   ├── PizzaDetails.tsx
│   │   ├── PizzaList.tsx
│   ├── store
│   │   ├── globalStore.ts
│   │   └── index.ts
│   ├── types
│   │   ├── extraIngredient.ts
│   │   ├── globalStore.ts
│   │   ├── index.ts
│   │   ├── navigation.ts
│   │   └── pizzas.ts
│   ├── utils
│   │   ├── colors.ts
│   │   ├── extraIngredients.ts
│   │   ├── getPizzaById.ts
│   │   ├── getPriceEnUsd.ts
│   │   ├── index.ts
│   │   ├── phoneDimensions.ts
│   │   ├── pizzas.ts
│   │   └── pizzaSize.ts
└── ...

Solution to problem when running vector-icons script on iOS

node --experimental-require-module ./node_modules/@react-native-vector-icons/common/lib/commonjs/scripts/updatePlist.js package.json ios/rnPizzaAnimated/Info.plist