├── .gitignore
├── App.js
├── README.md
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    ├── images
    │   ├── altosAdventure.png
    │   ├── angryBirds.png
    │   ├── clashofclans.png
    │   ├── emptyStar.png
    │   ├── frag.png
    │   ├── freeFire.png
    │   ├── fullStar.png
    │   ├── shadowFight.png
    │   ├── subway.png
    │   ├── valorArena.png
    │   ├── zooba.png
    │   └── zoobaGame.png
    └── splash.png
├── babel.config.js
├── components
    ├── gameCard.js
    └── gradientButton.js
├── navigation
    └── appNavigation.js
├── package-lock.json
├── package.json
├── screens
    ├── HomeScreen.js
    └── StoreScreen.js
├── tailwind.config.js
└── theme
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 
16 | # Temporary files created by Metro to check the health of the file watcher
17 | .metro-health-check*
18 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'expo-status-bar';
 2 | import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 3 | import AppNavigation from './navigation/appNavigation';
 4 | 
 5 | // import { NavigationContainer } from '@react-navigation/native';
 6 | // import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 7 | // import HomeScreen from './screens/HomeScreen';
 8 | // import GameStore from './screens/gameStore';
 9 | 
10 | // const Tab = createBottomTabNavigator();
11 | 
12 | 
13 | export default function App() {
14 |   return (
15 |     <AppNavigation />
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # App-Store-React-Native-App
 2 | 
 3 | ![Image](https://cdn.dribbble.com/userupload/5614167/file/original-ffb1248e901ee525e6bb208d172a967b.png?compress=1&resize=2048x1536)
 4 | 
 5 | <p align="left">
 6 |     <a href="https://www.youtube.com/channel/UCILovaLl2fUPAww1bGJ4sJQ?sub_confirmation=1"><img alt="Youtube" title="Youtube"  src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a>
 7 |     <p>
 8 |       Watch Tutorial on YouTube <a href="https://youtu.be/Wp6JtHj4lyM" target="_blank">App Store UI in React Native</a>
 9 |     </p>
10 |     
11 |   </p>
12 |   
13 | 
14 | ## Get Started
15 | 
16 | install dev dependencies
17 | 
18 | ### `npm install` or `yarn install`
19 | 
20 | ## Then
21 | 
22 | Run The app
23 | 
24 | ### `npm start` or `yarn start`
25 | 
26 | Runs your app in development mode.
27 | 
28 | Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
29 | 
30 | #### `npm run ios` or `yarn run ios`
31 | 
32 | Like `npm start` / `yarn start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.
33 | 
34 | #### `npm run android` or `yarn run android`
35 | 
36 | Like `npm start` / `yarn start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup).
37 | 
38 | <br />
39 | 
40 | 💙 If you like this project, give it a ⭐ and share it with friends!
41 | 
42 | <p align="left">
43 |   <a href="https://www.youtube.com/channel/UCILovaLl2fUPAww1bGJ4sJQ?sub_confirmation=1"><img alt="Youtube" title="Youtube" src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a>
44 |   <a href="https://twitter.com/code_with_nomi"><img alt="Twitter" title="Twitter" src="https://img.shields.io/badge/-Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white"/></a>
45 | </p>
46 | 
47 | <a href="https://www.buymeacoffee.com/syednoman">☕ Buy me a coffee</a>
48 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "app-ui",
 4 |     "slug": "app-ui",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "assetBundlePatterns": [
15 |       "**/*"
16 |     ],
17 |     "ios": {
18 |       "supportsTablet": true
19 |     },
20 |     "android": {
21 |       "adaptiveIcon": {
22 |         "foregroundImage": "./assets/adaptive-icon.png",
23 |         "backgroundColor": "#ffffff"
24 |       }
25 |     },
26 |     "web": {
27 |       "favicon": "./assets/favicon.png"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/icon.png


--------------------------------------------------------------------------------
/assets/images/altosAdventure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/altosAdventure.png


--------------------------------------------------------------------------------
/assets/images/angryBirds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/angryBirds.png


--------------------------------------------------------------------------------
/assets/images/clashofclans.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/clashofclans.png


--------------------------------------------------------------------------------
/assets/images/emptyStar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/emptyStar.png


--------------------------------------------------------------------------------
/assets/images/frag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/frag.png


--------------------------------------------------------------------------------
/assets/images/freeFire.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/freeFire.png


--------------------------------------------------------------------------------
/assets/images/fullStar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/fullStar.png


--------------------------------------------------------------------------------
/assets/images/shadowFight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/shadowFight.png


--------------------------------------------------------------------------------
/assets/images/subway.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/subway.png


--------------------------------------------------------------------------------
/assets/images/valorArena.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/valorArena.png


--------------------------------------------------------------------------------
/assets/images/zooba.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/zooba.png


--------------------------------------------------------------------------------
/assets/images/zoobaGame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/images/zoobaGame.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syednomishah/App-Store-React-Native-App/548ef7ecc31693d2fdb9662723638469a8cd0e02/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |     plugins: ["nativewind/babel"],
6 |   };
7 | };
8 | 


--------------------------------------------------------------------------------
/components/gameCard.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, Image, TouchableOpacity } from 'react-native'
 2 | import React, { useState } from 'react'
 3 | import { LinearGradient } from 'expo-linear-gradient'
 4 | import { ArrowDownTrayIcon, HeartIcon } from 'react-native-heroicons/solid'
 5 | import { storeColors } from '../theme';
 6 | import StarRating from 'react-native-star-rating';
 7 | 
 8 | export default function GameCard({game}) {
 9 |     const [isFavourite, setFavourite] = useState(false);
10 |   return (
11 |     <View className="mr-4 relative">
12 |       <Image source={game.image} className="w-80 h-60 rounded-3xl"/>
13 |       <LinearGradient colors={['transparent', 'rgba(0, 0, 0, 0.6)']} 
14 |         className="absolute p-4 h-full w-full flex justify-between rounded-3xl">
15 |         <View className="flex-row justify-end">
16 |             <TouchableOpacity
17 |                 onPress={()=> setFavourite(!isFavourite)}
18 |                 className="p-3 rounded-full"
19 |                 style={{backgroundColor: 'rgba(255,255,255,0.3)'}}
20 |             >
21 |                 <HeartIcon size="25" color={isFavourite? storeColors.redHeart: 'white'} />
22 |             </TouchableOpacity>
23 |         </View>
24 |         <View className="space-y-1">
25 |             <StarRating
26 |                 disabled={true}
27 |                 starSize={15}
28 |                 containerStyle={{width: 90}}
29 |                 maxStars={5}
30 |                 rating={game.stars}
31 |                 emptyStar={require('../assets/images/emptyStar.png')}
32 |                 fullStar={require('../assets/images/fullStar.png')}
33 |             />
34 |             <Text className="text-xl font-bold text-gray-300">
35 |                 {game.title}
36 |             </Text>
37 |             <View className="flex-row items-center space-x-2">
38 |                 <ArrowDownTrayIcon size="18" color="lightgray" />
39 |                 <Text className="text-sm text-gray-300 font-semibold">
40 |                     {game.downloads} Downloads
41 |                 </Text>
42 |             </View>
43 |         </View>
44 |       </LinearGradient>
45 |     </View>
46 |   )
47 | }


--------------------------------------------------------------------------------
/components/gradientButton.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, TouchableOpacity } from 'react-native'
 2 | import React from 'react'
 3 | import { LinearGradient } from 'expo-linear-gradient'
 4 | 
 5 | export default function GradientButton(props) {
 6 |   return (
 7 |     <LinearGradient
 8 |         colors={['rgba(9, 181, 211, 0.9)', 'rgba(58, 131, 244,0.9)']}
 9 |         end={{x:1, y:1}}
10 |         start={{x: 0.1, y: 0.2}}
11 |         className={`rounded-full ${props.containerClass}`}
12 |     >
13 |         <TouchableOpacity className={`p-3 px-4 ${props.buttonClass}`}>
14 |             <Text className="text-white font-bold">
15 |                 {props.value}
16 |             </Text>
17 |         </TouchableOpacity>
18 | 
19 |     </LinearGradient>
20 |   )
21 | }


--------------------------------------------------------------------------------
/navigation/appNavigation.js:
--------------------------------------------------------------------------------
 1 | import { View, Text } from 'react-native'
 2 | import React from 'react'
 3 | import { NavigationContainer } from '@react-navigation/native';
 4 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
 5 | import HomeScreen from '../screens/HomeScreen';
 6 | import StoreScreen from '../screens/StoreScreen';
 7 | const Stack = createNativeStackNavigator();
 8 | 
 9 | 
10 | export default function AppNavigation() {
11 |   return (
12 |     <NavigationContainer>
13 |       <Stack.Navigator initialRouteName='Store'>
14 |         <Stack.Screen name="Home" options={{headerShown: false}} component={HomeScreen} />
15 |         <Stack.Screen name="Store" options={{headerShown: false}} component={StoreScreen} />
16 |       </Stack.Navigator>
17 |     </NavigationContainer>
18 |   )
19 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app-ui",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web"
10 |   },
11 |   "dependencies": {
12 |     "@react-navigation/bottom-tabs": "^6.5.7",
13 |     "@react-navigation/native": "^6.1.6",
14 |     "@react-navigation/native-stack": "^6.9.12",
15 |     "expo": "~48.0.6",
16 |     "expo-linear-gradient": "^12.1.2",
17 |     "expo-status-bar": "~1.4.4",
18 |     "nativewind": "^2.0.11",
19 |     "react": "18.2.0",
20 |     "react-native": "0.71.3",
21 |     "react-native-heroicons": "^3.2.0",
22 |     "react-native-ratings": "^8.1.0",
23 |     "react-native-safe-area-context": "4.5.0",
24 |     "react-native-screens": "~3.20.0",
25 |     "react-native-star-rating": "^1.1.0",
26 |     "react-native-svg": "13.4.0",
27 |     "tailwindcss": "^3.2.7"
28 |   },
29 |   "devDependencies": {
30 |     "@babel/core": "^7.20.0",
31 |     "babel-plugin-module-resolver": "^5.0.0",
32 |     "deprecated-react-native-prop-types": "^4.0.0"
33 |   },
34 |   "private": true
35 | }
36 | 


--------------------------------------------------------------------------------
/screens/HomeScreen.js:
--------------------------------------------------------------------------------
 1 | import { View, Text } from 'react-native'
 2 | import React from 'react'
 3 | import { SafeAreaFrameContext } from 'react-native-safe-area-context'
 4 | 
 5 | export default function HomeScreen() {
 6 |   return (
 7 |     <SafeAreaFrameContext>
 8 |       <Text>Home Screen</Text>
 9 |     </SafeAreaFrameContext>
10 |   )
11 | }


--------------------------------------------------------------------------------
/screens/StoreScreen.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, ScrollView, TouchableOpacity, Image} from 'react-native'
  2 | import React, { useState } from 'react'
  3 | import { SafeAreaView } from 'react-native-safe-area-context'
  4 | import { LinearGradient } from 'expo-linear-gradient'
  5 | import {ArrowDownTrayIcon, Bars3CenterLeftIcon, BellIcon} from 'react-native-heroicons/solid'
  6 | import {storeColors} from '../theme';
  7 | import GradientButton from '../components/gradientButton'
  8 | import GameCard from '../components/gameCard'
  9 | 
 10 | 
 11 | /////// subscribe for more videos like this :)
 12 | 
 13 | const categories = ['Action', 'Family', 'Puzzle', 'Adventure', 'Racing', 'Education', 'Others'];
 14 | const featured = [
 15 |   {
 16 |       id: 1,
 17 |       title: 'Zooba',
 18 |       image: require('../assets/images/zooba.png'),
 19 |       downloads: '200k',
 20 |       stars: 4
 21 |   },
 22 |   {
 23 |       id: 2,
 24 |       title: 'Subway Surfer',
 25 |       image: require('../assets/images/subway.png'),
 26 |       downloads: '5M',
 27 |       stars: 4
 28 |   },
 29 |   {
 30 |       id: 3,
 31 |       title: 'Free Fire',
 32 |       image: require('../assets/images/freeFire.png'),
 33 |       downloads: '100M',
 34 |       stars: 3
 35 |   },
 36 |   
 37 |   {
 38 |       id: 4,
 39 |       title: "Alto's Adventure",
 40 |       image: require('../assets/images/altosAdventure.png'),
 41 |       downloads: '20k',
 42 |       stars: 4
 43 |   },
 44 | ]
 45 | 
 46 | const games = [
 47 |   {
 48 |       id: 1,
 49 |       title: 'Shadow Fight',
 50 |       image: require('../assets/images/shadowFight.png'),
 51 |       downloads: '20M',
 52 |       stars: 4.5
 53 |   },
 54 |   {
 55 |       id: 2,
 56 |       title: 'Valor Arena',
 57 |       image: require('../assets/images/valorArena.png'),
 58 |       downloads: '10k',
 59 |       stars: 3.4
 60 |   },
 61 |   {
 62 |       id: 3,
 63 |       title: 'Frag',
 64 |       image: require('../assets/images/frag.png'),
 65 |       downloads: '80k',
 66 |       stars: 4.6
 67 |   },
 68 |   {
 69 |       id: 4,
 70 |       title: "Zooba Wildlife",
 71 |       image: require('../assets/images/zoobaGame.png'),
 72 |       downloads: '40k',
 73 |       stars: 3.5
 74 |   },
 75 |   {
 76 |       id: 4,
 77 |       title: "Clash of Clans",
 78 |       image: require('../assets/images/clashofclans.png'),
 79 |       downloads: '20k',
 80 |       stars: 4.2
 81 |   },
 82 | ];
 83 | 
 84 | export default function StoreScreen() {
 85 |   const [activeCategory, setActiveCategory] = useState('Action');
 86 |    const [selectedGame, setSelectedGame] = useState(null);
 87 |   return (
 88 |     <LinearGradient
 89 |       colors={['rgba(58, 131, 244,0.4)', 'rgba(9, 181, 211, 0.4)']}
 90 |       className="w-full flex-1"
 91 |     >
 92 |       <SafeAreaView>
 93 |         <View className="container">
 94 |           <View className="flex-row justify-between items-center px-4">
 95 |             <Bars3CenterLeftIcon color={storeColors.text} size="30" />
 96 |             <BellIcon color={storeColors.text} size="30" />
 97 |           </View>
 98 |            
 99 |           {/* categories */}
100 |           <View className="mt-3 space-y-4">
101 |             <Text
102 |               style={{color: storeColors.text}}
103 |               className="ml-4 text-3xl font-bold"
104 |             >
105 |               Browse Games
106 |             </Text>
107 |             <View className="pl-4">
108 |               <ScrollView horizontal showsHorizontalScrollIndicator={false}>
109 |                 {
110 |                   categories.map(cat=> {
111 |                     if(cat==activeCategory){
112 |                       // show gradient category
113 |                       return (
114 |                         <GradientButton key={cat} containerClass="mr-2" value={cat} />
115 |                       )
116 |                     }else{
117 |                       // show normal category
118 |                       return (
119 |                         <TouchableOpacity
120 |                           onPress={()=> setActiveCategory(cat)}
121 |                          key={cat}
122 |                          className="bg-blue-200 p-3 px-4 rounded-full mr-2">
123 |                           <Text>
124 |                             {cat}
125 |                           </Text>
126 |                          </TouchableOpacity>
127 |   
128 |                       )
129 |                     }
130 |                     
131 |                   })
132 |                 }
133 |               </ScrollView>
134 |             </View>
135 |           </View>
136 |           
137 |           {/* featured row  */}
138 |           <View className="mt-3 space-y-4">
139 |                 <Text
140 |                   style={{color: storeColors.text}}
141 |                   className="ml-4 text-lg font-bold">
142 |                     Featured Games
143 |                   </Text>
144 |                 <View className="pl-4">
145 |                   <ScrollView horizontal showsHorizontalScrollIndicator={false}>
146 |                     {
147 |                       featured.map((item, index)=>{
148 |                         return (
149 |                           <GameCard key={index} game={item} />
150 |                         )
151 |                       })
152 |                     }
153 |                   </ScrollView>
154 |                 </View>
155 |           </View>
156 | 
157 |           {/* top action games list */}
158 |           <View className="mt-3">
159 |             <View className="flex-row justify-between items-center mb-2">
160 |               <Text
161 |                   style={{color: storeColors.text}}
162 |                   className="ml-4 text-lg font-bold">
163 |                     Top Action Games
164 |               </Text>
165 |               <TouchableOpacity className="mr-4">
166 |                 <Text className="text-blue-600 font-bold">
167 |                   See All
168 |                 </Text>
169 |               </TouchableOpacity>
170 |             </View>
171 |             <ScrollView style={{height: 320}} showsVerticalScrollIndicator={false}>
172 |               {
173 |                 games.map((game, index)=>{
174 |                   let bg= game.id==selectedGame? 'rgba(255,255,255,0.4)': 'transparent';
175 | 
176 |                   return (
177 |                     <TouchableOpacity 
178 |                     style={{backgroundColor: bg}}
179 |                     className="mx-4 p-2 mb-2 flex-row rounded-3xl"
180 |                     onPress={()=> setSelectedGame(game.id)}
181 |                     key={index}>
182 |                       <Image source={game.image} style={{width: 80, height: 80}}
183 |                         className="rounded-2xl" />
184 |                       <View className="flex-1 flex justify-center pl-3 space-y-3">
185 |                         <Text style={{color: storeColors.text}}
186 |                           className="font-semibold">
187 |                             {game.title}
188 |                         </Text>
189 |                         <View className="flex-row space-x-3">
190 |                           <View className="flex-row space-x-1">
191 |                             <Image className="h-4 w-4 opacity-80"
192 |                               source={require('../assets/images/fullStar.png')} />
193 |                             <Text className="text-xs text-gray-700">
194 |                               {game.stars} stars
195 |                             </Text>
196 |                           </View>
197 |                           <View className="flex-row space-x-1">
198 |                             <ArrowDownTrayIcon size="15" className="text-blue-500" />
199 |                             <Text className="text-xs text-gray-700">
200 |                               {game.downloads}
201 |                             </Text>
202 |                           </View>
203 |                         </View>
204 |                       </View>
205 |                       <View className="flex justify-center items-center">
206 |                         <GradientButton value="play" buttonClass="py-2 px-5" />
207 |                       </View>
208 |                     </TouchableOpacity>
209 |                   )
210 |                 })
211 |               }
212 |             </ScrollView>
213 |           </View>
214 |         </View>
215 |       </SafeAreaView>   
216 | 
217 |     </LinearGradient>
218 |       
219 |   )
220 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./App.{js,jsx,ts,tsx}", 
 5 |     "./screens/**/*.{js,jsx,ts,tsx}",
 6 |     "./components/**/*.{js,jsx,ts,tsx}"
 7 |   ],
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | }
13 | 


--------------------------------------------------------------------------------
/theme/index.js:
--------------------------------------------------------------------------------
1 | export const storeColors = {
2 |     text: '#0D163A',
3 |     redHeart: '#F73434'
4 | }   
5 | 


--------------------------------------------------------------------------------