├── .gitignore
├── App.js
├── README.md
├── app.json
├── assets
    ├── HeartIcon.png
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    ├── images
    │   ├── index.js
    │   ├── profile.jpg
    │   ├── user1.jpg
    │   ├── user2.jpg
    │   ├── user3.jpg
    │   ├── user4.jpg
    │   ├── user5.jpg
    │   ├── user6.jpg
    │   ├── user7.jpg
    │   ├── user8.jpg
    │   └── user9.jpg
    └── splash.png
├── babel.config.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── DatesCard.js
    │   └── matches.js
    ├── constant
    │   └── index.js
    ├── font
    │   ├── SpaceGrotesk-Bold.ttf
    │   ├── SpaceGrotesk-Light.ttf
    │   ├── SpaceGrotesk-Medium.ttf
    │   ├── SpaceGrotesk-Regular.ttf
    │   └── SpaceGrotesk-SemiBold.ttf
    ├── navigation
    │   └── AppNavigation.js
    ├── screens
    │   ├── ChatDetailsScreen.js
    │   ├── ChatScreen.js
    │   ├── HomeScreen.js
    │   ├── ProfileScreen.js
    │   └── WelcomeScreen.js
    └── utils
    │   └── index.js
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # Expo
 7 | .expo/
 8 | dist/
 9 | web-build/
10 | 
11 | # Native
12 | *.orig.*
13 | *.jks
14 | *.p8
15 | *.p12
16 | *.key
17 | *.mobileprovision
18 | 
19 | # Metro
20 | .metro-health-check*
21 | 
22 | # debug
23 | npm-debug.*
24 | yarn-debug.*
25 | yarn-error.*
26 | 
27 | # macOS
28 | .DS_Store
29 | *.pem
30 | 
31 | # local env files
32 | .env*.local
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | import AppNavigation from "./src/navigation/AppNavigation";
2 | 
3 | export default function App() {
4 |   return <AppNavigation />;
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dating-App-UI-React-Native
 2 | 
 3 | ![Image](https://cdn.dribbble.com/userupload/12065697/file/original-6786badca9a32f86fdf8582ef150a6de.png?resize=1504x846)
 4 | 
 5 |   
 6 |   <p align="left">
 7 |     <a href="https://www.youtube.com/channel/UCuJNJfjUo2i4c6n09hZTlBQ?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>
 8 |     <p>
 9 |       Watch the Tutorial on YouTube <a href="https://youtu.be/x9XbqVbzET8" target="_blank">Dating App UI in React Native</a>
10 |     </p>
11 |     
12 |   </p>
13 |   
14 | 
15 | ## Get Started
16 | 
17 | install dev dependencies
18 | 
19 | ### `npm install`
20 | 
21 | Run The app
22 | 
23 | ### `npm start`
24 | 
25 | Runs your app in development mode.
26 | 
27 | 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.
28 | 
29 | #### `npm run ios`
30 | 
31 | 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.
32 | 
33 | #### `npm run android`
34 | 
35 | 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).
36 | 
37 | <br />
38 | 
39 | 💙 If you like this project, give it a ⭐ and share it with friends!
40 | 
41 | <p align="left">
42 |   <a href="https://www.youtube.com/channel/UCuJNJfjUo2i4c6n09hZTlBQ?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>
43 |   <a href="https://twitter.com/joestackss"><img alt="Twitter" title="Twitter" src="https://img.shields.io/badge/-Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white"/></a>
44 | </p>
45 | 
46 | <a href="https://www.buymeacoffee.com/joestackss">☕ Buy me a coffee</a>
47 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "datingapp",
 4 |     "slug": "datingapp",
 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/HeartIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/HeartIcon.png


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/icon.png


--------------------------------------------------------------------------------
/assets/images/index.js:
--------------------------------------------------------------------------------
 1 | import user1 from "./user1.jpg";
 2 | import user2 from "./user2.jpg";
 3 | import user3 from "./user3.jpg";
 4 | import user4 from "./user4.jpg";
 5 | import user5 from "./user5.jpg";
 6 | import user6 from "./user6.jpg";
 7 | import user7 from "./user7.jpg";
 8 | import user8 from "./user8.jpg";
 9 | import user9 from "./user9.jpg";
10 | import profile from "./profile.jpg";
11 | 
12 | export {
13 |   user1,
14 |   user2,
15 |   user3,
16 |   user4,
17 |   user5,
18 |   user6,
19 |   user7,
20 |   user8,
21 |   user9,
22 |   profile,
23 | };
24 | 


--------------------------------------------------------------------------------
/assets/images/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/profile.jpg


--------------------------------------------------------------------------------
/assets/images/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user1.jpg


--------------------------------------------------------------------------------
/assets/images/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user2.jpg


--------------------------------------------------------------------------------
/assets/images/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user3.jpg


--------------------------------------------------------------------------------
/assets/images/user4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user4.jpg


--------------------------------------------------------------------------------
/assets/images/user5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user5.jpg


--------------------------------------------------------------------------------
/assets/images/user6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user6.jpg


--------------------------------------------------------------------------------
/assets/images/user7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user7.jpg


--------------------------------------------------------------------------------
/assets/images/user8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user8.jpg


--------------------------------------------------------------------------------
/assets/images/user9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/assets/images/user9.jpg


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/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", "react-native-reanimated/plugin"],
6 |   };
7 | };
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "datingapp",
 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 |     "@expo/vector-icons": "^13.0.0",
13 |     "@react-native-async-storage/async-storage": "1.18.2",
14 |     "@react-navigation/bottom-tabs": "^6.5.9",
15 |     "@react-navigation/native": "^6.1.8",
16 |     "@react-navigation/native-stack": "^6.9.14",
17 |     "expo": "~49.0.13",
18 |     "expo-linear-gradient": "~12.3.0",
19 |     "expo-font": "~11.4.0",
20 |     "expo-splash-screen": "^0.20.5",
21 |     "expo-status-bar": "~1.6.0",
22 |     "nativewind": "^2.0.11",
23 |     "react": "18.2.0",
24 |     "react-native": "0.72.5",
25 |     "react-native-heroicons": "^3.2.0",
26 |     "react-native-reanimated": "^3.3.0",
27 |     "react-native-responsive-screen": "^1.4.2",
28 |     "react-native-safe-area-context": "4.6.3",
29 |     "react-native-screens": "~3.22.0",
30 |     "react-native-snap-carousel": "^4.0.0-beta.6",
31 |     "react-native-vector-icons": "^10.0.0",
32 |     "tailwindcss": "^3.3.2"
33 |   },
34 |   "devDependencies": {
35 |     "@babel/core": "^7.20.0"
36 |   },
37 |   "private": true
38 | }


--------------------------------------------------------------------------------
/src/components/DatesCard.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Dimensions,
 3 |   TouchableWithoutFeedback,
 4 |   Image,
 5 |   Text,
 6 |   View,
 7 | } from "react-native";
 8 | import React from "react";
 9 | import { CheckBadgeIcon } from "react-native-heroicons/solid";
10 | import { LinearGradient } from "expo-linear-gradient";
11 | 
12 | var { width, height } = Dimensions.get("window");
13 | 
14 | export default function DatesCard({ item, handleClick }) {
15 |   return (
16 |     <View className="relative">
17 |       <TouchableWithoutFeedback onPress={() => handleClick(item)}>
18 |         <Image
19 |           source={item.imgUrl}
20 |           style={{
21 |             width: width * 0.8,
22 |             height: height * 0.75,
23 |           }}
24 |           resizeMode="cover"
25 |           className="rounded-3xl"
26 |         />
27 | 
28 |         {/* <Text>Hello</Text> */}
29 |       </TouchableWithoutFeedback>
30 | 
31 |       <LinearGradient
32 |         colors={["transparent", "rgba(0,0,0,0.9)"]}
33 |         style={{
34 |           position: "absolute",
35 |           bottom: 0,
36 |           width: "100%",
37 |           height: "100%",
38 |           borderBottomLeftRadius: 24,
39 |           borderBottomRightRadius: 24,
40 |         }}
41 |         start={{ x: 0.5, y: 0.5 }}
42 |         end={{ x: 0.5, y: 1 }}
43 |       />
44 | 
45 |       <View className="absolute bottom-10 justify-start w-full items-start pl-4">
46 |         <View className="flex-row justify-center items-center ">
47 |           <Text className="text-2xl text-white font-bold">
48 |             {item.name} {item.lastName}
49 |             {", "}
50 |           </Text>
51 |           <Text className="text-2xl text-white font-bold mr-2">{item.age}</Text>
52 |           <CheckBadgeIcon size={25} color={"#3B82F6"} />
53 |         </View>
54 | 
55 |         {/* Location */}
56 |         <View className="flex-row justify-center items-center ">
57 |           <Text className="text-lg text-white font-regular">
58 |             {item.city}
59 |             {", "}
60 |           </Text>
61 |           <Text className="text-lg text-white font-regular mr-2">
62 |             {item.country}
63 |           </Text>
64 |         </View>
65 |       </View>
66 |     </View>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/matches.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, ScrollView, TouchableOpacity, Image } from "react-native";
 2 | import React from "react";
 3 | import { datesData, matchesData } from "../constant";
 4 | import { heightPercentageToDP as hp } from "react-native-responsive-screen";
 5 | 
 6 | export default function Matches() {
 7 |   return (
 8 |     <View className="mt-4">
 9 |       <ScrollView
10 |         horizontal
11 |         showsHorizontalScrollIndicator={false}
12 |         className="space-x-4"
13 |         contentContainerStyle={{
14 |           paddingLeft: hp(2),
15 |           paddingRight: hp(2),
16 |         }}
17 |       >
18 |         {datesData?.map((matches, index) => {
19 |           return (
20 |             <TouchableOpacity
21 |               key={index}
22 |               className="flex items-center space-y-1"
23 |             >
24 |               <View className="rounded-full">
25 |                 <Image
26 |                   source={matches.imgUrl}
27 |                   style={{
28 |                     width: hp(6),
29 |                     height: hp(6),
30 |                   }}
31 |                   className="rounded-full"
32 |                 />
33 |               </View>
34 |               <Text
35 |                 className="text-neutral-800 font-bold "
36 |                 style={{
37 |                   fontSize: hp(1.6),
38 |                 }}
39 |               >
40 |                 {matches.name}
41 |               </Text>
42 |               <Text
43 |                 className="text-neutral-800 font-bold"
44 |                 style={{
45 |                   fontSize: hp(1.6),
46 |                 }}
47 |               >
48 |                 {matches.age}
49 |               </Text>
50 |             </TouchableOpacity>
51 |           );
52 |         })}
53 |       </ScrollView>
54 |     </View>
55 |   );
56 | }
57 | 


--------------------------------------------------------------------------------
/src/constant/index.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   profile,
  3 |   user1,
  4 |   user2,
  5 |   user3,
  6 |   user4,
  7 |   user5,
  8 |   user6,
  9 |   user7,
 10 |   user8,
 11 |   user9,
 12 | } from "../../assets/images";
 13 | 
 14 | export const userData = [
 15 |   {
 16 |     id: 1,
 17 |     name: "Peggie",
 18 |     age: 28,
 19 |     hobbies: ["Concerts", "Festivals", "Photography"],
 20 |     bio: "Hey there! My name is Peggie. I'm a passionate fashion photographer with a love for capturing the beauty in everyday life. When I'm not behind the lens, you'll find me immersing myself in the energy of live music at concerts and festivals. Exploring new cultures and cuisines is my idea of a perfect adventure. Let's share stories over a cup of coffee and see where our shared passions take us!",
 21 |     distance: "3 miles away",
 22 |     imgPath: user1,
 23 |   },
 24 |   {
 25 |     id: 2,
 26 |     name: "Diana",
 27 |     age: 30,
 28 |     hobbies: ["Hiking", "Cooking", "Music"],
 29 |     bio: "Hi there! I'm Diana, a nature lover who finds joy in the kitchen and the magic of music. Let's go on a hike and then cook up a storm together. Seeking someone to share adventures and good food with.",
 30 |     distance: "10 miles away",
 31 |     imgPath: user2,
 32 |   },
 33 |   {
 34 |     id: 3,
 35 |     name: "Sophie",
 36 |     age: 26,
 37 |     hobbies: ["Painting", "Yoga", "Traveling"],
 38 |     bio: "Greetings! I'm Sophie, a free-spirited artist who finds inspiration in the colors of life. Yoga keeps me grounded, and painting allows my imagination to soar. Let's embark on a journey of self-discovery together, exploring the world and creating masterpieces along the way.",
 39 |     distance: "2 miles away",
 40 |     imgPath: user3,
 41 |   },
 42 |   {
 43 |     id: 4,
 44 |     name: "Betty",
 45 |     age: 32,
 46 |     hobbies: ["Soccer", "Cooking", "Movies"],
 47 |     bio: "Hi there! I'm Betty, a soccer lover who finds joy in the kitchen and the magic of movies. Let's kick a ball around and then cook up a storm together. Seeking someone to share adventures and good food with.",
 48 |     distance: "5 miles away",
 49 |     imgPath: user4,
 50 |   },
 51 |   {
 52 |     id: 5,
 53 |     name: "Lily",
 54 |     age: 29,
 55 |     hobbies: ["Dancing", "Reading", "Hiking"],
 56 |     bio: "Hola! I'm Lily, a dance lover who finds joy in the rhythm of life. Books are my escape, and hiking fuels my spirit. Let's dance under the stars and get lost in stories over a cup of coffee. Eager to meet someone to share life's dance with.",
 57 |     distance: "7 miles away",
 58 |     imgPath: user5,
 59 |   },
 60 |   {
 61 |     id: 6,
 62 |     name: "Chiara",
 63 |     age: 28,
 64 |     hobbies: ["Singing", "Writing", "Sailing"],
 65 |     bio: "Ciao! I'm Chiara, a melody-maker who finds solace in writing and the serenity of sailing. Let's harmonize our voices and create music together. A poetic soul searching for someone to sail through life's highs and lows.",
 66 |     distance: "4 miles away",
 67 |     imgPath: user6,
 68 |   },
 69 |   {
 70 |     id: 7,
 71 |     name: "Emma",
 72 |     age: 27,
 73 |     hobbies: ["Singing", "Writing", "Sailing"],
 74 |     bio: "Hi there! I'm Emma, a melody-maker who finds solace in writing and the serenity of sailing. Let's harmonize our voices and create music together. A poetic soul searching for someone to sail through life's highs and lows.",
 75 |     distance: "4 miles away",
 76 |     imgPath: user7,
 77 |   },
 78 |   {
 79 |     id: 8,
 80 |     name: "Sarah",
 81 |     age: 29,
 82 |     hobbies: ["Surfing", "Gardening", "Painting"],
 83 |     bio: "Hi there! I'm Sarah, a surfer who finds joy in the garden and the magic of painting. Let's ride the waves and then paint up a storm together. Seeking someone to share adventures and good food with.",
 84 |     distance: "8 miles away",
 85 |     imgPath: user8,
 86 |   },
 87 |   {
 88 |     id: 9,
 89 |     name: "Olivia",
 90 |     age: 28,
 91 |     hobbies: ["Yoga", "Hiking", "Photography"],
 92 |     bio: "Hello, I'm Olivia, a yoga enthusiast who finds peace in the serenity of nature and expression through photography. Let's go on a hike and then strike a pose together. Looking for someone to share adventures and good food with.",
 93 |     distance: "9 miles away",
 94 |     imgPath: user9,
 95 |   },
 96 | ];
 97 | 
 98 | export const chatData = [
 99 |   {
100 |     id: 1,
101 |     name: "Betty",
102 |     imgUrl: user1,
103 |     age: 32,
104 |     isOnline: true,
105 |     lastMessage:
106 |       "That sounds like a lot of fun. Would you like to go together sometime?",
107 |     date: "2023-10-15",
108 |     timeSent: "5 mins",
109 |     chat: [
110 |       {
111 |         sender: "me",
112 |         message: "Hi there! How's it going?",
113 |         timestamp: "10:00 AM",
114 |       },
115 |       {
116 |         sender: "Betty",
117 |         message: "I am doing great, thanks!",
118 |         timestamp: "10:05 AM",
119 |       },
120 |       {
121 |         sender: "me",
122 |         message: "Have any exciting plans for the weekend? 😊",
123 |         timestamp: "10:10 AM",
124 |       },
125 |       {
126 |         sender: "Betty",
127 |         message: "Yes, I'm thinking of going hiking. 🏞️ What about you?",
128 |         timestamp: "10:15 AM",
129 |       },
130 |       {
131 |         sender: "me",
132 |         message: "That sounds amazing! I might just tag along. 🥾",
133 |         timestamp: "10:20 AM",
134 |       },
135 |       {
136 |         sender: "Betty",
137 |         message: "That would be great! The more, the merrier. 🌟",
138 |         timestamp: "10:25 AM",
139 |       },
140 |     ],
141 |   },
142 |   {
143 |     id: 2,
144 |     name: "Basquit",
145 |     imgUrl: user2,
146 |     age: 28,
147 |     isOnline: false,
148 |     lastMessage: "Sure, let's do that. When are you free?",
149 |     date: "2023-10-14",
150 |     timeSent: "10 mins",
151 |     chat: [
152 |       {
153 |         sender: "me",
154 |         message: "Hey Charlie, how have you been?",
155 |         timestamp: "11:00 AM",
156 |       },
157 |       {
158 |         sender: "Charlie",
159 |         message: "I've been good. How about you?",
160 |         timestamp: "11:05 AM",
161 |       },
162 |       {
163 |         sender: "me",
164 |         message: "I've been a bit busy, but managing. 😊",
165 |         timestamp: "11:10 AM",
166 |       },
167 |       {
168 |         sender: "Charlie",
169 |         message: "I understand. We should catch up soon! ☕",
170 |         timestamp: "11:15 AM",
171 |       },
172 |       {
173 |         sender: "me",
174 |         message: "Definitely! Let's plan something for this weekend. 🎉",
175 |         timestamp: "11:20 AM",
176 |       },
177 |       {
178 |         sender: "Charlie",
179 |         message: "Sure, that sounds good. When are you free? 🗓️",
180 |         timestamp: "11:25 AM",
181 |       },
182 |       {
183 |         sender: "me",
184 |         message: "I'm free on Saturday afternoon. How about you? 🌤️",
185 |         timestamp: "11:30 AM",
186 |       },
187 |       {
188 |         sender: "Charlie",
189 |         message: "Saturday works for me too! Let's meet at our usual spot. 🍔",
190 |         timestamp: "11:35 AM",
191 |       },
192 |       {
193 |         sender: "me",
194 |         message: "Sounds like a plan! See you then. 👋",
195 |         timestamp: "11:40 AM",
196 |       },
197 |     ],
198 |   },
199 |   {
200 |     id: 3,
201 |     name: "Oliver",
202 |     imgUrl: user3,
203 |     age: 30,
204 |     isOnline: true,
205 |     lastMessage: "Sounds like a plan! Let's make it happen.",
206 |     date: "2023-10-11",
207 |     timeSent: "25 mins",
208 |     chat: [
209 |       {
210 |         sender: "me",
211 |         message: "Hi Oliver, how's your day going?",
212 |         timestamp: "2:00 PM",
213 |       },
214 |       {
215 |         sender: "Oliver",
216 |         message: "It's going great! Enjoying the sunshine. How about you?",
217 |         timestamp: "2:05 PM",
218 |       },
219 |       {
220 |         sender: "me",
221 |         message: "That's wonderful! I'm just getting through some work. 💻",
222 |         timestamp: "2:10 PM",
223 |       },
224 |       {
225 |         sender: "Oliver",
226 |         message: "Don't work too hard! Make sure to take breaks. 🌞",
227 |         timestamp: "2:15 PM",
228 |       },
229 |       {
230 |         sender: "me",
231 |         message:
232 |           "Absolutely, breaks are necessary. Planning anything fun for the evening? 🎉",
233 |         timestamp: "2:20 PM",
234 |       },
235 |       {
236 |         sender: "Oliver",
237 |         message: "I might go to the gym later. Need to work off some steam. 💪",
238 |         timestamp: "2:25 PM",
239 |       },
240 |       {
241 |         sender: "me",
242 |         message: "That's a great idea! I should join you sometime. 🏋️‍♂️",
243 |         timestamp: "2:30 PM",
244 |       },
245 |       {
246 |         sender: "Oliver",
247 |         message: "Definitely! The more, the merrier. 🤸‍♂️",
248 |         timestamp: "2:35 PM",
249 |       },
250 |     ],
251 |   },
252 |   {
253 |     id: 4,
254 |     name: "Sophie",
255 |     imgUrl: user9,
256 |     age: 27,
257 |     isOnline: true,
258 |     lastMessage: "Definitely! Looking forward to it.",
259 |     date: "2023-10-10",
260 |     timeSent: "30 mins",
261 |     chat: [
262 |       {
263 |         sender: "me",
264 |         message: "Hey Sophie, how's your week been?",
265 |         timestamp: "3:00 PM",
266 |       },
267 | 
268 |       {
269 |         sender: "Sophie",
270 |         message: "It's been busy but good. How about you?",
271 |         timestamp: "3:05 PM",
272 |       },
273 |       {
274 |         sender: "Sophie",
275 |         message: "And also tired",
276 |         timestamp: "3:05 PM",
277 |       },
278 |       {
279 |         sender: "me",
280 |         message: "Mine's been quite hectic too, but managing.",
281 |         timestamp: "3:10 PM",
282 |       },
283 |       {
284 |         sender: "Sophie",
285 |         message: "That's good to hear. Any exciting plans for the weekend?",
286 |         timestamp: "3:15 PM",
287 |       },
288 |       {
289 |         sender: "me",
290 |         message:
291 |           "Not yet, but I'm thinking of checking out that new restaurant downtown. You?",
292 |         timestamp: "3:20 PM",
293 |       },
294 |       {
295 |         sender: "Sophie",
296 |         message:
297 |           "I'm planning to go hiking with some friends. You should join us sometime!",
298 |         timestamp: "3:25 PM",
299 |       },
300 |     ],
301 |   },
302 | 
303 |   {
304 |     id: 5,
305 |     name: "William",
306 |     imgUrl: user1,
307 |     age: 29,
308 |     isOnline: false,
309 |     lastMessage: "Let me check my schedule and get back to you.",
310 |     date: "2023-10-09",
311 |     timeSent: "35 mins",
312 |     chat: [
313 |       {
314 |         sender: "me",
315 |         message: "Hi William, how's everything going?",
316 |         timestamp: "4:00 PM",
317 |       },
318 |       {
319 |         sender: "William",
320 |         message: "Things are going well. How about you?",
321 |         timestamp: "4:05 PM",
322 |       },
323 |     ],
324 |   },
325 |   {
326 |     id: 6,
327 |     name: "Jack",
328 |     imgUrl: user3,
329 |     age: 30,
330 |     isOnline: true,
331 |     lastMessage: "Sounds like a great idea. Let's make it happen.",
332 |     date: "2023-10-07",
333 |     timeSent: "45 mins",
334 |     chat: [
335 |       {
336 |         sender: "me",
337 |         message: "Hey Jack, how's your week been?",
338 |         timestamp: "6:00 PM",
339 |       },
340 |       {
341 |         sender: "Jack",
342 |         message: "It's been busy but good. How about you?",
343 |         timestamp: "6:05 PM",
344 |       },
345 |     ],
346 |   },
347 | ];
348 | 
349 | export const datesData = [
350 |   {
351 |     id: 1,
352 |     imgUrl: user1,
353 |     name: "Dianna",
354 |     lastName: "Jones",
355 |     age: 25,
356 |     city: "New York",
357 |     country: "USA",
358 |   },
359 |   {
360 |     id: 2,
361 |     imgUrl: user2,
362 |     name: "Jane",
363 |     lastName: "Smith",
364 |     age: 28,
365 |     city: "Los Angeles",
366 |     country: "USA",
367 |   },
368 |   {
369 |     id: 3,
370 |     imgUrl: user3,
371 |     name: "Chiara",
372 |     lastName: "Doe",
373 |     age: 26,
374 |     city: "London",
375 |     country: "UK",
376 |   },
377 |   {
378 |     id: 4,
379 |     imgUrl: user4,
380 |     name: "Ella",
381 |     lastName: "Williams",
382 |     age: 29,
383 |     city: "Sydney",
384 |     country: "Australia",
385 |   },
386 |   {
387 |     id: 5,
388 |     imgUrl: user5,
389 |     name: "Jullie",
390 |     lastName: "Brown",
391 |     age: 30,
392 |     city: "Paris",
393 |     country: "France",
394 |   },
395 |   {
396 |     id: 6,
397 |     imgUrl: user6,
398 |     name: "Olivia",
399 |     lastName: "Miller",
400 |     age: 27,
401 |     city: "Berlin",
402 |     country: "Germany",
403 |   },
404 |   {
405 |     id: 7,
406 |     imgUrl: user7,
407 |     name: "William",
408 |     lastName: "Wilson",
409 |     age: 31,
410 |     city: "Toronto",
411 |     country: "Canada",
412 |   },
413 |   {
414 |     id: 8,
415 |     imgUrl: user8,
416 |     name: "Sophia",
417 |     lastName: "Moore",
418 |     age: 29,
419 |     city: "Tokyo",
420 |     country: "Japan",
421 |   },
422 |   {
423 |     id: 9,
424 |     imgUrl: user9,
425 |     name: "Diana",
426 |     lastName: "Taylor",
427 |     age: 32,
428 |     city: "Mumbai",
429 |     country: "India",
430 |   },
431 |   {
432 |     id: 10,
433 |     imgUrl: user4,
434 |     name: "Alex",
435 |     lastName: "Anderson",
436 |     age: 30,
437 |     city: "Moscow",
438 |     country: "Russia",
439 |   },
440 | ];
441 | 
442 | export const profileData = [
443 |   {
444 |     name: "Jacob Jones",
445 |     age: 30,
446 |     imgUrl: profile,
447 |     hobbies: ["Hiking", "Photography", "Cooking"],
448 |     bio: "I'm an adventurous person who loves exploring new places, trying out different cuisines, capturing moments through photography, and spending time in nature. I enjoy hiking on weekends and experimenting with new recipes in the kitchen. Traveling and experiencing different cultures are some of my greatest passions, and I'm always looking for my next adventure.",
449 |   },
450 | ];
451 | 


--------------------------------------------------------------------------------
/src/font/SpaceGrotesk-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/font/SpaceGrotesk-Bold.ttf


--------------------------------------------------------------------------------
/src/font/SpaceGrotesk-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/font/SpaceGrotesk-Light.ttf


--------------------------------------------------------------------------------
/src/font/SpaceGrotesk-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/font/SpaceGrotesk-Medium.ttf


--------------------------------------------------------------------------------
/src/font/SpaceGrotesk-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/font/SpaceGrotesk-Regular.ttf


--------------------------------------------------------------------------------
/src/font/SpaceGrotesk-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/font/SpaceGrotesk-SemiBold.ttf


--------------------------------------------------------------------------------
/src/navigation/AppNavigation.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import WelcomeScreen from "../screens/WelcomeScreen";
 3 | import HomeScreen from "../screens/HomeScreen";
 4 | import ChatScreen from "../screens/ChatScreen";
 5 | import ProfileScreen from "../screens/ProfileScreen";
 6 | import ChatDetailsScreen from "../screens/ChatDetailsScreen";
 7 | import { createNativeStackNavigator } from "@react-navigation/native-stack";
 8 | import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 9 | import { NavigationContainer } from "@react-navigation/native";
10 | import { useColorScheme } from "nativewind";
11 | import { Ionicons } from "@expo/vector-icons";
12 | 
13 | const Stack = createNativeStackNavigator();
14 | const Tab = createBottomTabNavigator();
15 | 
16 | export default function AppNavigation() {
17 |   const { colorScheme } = useColorScheme();
18 |   const HomeTabs = () => {
19 |     return (
20 |       <Tab.Navigator
21 |         screenOptions={({ route }) => ({
22 |           headerShown: false,
23 |           tabBarIcon: ({ focused }) => {
24 |             let iconName;
25 | 
26 |             if (route.name === "Home") {
27 |               iconName = "home";
28 |             } else if (route.name === "Chat") {
29 |               iconName = "chatbubbles-outline";
30 |             } else if (route.name === "Matches") {
31 |               iconName = "heart-outline";
32 |             } else if (route.name === "Profile") {
33 |               iconName = "person-outline";
34 |             }
35 | 
36 |             const customizeSize = 25;
37 | 
38 |             return (
39 |               <Ionicons
40 |                 name={iconName}
41 |                 size={customizeSize}
42 |                 color={focused ? "#3B82F6" : "gray"}
43 |               />
44 |             );
45 |           },
46 | 
47 |           tabBarActiveTintColor: "#3B82F6",
48 |           tabBarLabelStyle: {
49 |             fontWeight: "bold",
50 |           },
51 |           tabBarInactiveTintColor: "gray",
52 |           // tabBarShowLabel: false,
53 |           tabBarStyle: {
54 |             backgroundColor: colorScheme == "dark" ? "black" : "white",
55 |           },
56 |         })}
57 |       >
58 |         <Tab.Screen name="Home" component={HomeScreen} />
59 | 
60 |         <Tab.Screen name="Chat" component={ChatScreen} />
61 |         <Tab.Screen name="Profile" component={ProfileScreen} />
62 |       </Tab.Navigator>
63 |     );
64 |   };
65 | 
66 |   return (
67 |     <NavigationContainer>
68 |       <Stack.Navigator
69 |         initialRouteName="HomeTabs"
70 |         screenOptions={{
71 |           headerShown: false,
72 |         }}
73 |       >
74 |         <Stack.Screen
75 |           name="Welcome"
76 |           component={WelcomeScreen}
77 |           options={{ headerShown: false }}
78 |         />
79 |         <Stack.Screen
80 |           name="ChatDetails"
81 |           component={ChatDetailsScreen}
82 |           options={{
83 |             presentation: "modal",
84 |           }}
85 |         />
86 |         <Stack.Screen name="HomeTabs" component={HomeTabs} />
87 |       </Stack.Navigator>
88 |     </NavigationContainer>
89 |   );
90 | }
91 | 


--------------------------------------------------------------------------------
/src/screens/ChatDetailsScreen.js:
--------------------------------------------------------------------------------
  1 | import { useNavigation } from "@react-navigation/native";
  2 | import React from "react";
  3 | import {
  4 |   View,
  5 |   Text,
  6 |   FlatList,
  7 |   TextInput,
  8 |   Image,
  9 |   TouchableOpacity,
 10 |   Platform,
 11 | } from "react-native";
 12 | import {
 13 |   ChevronLeftIcon,
 14 |   FaceSmileIcon,
 15 |   PaperAirplaneIcon,
 16 |   PhotoIcon,
 17 | } from "react-native-heroicons/outline";
 18 | import { EllipsisHorizontalIcon } from "react-native-heroicons/solid";
 19 | import { heightPercentageToDP as hp } from "react-native-responsive-screen";
 20 | import { SafeAreaView } from "react-native-safe-area-context";
 21 | 
 22 | const android = Platform.OS === "android";
 23 | 
 24 | export default function ChatDetailsScreen({ route }) {
 25 |   const navigation = useNavigation();
 26 |   const { chat, imgUrl, name, age } = route.params;
 27 | 
 28 |   return (
 29 |     <SafeAreaView className=" justify-center items-center relative bg-white"
 30 |     style={{
 31 |       paddingTop: android ? hp(4) : 0,
 32 |     }}
 33 |     >
 34 |       {/* Header */}
 35 |       <View className="justify-between items-center flex-row w-full px-4 pb-2 border-b border-neutral-400">
 36 |         {/* Arrow */}
 37 |         <TouchableOpacity
 38 |           className="w-2/3 flex-row items-center"
 39 |           onPress={() => navigation.navigate("Chat")}
 40 |         >
 41 |           <ChevronLeftIcon size={hp(2.5)} color={"black"} strokeWidth={2} />
 42 |           <View className="border-2 rounded-full border-red-400 mr-2 ml-4">
 43 |             <Image
 44 |               source={imgUrl}
 45 |               style={{
 46 |                 width: hp(4.5),
 47 |                 height: hp(4.5),
 48 |               }}
 49 |               className="rounded-full"
 50 |             />
 51 |           </View>
 52 |           <View className="justify-center items-start">
 53 |             <Text className="font-bold text-base">
 54 |               {name}
 55 |               {", "}
 56 |               {age}
 57 |             </Text>
 58 |             <Text className="text-xs text-neutral-400">You matched today</Text>
 59 |           </View>
 60 |         </TouchableOpacity>
 61 | 
 62 |         {/* Name */}
 63 | 
 64 |         {/* Image */}
 65 |         <View className="w-1/3 items-end ">
 66 |           <View className="bg-black/5 rounded-full p-1">
 67 |             <EllipsisHorizontalIcon
 68 |               size={hp(3)}
 69 |               color={"black"}
 70 |               strokeWidth={2}
 71 |             />
 72 |           </View>
 73 |         </View>
 74 |       </View>
 75 | 
 76 |       {/* Chat Details */}
 77 |       <View className="w-full h-full">
 78 |         <Text className="text-center text-neutral-400 pt-4">Today</Text>
 79 |         <FlatList
 80 |           data={chat}
 81 |           keyExtractor={(item, index) => index.toString()}
 82 |           contentContainerStyle={{
 83 |             paddingBottom: hp(15),
 84 |           }}
 85 |           renderItem={({ item }) => (
 86 |             <View
 87 |               style={{
 88 |                 flexDirection: item.sender === "me" ? "row-reverse" : "row",
 89 |                 padding: 10,
 90 |                 paddingVertical: item.sender === "me" ? 13 : 3,
 91 |               }}
 92 |             >
 93 |               <View
 94 |                 style={{
 95 |                   // width: item.sender === "me" ? "60%" : "70%",
 96 |                   width: "auto",
 97 |                   maxWidth: item.sender === "me" ? "70%" : "70%",
 98 |                 }}
 99 |                 className=""
100 |               >
101 |                 <View
102 |                   style={{
103 |                     borderBottomRightRadius: item.sender === "me" ? 0 : 10,
104 |                     borderBottomLeftRadius: item.sender === "me" ? 10 : 0,
105 |                     backgroundColor:
106 |                       item.sender === "me" ? "#171717" : "#3B82F6",
107 |                     padding: 10,
108 |                     borderRadius: 10,
109 |                   }}
110 |                 >
111 |                   <Text className="text-white text-base leading-5 " style={{}}>
112 |                     {item.message}
113 |                   </Text>
114 |                 </View>
115 | 
116 |                 {item.sender === "me" && (
117 |                   <Text className="text-xs font-semibold text-neutral-500 text-right">
118 |                     {"Read "}
119 |                     {item.timestamp}
120 |                   </Text>
121 |                 )}
122 |               </View>
123 |             </View>
124 |           )}
125 |         />
126 |       </View>
127 | 
128 |       {/* Text Input  */}
129 |       <View className="absolute flex-row justify-between items-center w-full px-4 pb-12 pt-2 bg-white bottom-0">
130 |         <View className="flex-row items-center rounded-2xl bg-neutral-200 px-3 py-3 w-[85%] ">
131 |           <TextInput
132 |             placeholder="Write your message here"
133 |             placeholderTextColor={"gray"}
134 |             style={{
135 |               fontSize: hp(1.7),
136 |               fontWeight: "medium",
137 |             }}
138 |             className="flex-1 text-base mb-1 pl-1 tracking-wider"
139 |           />
140 | 
141 |           <View className="flex-row justify-center items-center space-x-1">
142 |             <PhotoIcon color={"gray"} strokeWidth={2} />
143 |             <FaceSmileIcon size={hp(2.5)} color={"gray"} strokeWidth={2} />
144 |           </View>
145 |         </View>
146 | 
147 |         <View className="bg-blue-500 rounded-2xl py-3 w-[13%] justify-center items-center ">
148 |           <PaperAirplaneIcon color={"white"} />
149 |         </View>
150 |       </View>
151 |     </SafeAreaView>
152 |   );
153 | }
154 | 


--------------------------------------------------------------------------------
/src/screens/ChatScreen.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   View,
  3 |   Text,
  4 |   TextInput,
  5 |   FlatList,
  6 |   Image,
  7 |   TouchableOpacity,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import { SafeAreaView } from "react-native-safe-area-context";
 11 | import Matches from "../components/matches";
 12 | import { MagnifyingGlassIcon } from "react-native-heroicons/outline";
 13 | import {
 14 |   heightPercentageToDP as hp,
 15 | } from "react-native-responsive-screen";
 16 | import { chatData } from "../constant";
 17 | import { useNavigation } from "@react-navigation/native";
 18 | 
 19 | const android = Platform.OS === "android";
 20 | 
 21 | export default function ChatScreen() {
 22 |   const navigation = useNavigation();
 23 |   return (
 24 |     <SafeAreaView
 25 |       className=""
 26 |       style={{
 27 |         paddingTop: android ? hp(3) : 0,
 28 |       }}
 29 |     >
 30 |       <View className="px-4">
 31 |         <Text className="uppercase font-semibold text-neutral-500 tracking-wider">
 32 |           Matches
 33 |         </Text>
 34 |       </View>
 35 |       <Matches />
 36 | 
 37 |       {/* Search Bar */}
 38 |       <View className="mx-4 mt-6 flex-row items-center rounded-2xl bg-neutral-200 px-3 py-4">
 39 |         <TextInput
 40 |           placeholder="Search"
 41 |           placeholderTextColor={"gray"}
 42 |           style={{
 43 |             fontSize: hp(1.7),
 44 |           }}
 45 |           className="flex-1 text-base mb-1 pl-1 tracking-widest"
 46 |         />
 47 | 
 48 |         <View className="">
 49 |           <MagnifyingGlassIcon size={hp(2.5)} color={"gray"} strokeWidth={3} />
 50 |         </View>
 51 |       </View>
 52 | 
 53 |       {/* Chat List */}
 54 | 
 55 |       <View className="px-4">
 56 |         <View className="border-b border-neutral-300 py-4">
 57 |           <Text className="uppercase font-semibold text-neutral-500 tracking-wider ">
 58 |             CHAT
 59 |           </Text>
 60 |         </View>
 61 | 
 62 |         <FlatList
 63 |           data={chatData}
 64 |           keyExtractor={(item) => item.id.toString()}
 65 |           renderItem={({ item }) => (
 66 |             <TouchableOpacity
 67 |               className="w-full py-3 items-center flex-row border-b  border-neutral-300"
 68 |               onPress={() =>
 69 |                 navigation.navigate("ChatDetails", {
 70 |                   chat: item.chat,
 71 |                   imgUrl: item.imgUrl,
 72 |                   name: item.name,
 73 |                   age: item.age,
 74 |                 })
 75 |               }
 76 |             >
 77 |               {/* Avatar */}
 78 |               <View
 79 |                 className="w-[17%] justify-center"
 80 |                 style={{
 81 |                   width: hp(7),
 82 |                   height: hp(7),
 83 |                 }}
 84 |               >
 85 |                 <Image
 86 |                   source={item.imgUrl}
 87 |                   style={{
 88 |                     width: "90%",
 89 |                     height: "90%",
 90 |                   }}
 91 |                   className="rounded-full"
 92 |                 />
 93 |               </View>
 94 | 
 95 |               {/* Information */}
 96 |               <View
 97 |                 className="w-[82%]"
 98 |                 style={{
 99 |                   height: hp(6),
100 |                 }}
101 |               >
102 |                 <View className="flex-row justify-between items-center">
103 |                   <View className="flex-row justify-center">
104 |                     <View className="flex-row">
105 |                       <Text className="font-bold text-base  ">
106 |                         {item.name} {", "}
107 |                       </Text>
108 |                       <Text className="font-bold text-base mr-1">
109 |                         {item.age}
110 |                       </Text>
111 |                     </View>
112 |                     {item.isOnline && (
113 |                       <View className=" justify-center items-center">
114 |                         <View className="w-2 h-2 bg-[#F26322] rounded-full ml-1 justify-center items-center"></View>
115 |                       </View>
116 |                     )}
117 |                   </View>
118 |                   <Text className="text-sm tracking-tight">
119 |                     {item.timeSent}
120 |                   </Text>
121 |                 </View>
122 |                 <View>
123 |                   <Text className="font-semibold text-xs text-neutral-500">
124 |                     {item.lastMessage.length > 45
125 |                       ? item.lastMessage.slice(0, 45) + "..."
126 |                       : item.lastMessage}
127 |                   </Text>
128 |                 </View>
129 |               </View>
130 |             </TouchableOpacity>
131 |           )}
132 |         />
133 |       </View>
134 |     </SafeAreaView>
135 |   );
136 | }
137 | 


--------------------------------------------------------------------------------
/src/screens/HomeScreen.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, Dimensions, TouchableOpacity, Image } from "react-native";
 2 | import React from "react";
 3 | import { SafeAreaView } from "react-native-safe-area-context";
 4 | import Carousal from "react-native-snap-carousel";
 5 | import DatesCard from "../components/DatesCard";
 6 | import { datesData } from "../constant";
 7 | import {
 8 |   BellIcon,
 9 | } from "react-native-heroicons/outline";
10 | import { user1 } from "../../assets/images";
11 | import { heightPercentageToDP as hp } from "react-native-responsive-screen";
12 | const android = Platform.OS === "android";
13 | const { width, height } = Dimensions.get("window");
14 | 
15 | export default function HomeScreen() {
16 | 
17 |   return (
18 |     <SafeAreaView
19 |       className="bg-white flex-1 justify-between"
20 |       style={{
21 |         paddingTop: android ? hp(2) : 0,
22 |       }}
23 |     >
24 |       {/* Header */}
25 |       <View className="w-full flex-row justify-between items-center px-4 mb-8">
26 |         <View className="rounded-full items-center justify-center">
27 |           <Image
28 |             source={user1}
29 |             style={{
30 |               width: hp(4.5),
31 |               height: hp(4.5),
32 |               resizeMode: "cover",
33 |             }}
34 |             className="rounded-full"
35 |           />
36 |         </View>
37 | 
38 |         <View>
39 |           <Text className="text-xl font-semibold text-center uppercase">
40 |             STACKS Dates
41 |           </Text>
42 |         </View>
43 | 
44 |         {/* Heart Icon */}
45 |         <View className="bg-black/10 p-2 rounded-full items-center justify-center">
46 |           <TouchableOpacity>
47 |             <BellIcon size={25} strokeWidth={2} color="black" />
48 |           </TouchableOpacity>
49 |         </View>
50 |       </View>
51 | 
52 |       {/* Carousal */}
53 |       <View className=" pb-4">
54 |         <View className="mx-4 mb-4">
55 |           <Text className="capitalize text-2xl font-semibold">
56 |             Find your love
57 |           </Text>
58 |         </View>
59 | 
60 |         <View className="">
61 |           <Carousal
62 |             data={datesData}
63 |             renderItem={({ item }) => <DatesCard item={item} />}
64 |             firstItem={1}
65 |             inactiveSlideScale={0.86}
66 |             inactiveSlideOpacity={0.6}
67 |             sliderWidth={width}
68 |             itemWidth={width * 0.8}
69 |             slideStyle={{ display: "flex", alignItems: "center" }}
70 |           />
71 |         </View>
72 |       </View>
73 |     </SafeAreaView>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/src/screens/ProfileScreen.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, Image, TouchableOpacity, ScrollView } from "react-native";
 2 | import React from "react";
 3 | import {
 4 |   heightPercentageToDP as hp,
 5 |   widthPercentageToDP as wp,
 6 | } from "react-native-responsive-screen";
 7 | import { CameraIcon } from "react-native-heroicons/outline";
 8 | import { profileData } from "../constant";
 9 | 
10 | export default function ProfileScreen() {
11 |   const data = profileData[0];
12 |   return (
13 |     <ScrollView
14 |       className="relative bg-white flex-1"
15 |       contentContainerStyle={{
16 |         paddingBottom: hp(5),
17 |       }}
18 |     >
19 |       {/* Image */}
20 |       <View>
21 |         <Image
22 |           source={data.imgUrl}
23 |           style={{
24 |             width: wp(100),
25 |             height: hp(60),
26 |             borderBottomLeftRadius: 30,
27 |             borderBottomRightRadius: 30,
28 |           }}
29 |         />
30 |       </View>
31 | 
32 |       {/* Header */}
33 |       <View className="w-full absolute flex-row justify-end items-center pt-10">
34 |         <View className="p-2 rounded-full bg-black/40 mr-5 justify-center items-center">
35 |           <CameraIcon size={hp(3.5)} color="white" strokeWidth={1.5} />
36 |         </View>
37 |       </View>
38 | 
39 |       {/* Bio */}
40 |       <View className="w-full justify-start items-start px-6 space-y-4 mt-6">
41 |         {/* User name and age */}
42 |         <View className="flex-row space-x-2 justify-between w-full items-center">
43 |           <View className="flex-row ">
44 |             <Text className="text-black text-center font-bold text-xl">
45 |               {data.name}
46 |               {", "}
47 |             </Text>
48 |             <Text className="text-black text-center font-bold text-xl ">
49 |               {data.age}
50 |             </Text>
51 |           </View>
52 | 
53 |           <Text>Edit</Text>
54 |         </View>
55 | 
56 |         {/* User hobbies */}
57 |         <View>
58 |           <View className="flex-row">
59 |             {data.hobbies?.map((hobby, index) => (
60 |               <View
61 |                 key={index}
62 |                 style={{
63 |                   borderRadius: 20,
64 |                   padding: 5,
65 |                   paddingHorizontal: 10,
66 |                   marginRight: 5,
67 |                 }}
68 |                 className="bg-[#d3d3d3]"
69 |               >
70 |                 <Text className="text-black ">{hobby}</Text>
71 |               </View>
72 |             ))}
73 |           </View>
74 |         </View>
75 | 
76 |         {/* User Bio */}
77 |         <View>
78 |           <Text className="uppercase font-semibold text-neutral-500 tracking-wider mb-2 ">
79 |             BIO
80 |           </Text>
81 | 
82 |           <Text className="text-black/80 text-left font-medium text-sm">
83 |             {data.bio}
84 |           </Text>
85 |         </View>
86 | 
87 |         {/*  */}
88 |       </View>
89 |     </ScrollView>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/src/screens/WelcomeScreen.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, StatusBar, Image, TouchableOpacity } from "react-native";
  2 | import React from "react";
  3 | import { useFonts } from "expo-font";
  4 | import { useCallback } from "react";
  5 | import * as SplashScreen from "expo-splash-screen";
  6 | import { useColorScheme } from "nativewind";
  7 | import { ArrowUpRightIcon } from "react-native-heroicons/outline";
  8 | import {
  9 |   widthPercentageToDP as wp,
 10 |   heightPercentageToDP as hp,
 11 | } from "react-native-responsive-screen";
 12 | import { useNavigation } from "@react-navigation/native";
 13 | 
 14 | 
 15 | export default function WelcomeScreen() {
 16 |   const { colorScheme, toggleColorScheme } = useColorScheme();
 17 |   const navigation = useNavigation();
 18 |   const [fontsLoaded, fontError] = useFonts({
 19 |     SpaceGroteskSemiBold: require("../font/SpaceGrotesk-SemiBold.ttf"),
 20 |     SpaceGroteskBold: require("../font/SpaceGrotesk-Bold.ttf"),
 21 |     SpaceGroteskMedium: require("../font/SpaceGrotesk-Medium.ttf"),
 22 |   });
 23 | 
 24 |   const onLayoutRootView = useCallback(async () => {
 25 |     if (fontsLoaded || fontError) {
 26 |       await SplashScreen.hideAsync();
 27 |     }
 28 |   }, [fontsLoaded, fontError]);
 29 | 
 30 |   if (!fontsLoaded) {
 31 |     return null;
 32 |   }
 33 |   return (
 34 |     <View
 35 |       onLayout={onLayoutRootView}
 36 |       className="flex-1"
 37 |       style={{
 38 |         width: wp(100),
 39 |       }}
 40 |     >
 41 |       <StatusBar style={colorScheme == "dark" ? "light" : "dark"} />
 42 | 
 43 |       <View
 44 |         className="justify-center items-center"
 45 |         style={{
 46 |           width: wp(100),
 47 |           height: hp(100),
 48 |         }}
 49 |       >
 50 |         {/* Heart Icon */}
 51 |         <View
 52 |           className=" pt-1 justify-center items-center my-4"
 53 |           style={{
 54 |             width: wp(100),
 55 |           }}
 56 |         >
 57 |           <Image
 58 |             source={require("../../assets/HeartIcon.png")}
 59 |             style={{
 60 |               width: wp(100),
 61 |               height: hp(40),
 62 |               resizeMode: "cover",
 63 |             }}
 64 |           />
 65 |         </View>
 66 | 
 67 |         {/* Welcome Text */}
 68 |         <View className="w-full p-6 px-10">
 69 |           <Text
 70 |             className="font-semibold  tracking-widest leading-none "
 71 |             style={{
 72 |               fontSize: wp(10),
 73 |             }}
 74 |           >
 75 |             Embrace
 76 |           </Text>
 77 | 
 78 |           <Text
 79 |             className="font-semibold tracking-widest w-[70%] leading-none"
 80 |             style={{
 81 |               fontSize: wp(10),
 82 |             }}
 83 |           >
 84 |             A New Way Of Dating
 85 |           </Text>
 86 | 
 87 |           <Text
 88 |             className="text-gray-800 leading-6 tracking-wider w-[60%] mt-2"
 89 |             style={{
 90 |               fontSize: wp(3.5),
 91 |             }}
 92 |           >
 93 |             We combine cutting-edge technologies with a modern approach to
 94 |             matchmaking.
 95 |           </Text>
 96 |         </View>
 97 | 
 98 |         {/* Button */}
 99 |         <View className="w-full px-10">
100 |           <TouchableOpacity
101 |             className="bg-[#F26322] px-4 py-4 rounded-xl flex-row justify-center items-center w-[45%]"
102 |             onPress={() => navigation.navigate("HomeTabs")}
103 |           >
104 |             <Text
105 |               className="text-white font-bold mr-2"
106 |               style={{
107 |                 fontSize: wp(3.5),
108 |               }}
109 |             >
110 |               Get Started
111 |             </Text>
112 |             <ArrowUpRightIcon color={"white"} size={20} strokeWidth={2.5} />
113 |           </TouchableOpacity>
114 |         </View>
115 |       </View>
116 |     </View>
117 |   );
118 | }
119 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joestackss/Dating-App-UI-React-Native/ed50ff837c21b2996d465423fde815d677e96686/src/utils/index.js


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


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