├── assets
    ├── icon.png
    ├── favicon.png
    ├── splash.png
    └── adaptive-icon.png
├── tsconfig.json
├── babel.config.js
├── .gitignore
├── App.tsx
├── app.json
├── package.json
└── ProfileScreen.tsx


/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iam-rohid/twitter-profile-clone/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iam-rohid/twitter-profile-clone/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iam-rohid/twitter-profile-clone/HEAD/assets/splash.png


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iam-rohid/twitter-profile-clone/HEAD/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "expo/tsconfig.base",
3 |   "compilerOptions": {
4 |     "strict": true
5 |   }
6 | }
7 | 


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


--------------------------------------------------------------------------------
/.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.tsx:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from "expo-status-bar";
 2 | import { SafeAreaProvider } from "react-native-safe-area-context";
 3 | import "react-native-gesture-handler";
 4 | import ProfileScreen from "./ProfileScreen";
 5 | 
 6 | export default function App() {
 7 |   return (
 8 |     <SafeAreaProvider>
 9 |       <ProfileScreen />
10 |       <StatusBar style="light" />
11 |     </SafeAreaProvider>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "twitter-profile-clone",
 4 |     "slug": "twitter-profile-clone",
 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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "twitter-profile-clone",
 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": "~48.0.9",
13 |     "expo-status-bar": "~1.4.4",
14 |     "react": "18.2.0",
15 |     "react-native": "0.71.4",
16 |     "react-native-reanimated": "~2.14.4",
17 |     "react-native-gesture-handler": "~2.9.0",
18 |     "react-native-safe-area-context": "4.5.0",
19 |     "expo-blur": "~12.2.2"
20 |   },
21 |   "devDependencies": {
22 |     "@babel/core": "^7.20.0",
23 |     "@types/react": "~18.0.14",
24 |     "typescript": "^4.9.4"
25 |   },
26 |   "private": true
27 | }
28 | 


--------------------------------------------------------------------------------
/ProfileScreen.tsx:
--------------------------------------------------------------------------------
  1 | import { StyleSheet, View, Image, Text } from "react-native";
  2 | import React from "react";
  3 | import { useSafeAreaInsets } from "react-native-safe-area-context";
  4 | import Animated, {
  5 |   Extrapolate,
  6 |   interpolate,
  7 |   useAnimatedProps,
  8 |   useAnimatedScrollHandler,
  9 |   useAnimatedStyle,
 10 |   useSharedValue,
 11 | } from "react-native-reanimated";
 12 | import { TouchableOpacity } from "react-native-gesture-handler";
 13 | import Icons from "@expo/vector-icons/MaterialIcons";
 14 | import { BlurView } from "expo-blur";
 15 | 
 16 | const COVER_PHOTO = `https://images.unsplash.com/photo-1541167760496-1628856ab772?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80`;
 17 | const PROFILE_PIC =
 18 |   "https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=512&h=512&q=80";
 19 | 
 20 | const APPBAR_HEIGHT = 52;
 21 | const DEFAULT_PADDING = 44;
 22 | const APPBAR_TITLE_TO_NAME_DISTANCE = 122;
 23 | const APPBAR_INFO_OFFSET = 156;
 24 | 
 25 | const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 26 | 
 27 | const ProfileScreen = () => {
 28 |   const insets = useSafeAreaInsets();
 29 |   const appBarPaddingBottom = useSharedValue(DEFAULT_PADDING);
 30 |   const profileOffset = useSharedValue(0);
 31 |   const blurIntensity = useSharedValue(0);
 32 |   const appBarInfoOffset = useSharedValue(APPBAR_INFO_OFFSET);
 33 | 
 34 |   const scrollHandler = useAnimatedScrollHandler({
 35 |     onScroll: (event) => {
 36 |       appBarPaddingBottom.value = Math.max(
 37 |         0,
 38 |         DEFAULT_PADDING - event.contentOffset.y
 39 |       );
 40 |       profileOffset.value = -event.contentOffset.y;
 41 | 
 42 |       blurIntensity.value = interpolate(
 43 |         event.contentOffset.y,
 44 |         [
 45 |           -40,
 46 |           0,
 47 |           APPBAR_TITLE_TO_NAME_DISTANCE,
 48 |           APPBAR_TITLE_TO_NAME_DISTANCE + 80,
 49 |         ],
 50 |         [40, 0, 0, 40],
 51 |         Extrapolate.CLAMP
 52 |       );
 53 |       appBarInfoOffset.value = Math.max(
 54 |         0,
 55 |         -event.contentOffset.y + APPBAR_INFO_OFFSET
 56 |       );
 57 |     },
 58 |   });
 59 | 
 60 |   const appBarAnimatedStyles = useAnimatedStyle(
 61 |     () => ({
 62 |       paddingBottom: appBarPaddingBottom.value,
 63 |       zIndex: appBarPaddingBottom.value === 0 ? 1 : -1,
 64 |     }),
 65 |     []
 66 |   );
 67 | 
 68 |   const profilePicStyles = useAnimatedStyle(
 69 |     () => ({
 70 |       top: insets.top + APPBAR_HEIGHT + profileOffset.value,
 71 |       transform: [
 72 |         {
 73 |           scale: interpolate(
 74 |             appBarPaddingBottom.value,
 75 |             [0, DEFAULT_PADDING],
 76 |             [0.65, 1],
 77 |             Extrapolate.CLAMP
 78 |           ),
 79 |         },
 80 |         {
 81 |           translateY: interpolate(
 82 |             appBarPaddingBottom.value,
 83 |             [0, DEFAULT_PADDING],
 84 |             [DEFAULT_PADDING, 16],
 85 |             Extrapolate.CLAMP
 86 |           ),
 87 |         },
 88 |       ],
 89 |     }),
 90 |     []
 91 |   );
 92 | 
 93 |   const appBarInfoAnimatedStyle = useAnimatedStyle(
 94 |     () => ({
 95 |       transform: [
 96 |         {
 97 |           translateY: appBarInfoOffset.value,
 98 |         },
 99 |       ],
100 |     }),
101 |     []
102 |   );
103 | 
104 |   const blurViewProps = useAnimatedProps(() => {
105 |     return {
106 |       intensity: blurIntensity.value,
107 |     };
108 |   });
109 | 
110 |   return (
111 |     <View style={{ flex: 1 }}>
112 |       <Animated.View
113 |         style={[
114 |           styles.appBarContainer,
115 |           appBarAnimatedStyles,
116 |           {
117 |             paddingTop: insets.top,
118 |           },
119 |         ]}
120 |       >
121 |         <Animated.Image
122 |           source={{
123 |             uri: COVER_PHOTO,
124 |           }}
125 |           resizeMode="cover"
126 |           style={[styles.coverPhoto]}
127 |         />
128 |         <AnimatedBlurView
129 |           style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
130 |           animatedProps={blurViewProps}
131 |         />
132 |         <View style={styles.appBar}>
133 |           <TouchableOpacity style={styles.appBarIconButton}>
134 |             <Icons name="arrow-back" size={24} color="#fff" />
135 |           </TouchableOpacity>
136 | 
137 |           <Animated.View
138 |             style={[
139 |               { flex: 1, paddingHorizontal: 16 },
140 |               appBarInfoAnimatedStyle,
141 |             ]}
142 |           >
143 |             <Text
144 |               style={{
145 |                 fontSize: 20,
146 |                 color: "#fff",
147 |                 fontWeight: "800",
148 |                 shadowRadius: 2,
149 |                 shadowColor: "#000",
150 |                 shadowOpacity: 0.15,
151 |                 shadowOffset: { height: 0, width: 0 },
152 |               }}
153 |             >
154 |               Rohid
155 |             </Text>
156 |             <Text
157 |               style={{
158 |                 fontSize: 14,
159 |                 color: "#fff",
160 |                 shadowRadius: 2,
161 |                 shadowColor: "#000",
162 |                 shadowOpacity: 0.15,
163 |                 shadowOffset: { height: 0, width: 0 },
164 |               }}
165 |             >
166 |               312 Tweets
167 |             </Text>
168 |           </Animated.View>
169 |           <TouchableOpacity style={styles.appBarIconButton}>
170 |             <Icons name="search" size={24} color="#fff" />
171 |           </TouchableOpacity>
172 |         </View>
173 |       </Animated.View>
174 |       <Animated.View
175 |         style={[
176 |           styles.profilePic,
177 |           profilePicStyles,
178 |           {
179 |             width: 80,
180 |             height: 80,
181 |             position: "absolute",
182 |             left: 16,
183 |           },
184 |         ]}
185 |       >
186 |         <Image
187 |           source={{
188 |             uri: PROFILE_PIC,
189 |           }}
190 |           style={{ flex: 1 }}
191 |         />
192 |       </Animated.View>
193 |       <Animated.ScrollView
194 |         style={[styles.container]}
195 |         onScroll={scrollHandler}
196 |         scrollEventThrottle={16}
197 |       >
198 |         <View
199 |           style={{ height: insets.top + APPBAR_HEIGHT + DEFAULT_PADDING }}
200 |         />
201 |         <View
202 |           style={{
203 |             paddingHorizontal: 12,
204 |             paddingTop: 12,
205 |             flexDirection: "row",
206 |           }}
207 |         >
208 |           <View style={{ paddingTop: 48, flex: 1 }}>
209 |             <Text style={{ fontSize: 24, color: "#000", fontWeight: "800" }}>
210 |               Rohid
211 |             </Text>
212 |             <Text
213 |               style={{ fontSize: 16, color: "rgba(0,0,0,0.5)", marginTop: 4 }}
214 |             >
215 |               @rohiddev
216 |             </Text>
217 |           </View>
218 |           <TouchableOpacity
219 |             style={{
220 |               paddingHorizontal: 16,
221 |               paddingVertical: 10,
222 |               borderRadius: 48,
223 |               borderWidth: 1,
224 |               borderColor: "rgba(0,0,0,0.5)",
225 |             }}
226 |           >
227 |             <Text style={{ fontSize: 16, fontWeight: "600" }}>
228 |               Edit Proifle
229 |             </Text>
230 |           </TouchableOpacity>
231 |         </View>
232 |         <View style={{ padding: 12, gap: 12 }}>
233 |           <Text style={{ fontSize: 16, lineHeight: 24 }}>
234 |             Self-thought Full-Stack Developer 🧑‍💻. Learn more about me at{" "}
235 |             <Text style={{ color: "#1D97FA" }}>rohid.dev</Text>
236 |           </Text>
237 | 
238 |           <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 12 }}>
239 |             <View style={{ flexDirection: "row", gap: 2 }}>
240 |               <Icons name="pin-drop" size={20} color="rgba(0,0,0,0.5)" />
241 |               <Text>Bangladesh</Text>
242 |             </View>
243 |             <View style={{ flexDirection: "row", gap: 2 }}>
244 |               <Icons name="link" size={20} color="rgba(0,0,0,0.5)" />
245 |               <Text style={{ color: "#1D97FA" }}>rohid.dev</Text>
246 |             </View>
247 |             <View style={{ flexDirection: "row", gap: 2 }}>
248 |               <Icons name="date-range" size={20} color="rgba(0,0,0,0.5)" />
249 |               <Text>Joined March 2021</Text>
250 |             </View>
251 |           </View>
252 | 
253 |           <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 12 }}>
254 |             <Text style={{ fontSize: 16 }}>
255 |               <Text style={{ color: "#000", fontWeight: "600" }}>56</Text>{" "}
256 |               Following
257 |             </Text>
258 |             <Text style={{ fontSize: 16 }}>
259 |               <Text style={{ color: "#000", fontWeight: "600" }}>69</Text>{" "}
260 |               Followers
261 |             </Text>
262 |           </View>
263 |         </View>
264 |         {new Array(100).fill("Post").map((item, i) => (
265 |           <View key={i} style={{ padding: 12 }}>
266 |             <Text>Post</Text>
267 |           </View>
268 |         ))}
269 |       </Animated.ScrollView>
270 |     </View>
271 |   );
272 | };
273 | 
274 | export default ProfileScreen;
275 | 
276 | const styles = StyleSheet.create({
277 |   container: {
278 |     flex: 1,
279 |   },
280 |   appBarContainer: {
281 |     position: "absolute",
282 |     overflow: "hidden",
283 |     top: 0,
284 |     left: 0,
285 |     right: 0,
286 |   },
287 |   appBar: {
288 |     flexDirection: "row",
289 |     justifyContent: "space-between",
290 |     paddingHorizontal: 16,
291 |     height: APPBAR_HEIGHT,
292 |     alignItems: "center",
293 |   },
294 |   appBarIconButton: {
295 |     width: 36,
296 |     height: 36,
297 |     alignItems: "center",
298 |     justifyContent: "center",
299 |     borderRadius: 40,
300 |     backgroundColor: "rgba(0,0,0,0.5)",
301 |   },
302 |   coverPhoto: {
303 |     position: "absolute",
304 |     left: 0,
305 |     right: 0,
306 |     top: 0,
307 |     bottom: 0,
308 |   },
309 |   profilePic: {
310 |     borderRadius: 100,
311 |     overflow: "hidden",
312 |     borderWidth: 4,
313 |     borderColor: "#fff",
314 |   },
315 | });
316 | 


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