App Store Ui React Native

Preview Final Project

Home\Store Screen

What did we use in the project?

1- React Native Expo

2- NativeWind

3- React Navigation

4- npm react-native-heroicons

Steps

• npx create-expo-app App-Store-Ui
• npm i nativewind
• npm i --dev tailwindcss@3.3.2
• npx tailwindcss init
• npm install @react-navigation/native
• npx expo install react-native-screens react-native-safe-area-context
• npm install @react-navigation/native-stack
• npm i react-native-responsive-screen
• npm i expo-linear-gradient
• npm i react-native-heroicons
• npm i react-native-heroicons react-native-svg
• npm i react-native-star-rating-widget

// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  content: [
    "./App.{js,jsx,ts,tsx}", 
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],

3. Add the Babel plugin

Modify your babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};

Run The Project

• Download
• Open The Project
• Terminal
• npm i
• npx expo
• -w or Open Expo App On your Phone