├── .gitignore
├── app.json
├── app
    ├── (tabs)
    │   ├── (favorite)
    │   │   ├── _layout.tsx
    │   │   └── index.tsx
    │   ├── (home)
    │   │   ├── _layout.tsx
    │   │   └── index.tsx
    │   ├── (profile)
    │   │   ├── _layout.tsx
    │   │   └── index.tsx
    │   ├── (search)
    │   │   ├── _layout.tsx
    │   │   └── index.tsx
    │   └── _layout.tsx
    └── _layout.tsx
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── component
    └── screenConfig.tsx
├── mock
    └── commentData.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock


/.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.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "expo-bottom-tab-anim",
 4 |     "slug": "expo-bottom-tab-anim",
 5 |     "version": "1.0.0",
 6 |     "icon": "./assets/icon.png",
 7 |     "userInterfaceStyle": "automatic",
 8 |     "scheme": "your-app-scheme",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "assetBundlePatterns": ["**/*"],
15 |     "ios": {
16 |       "supportsTablet": true
17 |     },
18 |     "android": {
19 |       "adaptiveIcon": {
20 |         "foregroundImage": "./assets/adaptive-icon.png",
21 |         "backgroundColor": "#ffffff"
22 |       }
23 |     },
24 |     "web": {
25 |       "favicon": "./assets/favicon.png"
26 |     },
27 |     "plugins": ["expo-router"]
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/(tabs)/(favorite)/_layout.tsx:
--------------------------------------------------------------------------------
1 | import { Stack } from "expo-router";
2 | import React from "react";
3 | 
4 | const Layout = () => {
5 |   return <Stack />;
6 | };
7 | 
8 | export default Layout;
9 | 


--------------------------------------------------------------------------------
/app/(tabs)/(favorite)/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { StyleSheet, View, Text, Button } from "react-native";
 3 | import * as Haptics from "expo-haptics";
 4 | import { useTheme } from "@react-navigation/native";
 5 | 
 6 | export default function App() {
 7 |   const theme = useTheme();
 8 |   return (
 9 |     <View style={styles.container}>
10 |       <Text style={[styles.text, { color: theme.colors.text }]}>
11 |         Haptics.selectionAsync
12 |       </Text>
13 |       <View style={styles.buttonContainer}>
14 |         <Button title="Selection" onPress={() => Haptics.selectionAsync()} />
15 |       </View>
16 |       <Text style={[styles.text, { color: theme.colors.text }]}>
17 |         Haptics.notificationAsync
18 |       </Text>
19 |       <View style={styles.buttonContainer}>
20 |         <Button
21 |           title="Success"
22 |           onPress={() =>
23 |             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
24 |           }
25 |         />
26 |         <Button
27 |           title="Error"
28 |           onPress={() =>
29 |             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
30 |           }
31 |         />
32 |         <Button
33 |           title="Warning"
34 |           onPress={() =>
35 |             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning)
36 |           }
37 |         />
38 |       </View>
39 |       <Text style={[styles.text, { color: theme.colors.text }]}>
40 |         Haptics.impactAsync
41 |       </Text>
42 |       <View style={styles.buttonContainer}>
43 |         <Button
44 |           title="Light"
45 |           onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
46 |         />
47 |         <Button
48 |           title="Medium"
49 |           onPress={() =>
50 |             Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
51 |           }
52 |         />
53 |         <Button
54 |           title="Heavy"
55 |           onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
56 |         />
57 |       </View>
58 |     </View>
59 |   );
60 | }
61 | 
62 | const styles = StyleSheet.create({
63 |   container: {
64 |     flex: 1,
65 |     justifyContent: "center",
66 |     paddingHorizontal: 16,
67 |   },
68 |   buttonContainer: {
69 |     flexDirection: "row",
70 |     alignItems: "stretch",
71 |     marginTop: 10,
72 |     marginBottom: 30,
73 |     justifyContent: "space-between",
74 |   },
75 |   text: {},
76 | });
77 | 


--------------------------------------------------------------------------------
/app/(tabs)/(home)/_layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ScreenConfig from "../../../component/screenConfig";
3 | 
4 | const Layout = () => {
5 |   return <ScreenConfig title={"Home"} />;
6 | };
7 | 
8 | export default Layout;
9 | 


--------------------------------------------------------------------------------
/app/(tabs)/(home)/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { memo, useEffect, useState } from "react";
  2 | import {
  3 |   ScrollView,
  4 |   StyleSheet,
  5 |   View,
  6 |   useWindowDimensions,
  7 | } from "react-native";
  8 | import { Image } from "expo-image";
  9 | import { SafeAreaView } from "react-native-safe-area-context";
 10 | import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 11 | 
 12 | const CommentSection = () => {
 13 |   const { width } = useWindowDimensions();
 14 |   const tabBarHeight = useBottomTabBarHeight();
 15 |   const [state, setState] = useState({
 16 |     imageData: [],
 17 |     likedIndex: [],
 18 |   });
 19 | 
 20 |   useEffect(() => {
 21 |     getImages();
 22 |   }, []);
 23 | 
 24 |   const getImages = () => {
 25 |     fetch("https://picsum.photos/v2/list?page=5&limit=50")
 26 |       .then((res) => res.json())
 27 |       .then((res) => setState((prev) => ({ ...prev, imageData: res })));
 28 |   };
 29 | 
 30 |   const renderItem = ({ item, index }) => {
 31 |     let imageWidth = width / 2;
 32 | 
 33 |     let aspectRatio = item.width / item.height;
 34 |     const imageHeight = imageWidth / aspectRatio;
 35 | 
 36 |     return (
 37 |       <View
 38 |         style={{
 39 |           width: "100%",
 40 |           height: imageHeight,
 41 |           borderRadius: 15,
 42 |           overflow: "hidden",
 43 |         }}
 44 |       >
 45 |         <Image
 46 |           source={{ uri: item.download_url }}
 47 |           style={{ width: "100%", height: imageHeight }}
 48 |         />
 49 |       </View>
 50 |     );
 51 |   };
 52 | 
 53 |   return (
 54 |     <SafeAreaView style={{ flex: 1 }} edges={["right", "left"]}>
 55 |       <ScrollView
 56 |         removeClippedSubviews={false}
 57 |         scrollEventThrottle={16}
 58 |         contentInsetAdjustmentBehavior="automatic"
 59 |         contentContainerStyle={{
 60 |           padding: 10,
 61 |           paddingBottom: tabBarHeight,
 62 |         }}
 63 |       >
 64 |         <View
 65 |           style={[
 66 |             {
 67 |               flex: 1,
 68 |               flexDirection: "row",
 69 |               gap: 10,
 70 |             },
 71 |           ]}
 72 |         >
 73 |           {Array.from(Array(2), (_, num) => {
 74 |             return (
 75 |               <View
 76 |                 key={`masonry-column-${num}`}
 77 |                 style={{
 78 |                   flex: 1 / 2,
 79 |                   flexDirection: "column",
 80 |                   gap: 10,
 81 |                 }}
 82 |               >
 83 |                 {state.imageData
 84 |                   .map((el, i) => {
 85 |                     if (i % 2 === num) {
 86 |                       return (
 87 |                         <View key={`masonry-row-${num}-${i}`}>
 88 |                           {renderItem({ item: el, i })}
 89 |                         </View>
 90 |                       );
 91 |                     }
 92 |                     return null;
 93 |                   })
 94 |                   .filter((e) => !!e)}
 95 |               </View>
 96 |             );
 97 |           })}
 98 |         </View>
 99 |       </ScrollView>
100 |     </SafeAreaView>
101 |   );
102 | };
103 | 
104 | export default memo(CommentSection);
105 | 
106 | const styles = StyleSheet.create({
107 |   containerStyle: {},
108 | });
109 | 


--------------------------------------------------------------------------------
/app/(tabs)/(profile)/_layout.tsx:
--------------------------------------------------------------------------------
1 | import { Stack } from "expo-router";
2 | import React from "react";
3 | 
4 | const Layout = () => {
5 |   return <Stack />;
6 | };
7 | 
8 | export default Layout;
9 | 


--------------------------------------------------------------------------------
/app/(tabs)/(profile)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "@react-navigation/native";
 2 | import { View, Text } from "react-native";
 3 | 
 4 | export default function Tab() {
 5 |   const theme = useTheme();
 6 |   return (
 7 |     <View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
 8 |       <Text style={{ color: theme.colors.text }}>Tab Profile</Text>
 9 |     </View>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/app/(tabs)/(search)/_layout.tsx:
--------------------------------------------------------------------------------
1 | import { Stack } from "expo-router";
2 | import React from "react";
3 | 
4 | const Layout = () => {
5 |   return <Stack />;
6 | };
7 | 
8 | export default Layout;
9 | 


--------------------------------------------------------------------------------
/app/(tabs)/(search)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "@react-navigation/native";
 2 | import { View, Text } from "react-native";
 3 | 
 4 | export default function Tab() {
 5 |   const theme = useTheme();
 6 |   return (
 7 |     <View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
 8 |       <Text style={{ color: theme.colors.text }}>Tab Search</Text>
 9 |     </View>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/app/(tabs)/_layout.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { AntDesign, Ionicons } from "@expo/vector-icons";
  3 | import { Tabs } from "expo-router";
  4 | import {
  5 |   Platform,
  6 |   StyleSheet,
  7 |   Text,
  8 |   TouchableOpacity,
  9 |   View,
 10 |   useColorScheme,
 11 |   useWindowDimensions,
 12 | } from "react-native";
 13 | import Animated, {
 14 |   Extrapolation,
 15 |   interpolate,
 16 |   interpolateColor,
 17 |   runOnJS,
 18 |   useAnimatedReaction,
 19 |   useAnimatedStyle,
 20 |   useSharedValue,
 21 |   withTiming,
 22 | } from "react-native-reanimated";
 23 | import { Gesture, GestureDetector } from "react-native-gesture-handler";
 24 | import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 25 | import * as Haptics from "expo-haptics";
 26 | import { useTheme } from "@react-navigation/native";
 27 | import { useSafeAreaInsets } from "react-native-safe-area-context";
 28 | import { BlurView } from "expo-blur";
 29 | 
 30 | const TabBar = ({ state, descriptors, navigation }) => {
 31 |   return (
 32 |     <View
 33 |       style={{
 34 |         flexDirection: "row",
 35 |       }}
 36 |     >
 37 |       {state.routes.map((route, index) => {
 38 |         const { options } = descriptors[route.key];
 39 |         const label =
 40 |           options.tabBarLabel !== undefined
 41 |             ? options.tabBarLabel
 42 |             : options.title !== undefined
 43 |             ? options.title
 44 |             : route.name;
 45 | 
 46 |         const Icon =
 47 |           options.tabBarIcon !== undefined
 48 |             ? options.tabBarIcon
 49 |             : options.tabBarIcon;
 50 | 
 51 |         const isFocused = state.index === index;
 52 | 
 53 |         const onPress = () => {
 54 |           const event = navigation.emit({
 55 |             type: "tabPress",
 56 |             target: route.key,
 57 |             canPreventDefault: true,
 58 |           });
 59 | 
 60 |           if (!isFocused && !event.defaultPrevented) {
 61 |             navigation.navigate(route.name, route.params);
 62 |           }
 63 |         };
 64 | 
 65 |         const onLongPress = () => {
 66 |           navigation.emit({
 67 |             type: "tabLongPress",
 68 |             target: route.key,
 69 |           });
 70 |         };
 71 | 
 72 |         return (
 73 |           <TouchableOpacity
 74 |             key={index.toString()}
 75 |             accessibilityRole="button"
 76 |             accessibilityState={isFocused ? { selected: true } : {}}
 77 |             accessibilityLabel={options.tabBarAccessibilityLabel}
 78 |             testID={options.tabBarTestID}
 79 |             onPress={onPress}
 80 |             onLongPress={onLongPress}
 81 |             style={{
 82 |               flex: 1,
 83 |               justifyContent: "center",
 84 |               alignItems: "center",
 85 |               gap: 3,
 86 |             }}
 87 |           >
 88 |             <Icon
 89 |               color={
 90 |                 isFocused
 91 |                   ? options.tabBarActiveTintColor
 92 |                   : options.tabBarInactiveTintColor
 93 |               }
 94 |               focused={isFocused}
 95 |             />
 96 |             <Text
 97 |               style={[
 98 |                 { fontSize: 10 },
 99 |                 {
100 |                   color: isFocused
101 |                     ? options.tabBarActiveTintColor
102 |                     : options.tabBarInactiveTintColor,
103 |                 },
104 |               ]}
105 |             >
106 |               {label}
107 |             </Text>
108 |           </TouchableOpacity>
109 |         );
110 |       })}
111 |     </View>
112 |   );
113 | };
114 | 
115 | const TabLayout = () => {
116 |   const theme = useTheme();
117 |   const tint = useColorScheme();
118 |   const { width, height } = useWindowDimensions();
119 |   const { bottom } = useSafeAreaInsets();
120 |   const isLandScape = width > height;
121 |   const TAB_PADDING = 5;
122 | 
123 |   const ACTIVE_WIDTH = isLandScape ? height : width * 0.8;
124 |   const CLAMP_HEIGHT = (isLandScape ? -width * 0.03 : -height * 0.01) - bottom;
125 | 
126 |   const isLongSet = useSharedValue(0);
127 |   const offset = useSharedValue({ x: 0, y: 0 });
128 |   const start = useSharedValue({ x: 0, y: 0 });
129 | 
130 |   useAnimatedReaction(
131 |     () => {
132 |       if (isLongSet.value === 1) {
133 |         runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Heavy);
134 |       } else {
135 |         runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Heavy);
136 |       }
137 |     },
138 |     (currentValue, previousValue) => {
139 |       if (currentValue !== previousValue) {
140 |       }
141 |     }
142 |   );
143 | 
144 |   const dragGesture = Gesture.Pan()
145 |     .onBegin(() => {})
146 |     .onUpdate((e) => {
147 |       const HEIGHT_THRESHOLD_NEW = (height + offset.value.y) / height;
148 |       if (isLongSet.value) {
149 |         offset.value = {
150 |           x: (e.translationX * HEIGHT_THRESHOLD_NEW) / 2.5 + start.value.x,
151 |           y: e.translationY * HEIGHT_THRESHOLD_NEW + start.value.y,
152 |         };
153 |       }
154 |     })
155 |     .onEnd(() => {
156 |       start.value = {
157 |         x: offset.value.x,
158 |         y: offset.value.y,
159 |       };
160 |     })
161 |     .onFinalize(() => {
162 |       if (isLongSet.value) {
163 |         if (offset.value.y > CLAMP_HEIGHT) {
164 |           start.value = withTiming(
165 |             {
166 |               x: 0,
167 |               y: 0,
168 |             },
169 |             {
170 |               duration: 250,
171 |             }
172 |           );
173 |           offset.value = withTiming(
174 |             {
175 |               x: 0,
176 |               y: 0,
177 |             },
178 |             {
179 |               duration: 250,
180 |             }
181 |           );
182 |         } else {
183 |           start.value = withTiming(
184 |             {
185 |               x: 0,
186 |               y: CLAMP_HEIGHT,
187 |             },
188 |             {
189 |               duration: 250,
190 |             }
191 |           );
192 |           offset.value = withTiming(
193 |             {
194 |               x: 0,
195 |               y: CLAMP_HEIGHT,
196 |             },
197 |             {
198 |               duration: 250,
199 |             }
200 |           );
201 |         }
202 |         isLongSet.value = 0;
203 |       }
204 |     });
205 | 
206 |   const animatedStyles = useAnimatedStyle(() => {
207 |     const bottomSpace = Platform.OS === "android" ? TAB_PADDING : bottom;
208 |     const paddingBottom = interpolate(
209 |       offset.value.y,
210 |       [0, CLAMP_HEIGHT],
211 |       [bottomSpace, TAB_PADDING],
212 |       Extrapolation.CLAMP
213 |     );
214 |     const rounded = interpolate(
215 |       offset.value.y,
216 |       [0, CLAMP_HEIGHT],
217 |       [3, 100],
218 |       Extrapolation.CLAMP
219 |     );
220 |     const xpace = interpolate(
221 |       offset.value.y,
222 |       [0, CLAMP_HEIGHT],
223 |       [width, ACTIVE_WIDTH],
224 |       Extrapolation.CLAMP
225 |     );
226 | 
227 |     return {
228 |       transform: [
229 |         {
230 |           translateX: offset.value.x,
231 |         },
232 |         {
233 |           translateY: offset.value.y,
234 |         },
235 |         {
236 |           translateX: (width - xpace) / 2,
237 |         },
238 |       ],
239 |       paddingBottom: paddingBottom,
240 |       backgroundColor:
241 |         Platform.OS === "android"
242 |           ? isLongSet.value
243 |             ? theme.colors.border
244 |             : theme.colors.card
245 |           : isLongSet.value
246 |           ? theme.colors.card
247 |           : "transparent",
248 |       elevation: isLongSet.value ? 10 : 5,
249 |       width: xpace,
250 |       borderRadius: rounded,
251 |     };
252 |   }, [width, height, theme.colors.card]);
253 | 
254 |   const longPressGesture = Gesture.LongPress()
255 |     .onStart((_event) => {
256 |       isLongSet.value = 1;
257 |     })
258 |     .onEnd(() => {});
259 | 
260 |   const composed = Gesture.Simultaneous(dragGesture, longPressGesture);
261 | 
262 |   const TabBarAnim = (props: BottomTabBarProps) => {
263 |     return (
264 |       <GestureDetector gesture={composed}>
265 |         <Animated.View
266 |           style={[
267 |             {
268 |               position: "absolute",
269 |               bottom: 0,
270 |               paddingVertical: TAB_PADDING,
271 |               overflow: "hidden",
272 |               shadowColor: "#000",
273 |             },
274 |             animatedStyles,
275 |           ]}
276 |         >
277 |           <BlurView
278 |             tint={tint}
279 |             intensity={Platform.select({ android: 0, ios: 100 })}
280 |             style={StyleSheet.absoluteFill}
281 |           />
282 |           <TabBar {...props} />
283 |         </Animated.View>
284 |       </GestureDetector>
285 |     );
286 |   };
287 | 
288 |   return (
289 |     <Tabs
290 |       initialRouteName="(home)"
291 |       screenOptions={{
292 |         tabBarActiveTintColor: theme.colors.primary,
293 |         tabBarInactiveTintColor: tint === "dark" ? "#757575" : "#666",
294 |         headerShown: false,
295 |       }}
296 |       tabBar={TabBarAnim}
297 |     >
298 |       <Tabs.Screen
299 |         name="(home)"
300 |         options={{
301 |           title: "Home",
302 |           tabBarIcon: ({ color, focused }) => (
303 |             <Ionicons name={"home"} size={24} color={color} />
304 |           ),
305 |         }}
306 |       />
307 |       <Tabs.Screen
308 |         name="(favorite)"
309 |         options={{
310 |           title: "Favorite",
311 |           tabBarIcon: ({ color, focused }) => (
312 |             <AntDesign
313 |               // name={focused ? "star" : "staro"}
314 |               name={"star"}
315 |               size={24}
316 |               color={color}
317 |             />
318 |           ),
319 |         }}
320 |       />
321 |       <Tabs.Screen
322 |         name="(search)"
323 |         options={{
324 |           title: "Search",
325 |           tabBarIcon: ({ color }) => (
326 |             <AntDesign name="search1" size={24} color={color} />
327 |           ),
328 |         }}
329 |       />
330 |       <Tabs.Screen
331 |         name="(profile)"
332 |         options={{
333 |           title: "Profile",
334 |           tabBarIcon: ({ color, focused }) => (
335 |             <Ionicons
336 |               // name={focused ? "person" : "person-outline"}
337 |               name={"person"}
338 |               size={24}
339 |               color={color}
340 |             />
341 |           ),
342 |         }}
343 |       />
344 |     </Tabs>
345 |   );
346 | };
347 | 
348 | export default TabLayout;
349 | 


--------------------------------------------------------------------------------
/app/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   DarkTheme,
 3 |   DefaultTheme,
 4 |   ThemeProvider,
 5 | } from "@react-navigation/native";
 6 | import { Stack } from "expo-router/stack";
 7 | import { useColorScheme } from "react-native";
 8 | import { GestureHandlerRootView } from "react-native-gesture-handler";
 9 | import { SafeAreaProvider } from "react-native-safe-area-context";
10 | 
11 | export default function AppLayout() {
12 |   const themes = useColorScheme();
13 |   const theme = themes === "dark" ? DarkTheme : DefaultTheme;
14 |   return (
15 |     <GestureHandlerRootView style={{ flex: 1 }}>
16 |       <SafeAreaProvider>
17 |         <ThemeProvider value={theme}>
18 |           <Stack>
19 |             <Stack.Screen
20 |               name="(tabs)"
21 |               options={{
22 |                 headerShown: false,
23 |                 navigationBarColor: theme.colors.card,
24 |               }}
25 |             />
26 |           </Stack>
27 |         </ThemeProvider>
28 |       </SafeAreaProvider>
29 |     </GestureHandlerRootView>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arunabhverma/expo-bottom-tab-anim/558bf9df4f079b2068f1e7c53abf8f725ff66e04/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arunabhverma/expo-bottom-tab-anim/558bf9df4f079b2068f1e7c53abf8f725ff66e04/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arunabhverma/expo-bottom-tab-anim/558bf9df4f079b2068f1e7c53abf8f725ff66e04/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arunabhverma/expo-bottom-tab-anim/558bf9df4f079b2068f1e7c53abf8f725ff66e04/assets/splash.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/component/screenConfig.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "@react-navigation/native";
 2 | import { Stack } from "expo-router";
 3 | import React from "react";
 4 | import { Platform, useColorScheme } from "react-native";
 5 | 
 6 | const Layout = ({ title }) => {
 7 |   const theme = useTheme();
 8 |   const tint = useColorScheme();
 9 |   const headerConfig = Platform.select({
10 |     android: {},
11 |     ios: {
12 |       // contentStyle: { backgroundColor: theme.colors.ba },
13 |       headerLargeTitle: true,
14 |       headerBlurEffect: tint,
15 |       headerTransparent: true,
16 |     },
17 |   });
18 |   return (
19 |     <Stack
20 |       screenOptions={{
21 |         ...headerConfig,
22 |         title,
23 |       }}
24 |     />
25 |   );
26 | };
27 | 
28 | export default Layout;
29 | 


--------------------------------------------------------------------------------
/mock/commentData.ts:
--------------------------------------------------------------------------------
  1 | export const COMMENT_DATA = [
  2 |   {
  3 |     body: "laudantium enim quasi est quidem magnam voluptate ipsam eos tempora quo necessitatibus dolor quam autem quasi reiciendis et nam sapiente accusantium",
  4 |     email: "Eliseo@gardner.biz",
  5 |     id: 1,
  6 |     name: "id labore ex et quam laborum",
  7 |     postId: 1,
  8 |     createdAt: "2024-03-21T23:50:32.185Z",
  9 |     userName: "Eliseo",
 10 |     isLiked: true,
 11 |   },
 12 |   {
 13 |     body: "est natus enim nihil est dolore omnis voluptatem numquam et omnis occaecati quod ullam at voluptatem error expedita pariatur nihil sint nostrum voluptatem reiciendis et",
 14 |     email: "Jayne_Kuhic@sydney.com",
 15 |     id: 2,
 16 |     name: "quo vero reiciendis velit similique earum",
 17 |     postId: 1,
 18 |     createdAt: "2024-03-21T18:19:16.228Z",
 19 |     userName: "Jayne_Kuhic",
 20 |     isLiked: false,
 21 |   },
 22 |   {
 23 |     body: "quia molestiae reprehenderit quasi aspernatur aut expedita occaecati aliquam eveniet laudantium omnis quibusdam delectus saepe quia accusamus maiores nam est cum et ducimus et vero voluptates excepturi deleniti ratione",
 24 |     email: "Nikita@garfield.biz",
 25 |     id: 3,
 26 |     name: "odio adipisci rerum aut animi",
 27 |     postId: 1,
 28 |     createdAt: "2024-03-15T04:54:15.941Z",
 29 |     userName: "Nikita",
 30 |     isLiked: true,
 31 |   },
 32 |   {
 33 |     body: "non et atque occaecati deserunt quas accusantium unde odit nobis qui voluptatem quia voluptas consequuntur itaque dolor et qui rerum deleniti ut occaecati",
 34 |     email: "Lew@alysha.tv",
 35 |     id: 4,
 36 |     name: "alias odio sit",
 37 |     postId: 1,
 38 |     createdAt: "2024-03-29T19:42:55.207Z",
 39 |     userName: "Lew",
 40 |     isLiked: true,
 41 |   },
 42 |   {
 43 |     body: "harum non quasi et ratione tempore iure ex voluptates in ratione harum architecto fugit inventore cupiditate voluptates magni quo et",
 44 |     email: "Hayden@althea.biz",
 45 |     id: 5,
 46 |     name: "vero eaque aliquid doloribus et culpa",
 47 |     postId: 1,
 48 |     createdAt: "2024-04-12T00:37:39.516Z",
 49 |     userName: "Hayden",
 50 |     isLiked: true,
 51 |   },
 52 |   {
 53 |     body: "doloribus at sed quis culpa deserunt consectetur qui praesentium accusamus fugiat dicta voluptatem rerum ut voluptate autem voluptatem repellendus aspernatur dolorem in",
 54 |     email: "Presley.Mueller@myrl.com",
 55 |     id: 6,
 56 |     name: "et fugit eligendi deleniti quidem qui sint nihil autem",
 57 |     postId: 2,
 58 |     createdAt: "2024-03-18T19:19:58.240Z",
 59 |     userName: "Presley.Mueller",
 60 |     isLiked: false,
 61 |   },
 62 |   {
 63 |     body: "maiores sed dolores similique labore et inventore et quasi temporibus esse sunt id et eos voluptatem aliquam aliquid ratione corporis molestiae mollitia quia et magnam dolor",
 64 |     email: "Dallas@ole.me",
 65 |     id: 7,
 66 |     name: "repellat consequatur praesentium vel minus molestias voluptatum",
 67 |     postId: 2,
 68 |     createdAt: "2024-04-08T11:50:07.770Z",
 69 |     userName: "Dallas",
 70 |     isLiked: true,
 71 |   },
 72 |   {
 73 |     body: "ut voluptatem corrupti velit ad voluptatem maiores et nisi velit vero accusamus maiores voluptates quia aliquid ullam eaque",
 74 |     email: "Mallory_Kunze@marie.org",
 75 |     id: 8,
 76 |     name: "et omnis dolorem",
 77 |     postId: 2,
 78 |     createdAt: "2024-03-16T18:22:07.570Z",
 79 |     userName: "Mallory_Kunze",
 80 |     isLiked: true,
 81 |   },
 82 |   {
 83 |     body: "sapiente assumenda molestiae atque adipisci laborum distinctio aperiam et ab ut omnis et occaecati aspernatur odit sit rem expedita quas enim ipsam minus",
 84 |     email: "Meghan_Littel@rene.us",
 85 |     id: 9,
 86 |     name: "provident id voluptas",
 87 |     postId: 2,
 88 |     createdAt: "2024-03-20T21:05:28.508Z",
 89 |     userName: "Meghan_Littel",
 90 |     isLiked: false,
 91 |   },
 92 |   {
 93 |     body: "voluptate iusto quis nobis reprehenderit ipsum amet nulla quia quas dolores velit et non aut quia necessitatibus nostrum quaerat nulla et accusamus nisi facilis",
 94 |     email: "Carmen_Keeling@caroline.name",
 95 |     id: 10,
 96 |     name: "eaque et deleniti atque tenetur ut quo ut",
 97 |     postId: 2,
 98 |     createdAt: "2024-03-23T14:06:22.087Z",
 99 |     userName: "Carmen_Keeling",
100 |     isLiked: true,
101 |   },
102 |   {
103 |     body: "ut dolorum nostrum id quia aut est fuga est inventore vel eligendi explicabo quis consectetur aut occaecati repellat id natus quo est ut blanditiis quia ut vel ut maiores ea",
104 |     email: "Veronica_Goodwin@timmothy.net",
105 |     id: 11,
106 |     name: "fugit labore quia mollitia quas deserunt nostrum sunt",
107 |     postId: 3,
108 |     createdAt: "2024-03-17T04:50:16.758Z",
109 |     userName: "Veronica_Goodwin",
110 |     isLiked: false,
111 |   },
112 |   {
113 |     body: "expedita maiores dignissimos facilis ipsum est rem est fugit velit sequi eum odio dolores dolor totam occaecati ratione eius rem velit",
114 |     email: "Oswald.Vandervort@leanne.org",
115 |     id: 12,
116 |     name: "modi ut eos dolores illum nam dolor",
117 |     postId: 3,
118 |     createdAt: "2024-04-10T11:15:08.776Z",
119 |     userName: "Oswald.Vandervort",
120 |     isLiked: false,
121 |   },
122 |   {
123 |     body: "fuga eos qui dolor rerum inventore corporis exercitationem corporis cupiditate et deserunt recusandae est sed quis culpa eum maiores corporis et",
124 |     email: "Kariane@jadyn.tv",
125 |     id: 13,
126 |     name: "aut inventore non pariatur sit vitae voluptatem sapiente",
127 |     postId: 3,
128 |     createdAt: "2024-03-28T00:46:43.249Z",
129 |     userName: "Kariane",
130 |     isLiked: true,
131 |   },
132 |   {
133 |     body: "vel quae voluptas qui exercitationem voluptatibus unde sed minima et qui ipsam aspernatur expedita magnam laudantium et et quaerat ut qui dolorum",
134 |     email: "Nathan@solon.io",
135 |     id: 14,
136 |     name: "et officiis id praesentium hic aut ipsa dolorem repudiandae",
137 |     postId: 3,
138 |     createdAt: "2024-04-04T15:25:35.548Z",
139 |     userName: "Nathan",
140 |     isLiked: false,
141 |   },
142 |   {
143 |     body: "nihil ut voluptates blanditiis autem odio dicta rerum quisquam saepe et est sunt quasi nemo laudantium deserunt molestias tempora quo quia",
144 |     email: "Maynard.Hodkiewicz@roberta.com",
145 |     id: 15,
146 |     name: "debitis magnam hic odit aut ullam nostrum tenetur",
147 |     postId: 3,
148 |     createdAt: "2024-03-24T01:10:19.322Z",
149 |     userName: "Maynard.Hodkiewicz",
150 |     isLiked: true,
151 |   },
152 |   {
153 |     body: "iste ut laborum aliquid velit facere itaque quo ut soluta dicta voluptate error tempore aut et sequi reiciendis dignissimos expedita consequuntur libero sed fugiat facilis",
154 |     email: "Christine@ayana.info",
155 |     id: 16,
156 |     name: "perferendis temporibus delectus optio ea eum ratione dolorum",
157 |     postId: 4,
158 |     createdAt: "2024-04-04T14:26:27.658Z",
159 |     userName: "Christine",
160 |     isLiked: false,
161 |   },
162 |   {
163 |     body: "consequatur necessitatibus totam sed sit dolorum recusandae quae odio excepturi voluptatum harum voluptas quisquam sit ad eveniet delectus doloribus odio qui non labore",
164 |     email: "Preston_Hudson@blaise.tv",
165 |     id: 17,
166 |     name: "eos est animi quis",
167 |     postId: 4,
168 |     createdAt: "2024-04-02T06:50:18.254Z",
169 |     userName: "Preston_Hudson",
170 |     isLiked: false,
171 |   },
172 |   {
173 |     body: "veritatis voluptates necessitatibus maiores corrupti neque et exercitationem amet sit et ullam velit sit magnam laborum magni ut molestias",
174 |     email: "Vincenza_Klocko@albertha.name",
175 |     id: 18,
176 |     name: "aut et tenetur ducimus illum aut nulla ab",
177 |     postId: 4,
178 |     createdAt: "2024-03-14T18:09:44.808Z",
179 |     userName: "Vincenza_Klocko",
180 |     isLiked: false,
181 |   },
182 |   {
183 |     body: "doloribus est illo sed minima aperiam ut dignissimos accusantium tempore atque et aut molestiae magni ut accusamus voluptatem quos ut voluptates quisquam porro sed architecto ut",
184 |     email: "Madelynn.Gorczany@darion.biz",
185 |     id: 19,
186 |     name: "sed impedit rerum quia et et inventore unde officiis",
187 |     postId: 4,
188 |     createdAt: "2024-04-09T12:18:12.980Z",
189 |     userName: "Madelynn.Gorczany",
190 |     isLiked: true,
191 |   },
192 |   {
193 |     body: "qui harum consequatur fugiat et eligendi perferendis at molestiae commodi ducimus doloremque asperiores numquam qui ut sit dignissimos reprehenderit tempore",
194 |     email: "Mariana_Orn@preston.org",
195 |     id: 20,
196 |     name: "molestias expedita iste aliquid voluptates",
197 |     postId: 4,
198 |     createdAt: "2024-04-09T21:55:41.940Z",
199 |     userName: "Mariana_Orn",
200 |     isLiked: false,
201 |   },
202 |   {
203 |     body: "deleniti aut sed molestias explicabo commodi odio ratione nesciunt voluptate doloremque est nam autem error delectus",
204 |     email: "Noemie@marques.me",
205 |     id: 21,
206 |     name: "aliquid rerum mollitia qui a consectetur eum sed",
207 |     postId: 5,
208 |     createdAt: "2024-03-16T09:58:52.044Z",
209 |     userName: "Noemie",
210 |     isLiked: true,
211 |   },
212 |   {
213 |     body: "qui ipsa animi nostrum praesentium voluptatibus odit qui non impedit cum qui nostrum aliquid fuga explicabo voluptatem fugit earum voluptas exercitationem temporibus dignissimos distinctio esse inventore reprehenderit quidem ut incidunt nihil necessitatibus rerum",
214 |     email: "Khalil@emile.co.uk",
215 |     id: 22,
216 |     name: "porro repellendus aut tempore quis hic",
217 |     postId: 5,
218 |     createdAt: "2024-03-18T02:50:48.741Z",
219 |     userName: "Khalil",
220 |     isLiked: true,
221 |   },
222 |   {
223 |     body: "voluptates provident repellendus iusto perspiciatis ex fugiat ut ut dolor nam aliquid et expedita voluptate sunt vitae illo rerum in quos vel eligendi enim quae fugiat est",
224 |     email: "Sophia@arianna.co.uk",
225 |     id: 23,
226 |     name: "quis tempora quidem nihil iste",
227 |     postId: 5,
228 |     createdAt: "2024-03-14T21:10:27.934Z",
229 |     userName: "Sophia",
230 |     isLiked: false,
231 |   },
232 |   {
233 |     body: "repudiandae repellat quia sequi est dolore explicabo nihil et et sit et et praesentium iste atque asperiores tenetur",
234 |     email: "Jeffery@juwan.us",
235 |     id: 24,
236 |     name: "in tempore eos beatae est",
237 |     postId: 5,
238 |     createdAt: "2024-04-01T12:53:15.973Z",
239 |     userName: "Jeffery",
240 |     isLiked: true,
241 |   },
242 |   {
243 |     body: "sunt aut quae laboriosam sit ut impedit adipisci harum laborum totam deleniti voluptas odit rem ea non iure distinctio ut velit doloribus et non ex",
244 |     email: "Isaias_Kuhic@jarrett.net",
245 |     id: 25,
246 |     name: "autem ab ea sit alias hic provident sit",
247 |     postId: 5,
248 |     createdAt: "2024-03-17T07:18:42.475Z",
249 |     userName: "Isaias_Kuhic",
250 |     isLiked: true,
251 |   },
252 |   {
253 |     body: "incidunt sapiente eaque dolor eos ad est molestias quas sit et nihil exercitationem at cumque ullam nihil magnam et",
254 |     email: "Russel.Parker@kameron.io",
255 |     id: 26,
256 |     name: "in deleniti sunt provident soluta ratione veniam quam praesentium",
257 |     postId: 6,
258 |     createdAt: "2024-04-03T23:21:19.181Z",
259 |     userName: "Russel.Parker",
260 |     isLiked: true,
261 |   },
262 |   {
263 |     body: "nisi vel quas ut laborum ratione rerum magni eum unde et voluptatem saepe voluptas corporis modi amet ipsam eos saepe porro",
264 |     email: "Francesco.Gleason@nella.us",
265 |     id: 27,
266 |     name: "doloribus quibusdam molestiae amet illum",
267 |     postId: 6,
268 |     createdAt: "2024-03-13T16:27:17.428Z",
269 |     userName: "Francesco.Gleason",
270 |     isLiked: false,
271 |   },
272 |   {
273 |     body: "voluptatem repellendus quo alias at laudantium mollitia quidem esse temporibus consequuntur vitae rerum illum id corporis sit id",
274 |     email: "Ronny@rosina.org",
275 |     id: 28,
276 |     name: "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
277 |     postId: 6,
278 |     createdAt: "2024-03-18T16:59:04.152Z",
279 |     userName: "Ronny",
280 |     isLiked: true,
281 |   },
282 |   {
283 |     body: "tempora voluptatem est magnam distinctio autem est dolorem et ipsa molestiae odit rerum itaque corporis nihil nam eaque rerum error",
284 |     email: "Jennings_Pouros@erica.biz",
285 |     id: 29,
286 |     name: "eum distinctio amet dolor",
287 |     postId: 6,
288 |     createdAt: "2024-03-16T23:58:14.033Z",
289 |     userName: "Jennings_Pouros",
290 |     isLiked: true,
291 |   },
292 |   {
293 |     body: "consequuntur quia voluptate assumenda et autem voluptatem reiciendis ipsum animi est provident earum aperiam sapiente ad vitae iste accusantium aperiam eius qui dolore voluptatem et",
294 |     email: "Lurline@marvin.biz",
295 |     id: 30,
296 |     name: "quasi nulla ducimus facilis non voluptas aut",
297 |     postId: 6,
298 |     createdAt: "2024-04-12T19:46:30.849Z",
299 |     userName: "Lurline",
300 |     isLiked: true,
301 |   },
302 |   {
303 |     body: "quia incidunt ut aliquid est ut rerum deleniti iure est ipsum quia ea sint et voluptatem quaerat eaque repudiandae eveniet aut",
304 |     email: "Buford@shaylee.biz",
305 |     id: 31,
306 |     name: "ex velit ut cum eius odio ad placeat",
307 |     postId: 7,
308 |     createdAt: "2024-04-04T11:44:29.095Z",
309 |     userName: "Buford",
310 |     isLiked: true,
311 |   },
312 |   {
313 |     body: "nihil ea itaque libero illo officiis quo quo dicta inventore consequatur voluptas voluptatem corporis sed necessitatibus velit tempore rerum velit et temporibus",
314 |     email: "Maria@laurel.name",
315 |     id: 32,
316 |     name: "dolorem architecto ut pariatur quae qui suscipit",
317 |     postId: 7,
318 |     createdAt: "2024-03-21T13:46:00.518Z",
319 |     userName: "Maria",
320 |     isLiked: false,
321 |   },
322 |   {
323 |     body: "fugit harum quae vero libero unde tempore soluta eaque culpa sequi quibusdam nulla id et et necessitatibus",
324 |     email: "Jaeden.Towne@arlene.tv",
325 |     id: 33,
326 |     name: "voluptatum totam vel voluptate omnis",
327 |     postId: 7,
328 |     createdAt: "2024-03-19T17:11:09.542Z",
329 |     userName: "Jaeden.Towne",
330 |     isLiked: true,
331 |   },
332 |   {
333 |     body: "omnis temporibus quasi ab omnis facilis et omnis illum quae quasi aut minus iure ex rem ut reprehenderit in non fugit",
334 |     email: "Ethelyn.Schneider@emelia.co.uk",
335 |     id: 34,
336 |     name: "omnis nemo sunt ab autem",
337 |     postId: 7,
338 |     createdAt: "2024-03-13T17:32:41.470Z",
339 |     userName: "Ethelyn.Schneider",
340 |     isLiked: true,
341 |   },
342 |   {
343 |     body: "dolor mollitia quidem facere et vel est ut ut repudiandae est quidem dolorem sed atque rem quia aut adipisci sunt",
344 |     email: "Georgianna@florence.io",
345 |     id: 35,
346 |     name: "repellendus sapiente omnis praesentium aliquam ipsum id molestiae omnis",
347 |     postId: 7,
348 |     createdAt: "2024-03-24T15:22:04.533Z",
349 |     userName: "Georgianna",
350 |     isLiked: false,
351 |   },
352 |   {
353 |     body: "aut vero est dolor non aut excepturi dignissimos illo nisi aut quas aut magni quia nostrum provident magnam quas modi maxime voluptatem et molestiae",
354 |     email: "Raheem_Heaney@gretchen.biz",
355 |     id: 36,
356 |     name: "sit et quis",
357 |     postId: 8,
358 |     createdAt: "2024-03-21T01:29:49.701Z",
359 |     userName: "Raheem_Heaney",
360 |     isLiked: true,
361 |   },
362 |   {
363 |     body: "qui rem amet aut cumque maiores earum ut quia sit nam esse qui iusto aspernatur quis voluptas dolorem distinctio ex temporibus rem",
364 |     email: "Jacky@victoria.net",
365 |     id: 37,
366 |     name: "beatae veniam nemo rerum voluptate quam aspernatur",
367 |     postId: 8,
368 |     createdAt: "2024-03-23T21:45:11.524Z",
369 |     userName: "Jacky",
370 |     isLiked: true,
371 |   },
372 |   {
373 |     body: "unde voluptatem qui dicta vel ad aut eos error consequatur voluptatem adipisci doloribus qui est sit aut velit aut et ea ratione eveniet iure fuga",
374 |     email: "Piper@linwood.us",
375 |     id: 38,
376 |     name: "maiores dolores expedita",
377 |     postId: 8,
378 |     createdAt: "2024-03-18T17:06:30.409Z",
379 |     userName: "Piper",
380 |     isLiked: false,
381 |   },
382 |   {
383 |     body: "atque consequatur dolorem sunt adipisci autem et voluptatibus et quae necessitatibus rerum eaque aperiam nostrum nemo eligendi sed et beatae et inventore",
384 |     email: "Gaylord@russell.net",
385 |     id: 39,
386 |     name: "necessitatibus ratione aut ut delectus quae ut",
387 |     postId: 8,
388 |     createdAt: "2024-04-09T11:12:15.806Z",
389 |     userName: "Gaylord",
390 |     isLiked: true,
391 |   },
392 |   {
393 |     body: "quod minus alias quos perferendis labore molestias quae ut ut corporis deserunt vitae et quaerat ut et ullam unde asperiores cum voluptatem cumque",
394 |     email: "Clare.Aufderhar@nicole.ca",
395 |     id: 40,
396 |     name: "non minima omnis deleniti pariatur facere quibusdam at",
397 |     postId: 8,
398 |     createdAt: "2024-03-28T01:06:59.103Z",
399 |     userName: "Clare.Aufderhar",
400 |     isLiked: true,
401 |   },
402 |   {
403 |     body: "facere repudiandae vitae ea aut sed quo ut et facere nihil ut voluptates in saepe cupiditate accusantium numquam dolores inventore sint mollitia provident",
404 |     email: "Lucio@gladys.tv",
405 |     id: 41,
406 |     name: "voluptas deleniti ut",
407 |     postId: 9,
408 |     createdAt: "2024-03-22T17:06:31.565Z",
409 |     userName: "Lucio",
410 |     isLiked: false,
411 |   },
412 |   {
413 |     body: "aut culpa quaerat veritatis eos debitis aut repellat eius explicabo et officiis quo sint at magni ratione et iure incidunt quo sequi quia dolorum beatae qui",
414 |     email: "Shemar@ewell.name",
415 |     id: 42,
416 |     name: "nam qui et",
417 |     postId: 9,
418 |     createdAt: "2024-03-16T06:31:09.842Z",
419 |     userName: "Shemar",
420 |     isLiked: true,
421 |   },
422 |   {
423 |     body: "voluptatem ut possimus laborum quae ut commodi delectus in et consequatur in voluptas beatae molestiae est rerum laborum et et velit sint ipsum dolorem",
424 |     email: "Jackeline@eva.tv",
425 |     id: 43,
426 |     name: "molestias sint est voluptatem modi",
427 |     postId: 9,
428 |     createdAt: "2024-04-13T03:35:22.500Z",
429 |     userName: "Jackeline",
430 |     isLiked: true,
431 |   },
432 |   {
433 |     body: "qui sunt commodi sint vel optio vitae quis qui non distinctio id quasi modi dicta eos nihil sit inventore est numquam officiis",
434 |     email: "Marianna_Wilkinson@rupert.io",
435 |     id: 44,
436 |     name: "hic molestiae et fuga ea maxime quod",
437 |     postId: 9,
438 |     createdAt: "2024-04-10T20:55:17.270Z",
439 |     userName: "Marianna_Wilkinson",
440 |     isLiked: true,
441 |   },
442 |   {
443 |     body: "ipsum odio harum voluptatem sunt cumque et dolores nihil laboriosam neque commodi qui est quos numquam voluptatum corporis quo in vitae similique cumque tempore",
444 |     email: "Marcia@name.biz",
445 |     id: 45,
446 |     name: "autem illo facilis",
447 |     postId: 9,
448 |     createdAt: "2024-03-20T09:17:27.980Z",
449 |     userName: "Marcia",
450 |     isLiked: true,
451 |   },
452 |   {
453 |     body: "exercitationem et id quae cum omnis voluptatibus accusantium et quidem ut ipsam sint doloremque illo ex atque necessitatibus sed",
454 |     email: "Jeremy.Harann@waino.me",
455 |     id: 46,
456 |     name: "dignissimos et deleniti voluptate et quod",
457 |     postId: 10,
458 |     createdAt: "2024-03-19T16:15:09.379Z",
459 |     userName: "Jeremy.Harann",
460 |     isLiked: true,
461 |   },
462 |   {
463 |     body: "occaecati laudantium ratione non cumque earum quod non enim soluta nisi velit similique voluptatibus esse laudantium consequatur voluptatem rem eaque voluptatem aut ut et sit quam",
464 |     email: "Pearlie.Kling@sandy.com",
465 |     id: 47,
466 |     name: "rerum commodi est non dolor nesciunt ut",
467 |     postId: 10,
468 |     createdAt: "2024-03-23T02:52:43.115Z",
469 |     userName: "Pearlie.Kling",
470 |     isLiked: false,
471 |   },
472 |   {
473 |     body: "illum et alias quidem magni voluptatum ab soluta ea qui saepe corrupti hic et cum repellat esse est sint vel veritatis officia consequuntur cum",
474 |     email: "Manuela_Stehr@chelsie.tv",
475 |     id: 48,
476 |     name: "consequatur animi dolorem saepe repellendus ut quo aut tenetur",
477 |     postId: 10,
478 |     createdAt: "2024-03-17T19:48:40.535Z",
479 |     userName: "Manuela_Stehr",
480 |     isLiked: false,
481 |   },
482 |   {
483 |     body: "id est iure occaecati quam similique enim ab repudiandae non illum expedita quam excepturi soluta qui placeat perspiciatis optio maiores non doloremque aut iusto sapiente",
484 |     email: "Camryn.Weimann@doris.io",
485 |     id: 49,
486 |     name: "rerum placeat quae minus iusto eligendi",
487 |     postId: 10,
488 |     createdAt: "2024-03-19T00:19:09.366Z",
489 |     userName: "Camryn.Weimann",
490 |     isLiked: true,
491 |   },
492 |   {
493 |     body: "eum accusamus aut delectus architecto blanditiis quia sunt rerum harum sit quos quia aspernatur vel corrupti inventore animi dicta vel corporis",
494 |     email: "Kiana_Predovic@yasmin.io",
495 |     id: 50,
496 |     name: "dolorum soluta quidem ex quae occaecati dicta aut doloribus",
497 |     postId: 10,
498 |     createdAt: "2024-04-07T06:44:25.821Z",
499 |     userName: "Kiana_Predovic",
500 |     isLiked: false,
501 |   },
502 |   {
503 |     body: "perferendis omnis esse voluptate sit mollitia sed perferendis nemo nostrum qui vel quis nisi doloribus animi odio id quas",
504 |     email: "Laurie@lincoln.us",
505 |     id: 51,
506 |     name: "molestias et odio ut commodi omnis ex",
507 |     postId: 11,
508 |     createdAt: "2024-04-08T23:25:16.057Z",
509 |     userName: "Laurie",
510 |     isLiked: true,
511 |   },
512 |   {
513 |     body: "et enim voluptatem totam laudantium impedit nam labore repellendus enim earum aut consectetur mollitia fugit qui repellat expedita sunt aut fugiat vel illo quos aspernatur ducimus",
514 |     email: "Abigail.OConnell@june.org",
515 |     id: 52,
516 |     name: "esse autem dolorum",
517 |     postId: 11,
518 |     createdAt: "2024-04-04T23:42:29.116Z",
519 |     userName: "Abigail.OConnell",
520 |     isLiked: true,
521 |   },
522 |   {
523 |     body: "a at tempore molestiae odit qui dolores molestias dolorem et laboriosam repudiandae placeat quisquam autem aperiam consectetur maiores laboriosam nostrum",
524 |     email: "Laverne_Price@scotty.info",
525 |     id: 53,
526 |     name: "maiores alias necessitatibus aut non",
527 |     postId: 11,
528 |     createdAt: "2024-04-10T16:26:33.604Z",
529 |     userName: "Laverne_Price",
530 |     isLiked: false,
531 |   },
532 |   {
533 |     body: "et ipsa rem ullam cum pariatur similique quia cum ipsam est sed aut inventore provident sequi commodi enim inventore assumenda aut aut tempora possimus soluta quia consequatur modi illo",
534 |     email: "Kenton_Vandervort@friedrich.com",
535 |     id: 54,
536 |     name: "culpa eius tempora sit consequatur neque iure deserunt",
537 |     postId: 11,
538 |     createdAt: "2024-03-31T03:21:12.379Z",
539 |     userName: "Kenton_Vandervort",
540 |     isLiked: true,
541 |   },
542 |   {
543 |     body: "perferendis eaque labore laudantium ut molestiae soluta et vero odio non corrupti error pariatur consectetur et enim nam quia voluptatum non mollitia culpa facere voluptas suscipit veniam",
544 |     email: "Hayden_Olson@marianna.me",
545 |     id: 55,
546 |     name: "quas pariatur quia a doloribus",
547 |     postId: 11,
548 |     createdAt: "2024-03-18T03:36:32.560Z",
549 |     userName: "Hayden_Olson",
550 |     isLiked: true,
551 |   },
552 |   {
553 |     body: "cum esse odio nihil reiciendis illum quaerat est facere quia occaecati sit totam fugiat in beatae ut occaecati unde vitae nihil quidem consequatur",
554 |     email: "Vince_Crist@heidi.biz",
555 |     id: 56,
556 |     name: "et dolorem corrupti sed molestias",
557 |     postId: 12,
558 |     createdAt: "2024-03-16T23:52:42.755Z",
559 |     userName: "Vince_Crist",
560 |     isLiked: false,
561 |   },
562 |   {
563 |     body: "dolorem facere itaque fuga odit autem perferendis quisquam quis corrupti eius dicta repudiandae error esse itaque aut corrupti sint consequatur aliquid",
564 |     email: "Darron.Nikolaus@eulah.me",
565 |     id: 57,
566 |     name: "qui quidem sed",
567 |     postId: 12,
568 |     createdAt: "2024-04-03T04:17:51.554Z",
569 |     userName: "Darron.Nikolaus",
570 |     isLiked: true,
571 |   },
572 |   {
573 |     body: "veritatis qui nihil quia reprehenderit non ullam ea iusto consectetur nam voluptas ut temporibus tempore provident error eos et nisi et voluptate",
574 |     email: "Ezra_Abshire@lyda.us",
575 |     id: 58,
576 |     name: "sint minus reiciendis qui perspiciatis id",
577 |     postId: 12,
578 |     createdAt: "2024-03-30T04:33:14.846Z",
579 |     userName: "Ezra_Abshire",
580 |     isLiked: true,
581 |   },
582 | ];
583 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "expo-bottom-tab-anim",
 3 |   "version": "1.0.0",
 4 |   "main": "expo-router/entry",
 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.20",
13 |     "@react-navigation/native": "^6.1.17",
14 |     "@types/react": "~18.2.45",
15 |     "expo": "~50.0.14",
16 |     "expo-blur": "~12.9.2",
17 |     "expo-constants": "~15.4.5",
18 |     "expo-haptics": "~12.8.1",
19 |     "expo-image": "~1.10.6",
20 |     "expo-linking": "~6.2.2",
21 |     "expo-router": "~3.4.8",
22 |     "expo-status-bar": "~1.11.1",
23 |     "expo-system-ui": "~2.9.3",
24 |     "moment": "^2.30.1",
25 |     "react": "18.2.0",
26 |     "react-native": "0.73.6",
27 |     "react-native-gesture-handler": "~2.14.0",
28 |     "react-native-reanimated": "~3.6.2",
29 |     "react-native-safe-area-context": "4.8.2",
30 |     "react-native-screens": "~3.29.0",
31 |     "react-native-unistyles": "^2.5.0",
32 |     "typescript": "^5.3.0"
33 |   },
34 |   "devDependencies": {
35 |     "@babel/core": "^7.20.0"
36 |   },
37 |   "private": true
38 | }
39 | 


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


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