├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── README.md
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── components
    └── shared
    │   └── Post.js
├── data
    └── posts.js
├── home.png
├── icons.js
├── package.json
├── screens
    ├── home
    │   ├── components
    │   │   ├── Header.js
    │   │   └── Stories.js
    │   └── index.js
    ├── profile
    │   └── index.js
    ├── reel
    │   └── index.js
    ├── search
    │   └── index.js
    └── shop
    │   └── index.js
├── utils.js
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.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 | .idea
16 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import {StatusBar} from 'expo-status-bar';
  2 | import {NavigationContainer} from '@react-navigation/native';
  3 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
  4 | import {Image, StyleSheet, SafeAreaView} from "react-native";
  5 | 
  6 | const Tab = createBottomTabNavigator();
  7 | 
  8 | // Icons
  9 | import {HomeFilled, Home, Search, SearchFilled, Reel, ReelFilled, Shop, ShopFilled} from "./icons";
 10 | 
 11 | // screens
 12 | import HomeScreen from "./screens/home";
 13 | import SearchScreen from "./screens/search";
 14 | import ReelScreen from "./screens/reel";
 15 | import ShopScreen from "./screens/shop";
 16 | import ProfileScreen from "./screens/profile";
 17 | 
 18 | export default function App() {
 19 |     return (
 20 |         <NavigationContainer>
 21 |             <StatusBar style="dark" />
 22 |             <SafeAreaView style={{flex: 1}}>
 23 |                 <Tab.Navigator
 24 |                     screenOptions={{
 25 |                         headerShown: false,
 26 |                         tabBarStyle: {
 27 |                             backgroundColor: '#fff',
 28 |                             borderTopWidth: 1,
 29 |                             borderTopColor: '#DBDBDB',
 30 |                             height: 50,
 31 |                             paddingTop: 15,
 32 |                             paddingBottom: 15
 33 |                         },
 34 |                         tabBarShowLabel: false,
 35 |                         tabBarActiveTintColor: '#000',
 36 |                         tabBarInactiveTintColor: '#333'
 37 |                     }}
 38 |                 >
 39 |                     <Tab.Screen
 40 |                         name="home"
 41 |                         component={HomeScreen}
 42 |                         options={{
 43 |                             tabBarIcon: ({focused, color}) => {
 44 |                                 if (focused)
 45 |                                     return <HomeFilled fill={color}/>
 46 |                                 return <Home fill={color}/>
 47 |                             }
 48 |                         }}
 49 |                     />
 50 |                     <Tab.Screen
 51 |                         name="search"
 52 |                         component={SearchScreen}
 53 |                         options={{
 54 |                             tabBarIcon: ({focused, color}) => {
 55 |                                 if (focused)
 56 |                                     return <SearchFilled fill={color}/>
 57 |                                 return <Search fill={color}/>
 58 |                             }
 59 |                         }}
 60 |                     />
 61 |                     <Tab.Screen
 62 |                         name="reel"
 63 |                         component={ReelScreen}
 64 |                         options={{
 65 |                             tabBarIcon: ({focused, color}) => {
 66 |                                 if (focused)
 67 |                                     return <ReelFilled fill={color}/>
 68 |                                 return <Reel fill={color}/>
 69 |                             }
 70 |                         }}
 71 |                     />
 72 |                     <Tab.Screen
 73 |                         name="shop"
 74 |                         component={ShopScreen}
 75 |                         options={{
 76 |                             tabBarIcon: ({focused, color}) => {
 77 |                                 if (focused)
 78 |                                     return <ShopFilled fill={color}/>
 79 |                                 return <Shop fill={color}/>
 80 |                             }
 81 |                         }}
 82 |                     />
 83 |                     <Tab.Screen
 84 |                         name="profile"
 85 |                         component={ProfileScreen}
 86 |                         options={{
 87 |                             tabBarIcon: ({focused, color}) => {
 88 |                                 return <Image
 89 |                                     style={{
 90 |                                         ...styles.avatar,
 91 |                                         borderWidth: focused ? 1 : 0
 92 |                                     }}
 93 |                                     source={{
 94 |                                         uri: 'https://pbs.twimg.com/profile_images/1469715048436277258/141ZXcHO_400x400.jpg',
 95 |                                     }}
 96 |                                 />
 97 |                             }
 98 |                         }}
 99 |                     />
100 |                 </Tab.Navigator>
101 |             </SafeAreaView>
102 |         </NavigationContainer>
103 |     );
104 | }
105 | 
106 | const styles = StyleSheet.create({
107 |     avatar: {
108 |         width: 24,
109 |         height: 24,
110 |         borderRadius: 24,
111 |         borderColor: '#000'
112 |     }
113 | })
114 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## React Native Instagram UI Clone
 2 | 
 3 | Kendimi geliştirmek için boş vakitlerimde popüler uygulamaların UI clonelarını çıkarmaya çalışacağım.
 4 | 
 5 | Bu süreçte çok şey öğreneceğime eminim :) Şimdilik sadece anasayfayı tasarladım, yavaş yavaş diğer sayfaları ve getirdiği challengeları yapmayı deneyeceğim.
 6 | 
 7 | #### Anasayfa Demo
 8 | 
 9 | ![](home.png)
10 | 


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


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tayfunerbilen/react-native-instagram-ui-clone/1cdb93c1e3757efb8fa34099015aaa7c5ac90ecc/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tayfunerbilen/react-native-instagram-ui-clone/1cdb93c1e3757efb8fa34099015aaa7c5ac90ecc/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tayfunerbilen/react-native-instagram-ui-clone/1cdb93c1e3757efb8fa34099015aaa7c5ac90ecc/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tayfunerbilen/react-native-instagram-ui-clone/1cdb93c1e3757efb8fa34099015aaa7c5ac90ecc/assets/splash.png


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


--------------------------------------------------------------------------------
/components/shared/Post.js:
--------------------------------------------------------------------------------
  1 | import {View, Text, Image, Dimensions, StyleSheet} from "react-native";
  2 | import {useState} from "react";
  3 | import {Heart, Comment, Message, More, Bookmark} from "../../icons";
  4 | import SeeMore from 'react-native-see-more-inline';
  5 | import { dayjs } from "../../utils"
  6 | 
  7 | function Post({post}) {
  8 | 
  9 |     const [width, setWidth] = useState(0)
 10 |     const [height, setHeight] = useState(0)
 11 | 
 12 |     Image.getSize(post.image, (w, h) => {
 13 |         const screenWidth = Dimensions.get('window').width
 14 |         const scaleFactor = w / screenWidth
 15 |         const imageHeight = h / scaleFactor
 16 |         setWidth(screenWidth)
 17 |         setHeight(imageHeight)
 18 |     })
 19 | 
 20 |     return (
 21 |         <View style={styles.post}>
 22 |             <View style={styles.header}>
 23 |                 <View style={styles.user}>
 24 |                     <Image
 25 |                         style={styles.avatar}
 26 |                         source={{
 27 |                             uri: post.user.avatar
 28 |                         }}
 29 |                     />
 30 |                     <Text style={styles.username}>{post.user.name}</Text>
 31 |                 </View>
 32 |                 <More fill="#262626"/>
 33 |             </View>
 34 |             <Image
 35 |                 style={{
 36 |                     ...styles.image,
 37 |                     width,
 38 |                     height
 39 |                 }}
 40 |                 source={{
 41 |                     uri: post.image
 42 |                 }}
 43 |             />
 44 |             <View style={styles.inner}>
 45 |                 <View style={styles.actions}>
 46 |                     <View style={styles.leftActions}>
 47 |                         <Heart fill="#000" style={styles.icon}/>
 48 |                         <Comment fill="#000" size={22} style={styles.icon}/>
 49 |                         <Message fill="#000" size={22}/>
 50 |                     </View>
 51 |                     <Bookmark fill="#000"/>
 52 |                 </View>
 53 |                 <View style={{marginBottom: 6}}>
 54 |                     <Text style={styles.likes}>{post.likes} likes</Text>
 55 |                 </View>
 56 |                 <SeeMore numberOfLines={3}>
 57 |                     <Text style={styles.postUser}>{post.user.name}</Text>
 58 |                     {'  '}
 59 |                     <Text style={styles.description}>
 60 |                         {post.description.split(' ').map(str => {
 61 |                             if (str.includes('#')) {
 62 |                                 return <Text style={styles.hashtag}>{str} {' '}</Text>
 63 |                             }
 64 |                             return str + ' '
 65 |                         })}
 66 |                     </Text>
 67 |                 </SeeMore>
 68 |                 <View style={{marginTop: 7}}>
 69 |                     <Text style={styles.comments}>View all {post.comments} comments</Text>
 70 |                 </View>
 71 |                 <View style={{marginTop: 7, flexDirection: 'row'}}>
 72 |                     <Text style={styles.time}>
 73 |                         {dayjs(post.date).fromNow()}
 74 |                     </Text>
 75 |                     <Text style={styles.translation}>See Translation</Text>
 76 |                 </View>
 77 |             </View>
 78 |         </View>
 79 |     )
 80 | }
 81 | 
 82 | export default Post
 83 | 
 84 | const styles = StyleSheet.create({
 85 |     header: {
 86 |         flexDirection: 'row',
 87 |         alignItems: 'center',
 88 |         justifyContent: 'space-between',
 89 |         paddingVertical: 15,
 90 |         paddingHorizontal: 10
 91 |     },
 92 |     user: {
 93 |         flexDirection: 'row',
 94 |         alignItems: 'center'
 95 |     },
 96 |     avatar: {
 97 |         width: 30,
 98 |         height: 30,
 99 |         borderRadius: 30,
100 |         marginRight: 10
101 |     },
102 |     image: {},
103 |     username: {
104 |         fontSize: 14,
105 |         fontWeight: '500'
106 |     },
107 |     actions: {
108 |         flexDirection: 'row',
109 |         justifyContent: 'space-between',
110 |         alignItems: 'center',
111 |         paddingVertical: 10
112 |     },
113 |     inner: {
114 |         paddingHorizontal: 15
115 |     },
116 |     likes: {
117 |         fontWeight: '600',
118 |         fontSize: 14
119 |     },
120 |     postUser: {
121 |         fontWeight: '600',
122 |         fontSize: 14
123 |     },
124 |     leftActions: {
125 |         flexDirection: 'row',
126 |         alignItems: 'center'
127 |     },
128 |     icon: {
129 |         marginRight: 15
130 |     },
131 |     description: {
132 |         fontSize: 14,
133 |         fontWeight: 'normal'
134 |     },
135 |     post: {
136 |         marginBottom: 20
137 |     },
138 |     comments: {
139 |         opacity: 0.5
140 |     },
141 |     time: {
142 |         fontSize: 12,
143 |         opacity: 0.5
144 |     },
145 |     translation: {
146 |         fontSize: 12,
147 |         fontWeight: '600',
148 |         paddingLeft: 10
149 |     },
150 |     hashtag: {
151 |         color: '#00376b'
152 |     }
153 | })
154 | 


--------------------------------------------------------------------------------
/data/posts.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |     {
 3 |         id: 1,
 4 |         description: `Saniye değerinizi "saat:dakika:saniye" formatına kolayca formatlamanız için bir ipucu, dilerseniz "11, 8" yerine "14, 5" yazarak sadece "dakika:saniye" formatını da döndürebilirsiniz.
 5 | 
 6 | Video ya da müzik oynatıcısı yazarken mutlaka ihtiyaç duyarsınız, o zamanlarda bu postu hatırlayın :)
 7 | 
 8 | #javascript #time`,
 9 |         image: 'https://instagram.fada1-15.fna.fbcdn.net/v/t51.2885-15/fr/e15/s1080x1080/269049551_1381361122320329_5806265218763602481_n.jpg?_nc_ht=instagram.fada1-15.fna.fbcdn.net&_nc_cat=105&_nc_ohc=K9Xcvc_ujhwAX90WrVJ&tn=kHwNFBbr5Fks2f5B&edm=AP_V10EBAAAA&ccb=7-4&oh=00_AT9gHKsOp_3GwPy5C1C4VbCXSUXRXRBTlp7yhVrW-_1SFg&oe=61CB69BB&_nc_sid=4f375e',
10 |         likes: 309,
11 |         comments: 4,
12 |         date: '2021-12-24 00:10:14',
13 |         user: {
14 |             name: 'tayfunerbilen',
15 |             avatar: 'https://pbs.twimg.com/profile_images/1469715048436277258/141ZXcHO_400x400.jpg'
16 |         },
17 |     },
18 |     {
19 |         id: 2,
20 |         description: `hiçbir şey göründüğü gibi değil :)`,
21 |         image: 'https://instagram.fada1-13.fna.fbcdn.net/v/t51.2885-15/e15/s640x640/259056325_1839402789571919_2029569847025834861_n.jpg?_nc_ht=instagram.fada1-13.fna.fbcdn.net&_nc_cat=111&_nc_ohc=qQYX4DBndSAAX-OpeUF&edm=AIQHJ4wBAAAA&ccb=7-4&ig_cache_key=MjcxMTc3NTQ2MTcxMzUzOTQwOQ%3D%3D.2-ccb7-4&oh=00_AT94zom2qS4GHVm4ECHyindZl3RXExCfSY-BB3gs4gIXpw&oe=61CB26E2&_nc_sid=7b02f1',
22 |         likes: 101,
23 |         comments: 23,
24 |         date: '2021-12-23 14:22:13',
25 |         user: {
26 |             name: 'prototurk.official',
27 |             avatar: 'https://instagram.fada1-12.fna.fbcdn.net/v/t51.2885-19/s150x150/84282248_2585093868401217_3175104158965432320_n.jpg?_nc_ht=instagram.fada1-12.fna.fbcdn.net&_nc_cat=109&_nc_ohc=DkmPVqQp7ngAX-kkJdi&edm=AP_V10EBAAAA&ccb=7-4&oh=00_AT8wncZepFvRhXXDF9_yBMxmumOxgBP5wbkc7qPs_AxZIA&oe=61CB01E1&_nc_sid=4f375e'
28 |         },
29 |     },
30 |     {
31 |         id: 3,
32 |         description: `Görsellerin üzerinde transparan bir renk ekleyip onları biraz daha açık ya da koyu yapmak istediğinizde ::before ile eklemek yerine 2. bir renk olarak tanımlayıp kullanabilirsiniz.
33 | 
34 | 1. resim -> orijinal
35 | 2. resim -> siyahın %60 transparan hali
36 | 3. resim -> beyazın %80 transparan hali`,
37 |         image: 'https://instagram.fada1-15.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s750x750/245365485_577611403439334_2523063214361865428_n.jpg?_nc_ht=instagram.fada1-15.fna.fbcdn.net&_nc_cat=106&_nc_ohc=UqEaPb0UX64AX-EhF04&edm=AP_V10EBAAAA&ccb=7-4&oh=00_AT_-2uXHoAFvfR4p-tRHxvJju6MnkYiM8N8E4h3XXNkumg&oe=61CB4E59&_nc_sid=4f375e',
38 |         likes: 101,
39 |         comments: 23,
40 |         date: '2021-12-21 14:22:13',
41 |         user: {
42 |             name: 'prototurk.official',
43 |             avatar: 'https://instagram.fada1-12.fna.fbcdn.net/v/t51.2885-19/s150x150/84282248_2585093868401217_3175104158965432320_n.jpg?_nc_ht=instagram.fada1-12.fna.fbcdn.net&_nc_cat=109&_nc_ohc=DkmPVqQp7ngAX-kkJdi&edm=AP_V10EBAAAA&ccb=7-4&oh=00_AT8wncZepFvRhXXDF9_yBMxmumOxgBP5wbkc7qPs_AxZIA&oe=61CB01E1&_nc_sid=4f375e'
44 |         },
45 |     }
46 | ]
47 | 


--------------------------------------------------------------------------------
/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tayfunerbilen/react-native-instagram-ui-clone/1cdb93c1e3757efb8fa34099015aaa7c5ac90ecc/home.png


--------------------------------------------------------------------------------
/icons.js:
--------------------------------------------------------------------------------
  1 | import Svg, {Path, Circle, Line, Rect, Polygon, Mask} from 'react-native-svg';
  2 | 
  3 | function Logo({size = 24, fill, ...props}) {
  4 |     return (
  5 |         <Svg height={size / 2.8} role="img" viewBox="0 0 840 300" width={size} {...props}>
  6 |             <Path
  7 |                 fill="#262626"
  8 |                 d="m 64.760239,49.107948 c -16.2103,6.7854 -34.030801,25.955 -39.659101,50.016996 -7.1278,30.487496 22.534301,43.379696 24.967201,39.152496 2.8635,-4.967 -5.3151,-6.6467 -6.9986,-22.465 -2.1758,-20.430692 7.3224,-43.259692 19.2762,-53.276392 2.222,-1.861 2.1163,0.7292 2.1163,5.5203 0,8.5676 -0.4734,85.479502 -0.4734,101.531102 0,21.7198 -0.8971,28.5785 -2.5083,35.3558 -1.6325,6.8681 -4.257,11.5088 -2.2683,13.2964 2.2219,1.9996 11.7086,-2.7567 17.2006,-10.4218 6.5857,-9.1931 8.891,-20.2335 9.3049,-32.2232 0.4999,-14.4532 0.4786,-37.38741 0.4999,-50.46891 0.02,-11.9977 0.2021,-47.129592 -0.2103,-68.249592 -0.1011,-5.1803 -14.4679,-10.6152 -21.2479,-7.7745 M 640.38672,150.75505 c -0.5226,11.2916 -3.0221,20.1175 -6.1242,26.3429 -6.0055,12.052 -18.4671,15.7943 -23.7581,-1.5309 -2.8834,-9.444 -3.0181,-25.2164 -0.9451,-38.39521 2.1102,-13.4255 8.0024,-23.5648 17.7592,-22.6504 9.6235,0.9039 14.128,13.3042 13.0682,36.23311 z m -162.23548,70.0559 c -0.1306,18.7617 -3.0834,35.2118 -9.4155,39.9896 -8.9809,6.7747 -21.0519,1.6929 -18.5524,-11.9977 2.2116,-12.1149 12.6709,-24.4873 27.9933,-39.6044 0,0 0.032,3.4474 -0.025,11.6125 z m -2.4528,-70.1652 c -0.5492,10.2844 -3.2154,20.616 -6.1242,26.4536 -6.0042,12.0519 -18.5564,15.8196 -23.7581,-1.5309 -3.5566,-11.8546 -2.7048,-27.1975 -0.9451,-36.86491 2.2835,-12.543 7.8185,-24.1794 17.7592,-24.1794 9.6648,0 14.4306,10.6033 13.0682,36.12241 z m -93.9833,-0.1573 c -0.5892,10.8922 -2.7141,19.9975 -6.1241,26.6109 -6.1695,11.969 -18.3751,15.7649 -23.7581,-1.5309 -3.8806,-12.4716 -2.5595,-29.47701 -0.9452,-38.66331 2.3956,-13.632 8.3944,-23.2968 17.7593,-22.381 9.6195,0.9398 14.2959,13.3028 13.0681,35.96511 z m 430.70378,12.7226 c -2.3516,0 -3.4247,2.4239 -4.3125,6.504 -3.0794,14.1866 -6.3161,17.3899 -10.49,17.3899 -4.6631,0 -8.853,-7.0246 -9.9301,-21.0866 -0.8465,-11.0572 -0.7105,-31.41391 0.372,-51.66341 0.2212,-4.1605 -0.9265,-8.277 -12.0857,-12.3309 -4.8018,-1.7437 -11.7818,-4.311196 -15.2571,4.0779 -9.8194,23.7007 -13.6614,42.51711 -14.5652,50.16101 -0.047,0.3956 -0.5319,0.4764 -0.6172,-0.4479 -0.5759,-6.1222 -1.8636,-17.24741 -2.0236,-40.62151 -0.031,-4.5605 -0.9971,-8.4424 -6.0308,-11.6205 -3.2661,-2.0622 -13.1842,-5.709496 -16.7555,-1.3704 -3.0941,3.5487 -6.6774,13.0988 -10.4007,24.4193 -3.026,9.2009 -5.1336,15.4251 -5.1336,15.4251 0,0 0.04,-24.8259 0.076,-34.2428 0.016,-3.5526 -2.4209,-4.7364 -3.1554,-4.951 -3.3074,-0.9599 -9.8235,-2.5635 -12.5896,-2.5635 -3.4127,0 -4.2485,1.9076 -4.2485,4.6871 0,0.3639 -0.5386,32.6857 -0.5386,55.28661 0,0.9817 0,2.0528 0.01,3.1906 -1.8876,10.3876 -8.0091,24.4886 -14.6665,24.4886 -6.6654,0 -9.8101,-5.8952 -9.8101,-32.839 0,-15.71831 0.4719,-22.55301 0.7039,-33.92141 0.1346,-6.5481 0.3946,-11.5765 0.3799,-12.7176 -0.049,-3.4993 -6.1001,-5.263 -8.9156,-5.9148 -2.8288,-0.6573 -5.287,-0.9119 -7.2066,-0.8026 -2.7168,0.1533 -4.6391,1.9357 -4.6391,4.3872 0,1.3144 0.015,3.8139 0.015,3.8139 -3.4993,-5.4989 -9.1275,-9.3262 -12.8722,-10.435296 -10.086,-2.995396 -20.6107,-0.3413 -28.5491,10.767296 -6.3095,8.8263 -10.11268,18.823 -11.60978,33.1856 -1.0944,10.50011 -0.7372,21.14791 1.2078,30.15281 -2.3502,10.161 -6.7134,14.3239 -11.4911,14.3239 -6.936,0 -11.9644,-11.3212 -11.3805,-30.9007 0.3852,-12.87821 2.9621,-21.91581 5.7789,-34.99061 1.2011,-5.5736 0.2253,-8.4917 -2.2223,-11.2885 -2.2449,-2.5648 -7.0279,-3.8752 -13.904,-2.2635 -4.8977,1.1491 -11.9003,2.3848 -18.3071,3.334 0,0 0.3866,-1.5424 0.7039,-4.2618 1.6663,-14.261292 -13.8307,-13.104192 -18.7751,-8.549096 -2.9514,2.719496 -4.9604,5.926896 -5.7229,11.693796 -1.2091,9.1516 6.2548,13.4681 6.2548,13.4681 -2.4489,11.2098 -8.4517,25.85361 -14.6492,36.44091 -3.3193,5.6724 -5.8588,9.8757 -9.1369,14.3439 -0.012,-1.6638 -0.021,-3.3274 -0.027,-4.9834 -0.075,-23.56751 0.2386,-42.11591 0.3772,-48.80131 0.1347,-6.548 0.3973,-11.4431 0.3826,-12.5842 -0.037,-2.5595 -1.5317,-3.526 -4.6404,-4.7498 -2.7488,-1.0824 -5.9989,-1.8316 -9.3702,-2.0929 -4.2552,-0.3319 -6.8187,1.925 -6.7521,4.5938 0.013,0.5039 0.013,3.598 0.013,3.598 -3.4994,-5.499 -9.1276,-9.3262 -12.8722,-10.435396 -10.0861,-2.994096 -20.6107,-0.3399 -28.5492,10.767296 -6.3081,8.8263 -10.4393,21.2119 -11.6098,33.0763 -1.0904,11.05771 -0.8891,20.45471 0.5973,28.37051 -1.6037,7.9266 -6.2148,16.2156 -11.4285,16.2156 -6.6654,0 -10.458,-5.8953 -10.458,-32.839 0,-15.71831 0.4719,-22.55301 0.7039,-33.92021 0.1346,-6.548 0.3946,-11.5777 0.3799,-12.7175 -0.049,-3.4993 -6.1002,-5.263 -8.9156,-5.9162 -2.9461,-0.6812 -5.4896,-0.9318 -7.4426,-0.7879 -2.5768,0.192 -4.3885,2.4996 -4.3885,4.2206 l 0,3.9659 c -3.4993,-5.499 -9.1275,-9.3262 -12.8722,-10.435396 -10.086,-2.994096 -20.552,-0.2972 -28.5491,10.767296 -5.215,7.2146 -9.4369,15.2131 -11.6098,32.919 -0.6279,5.11671 -0.9052,9.90811 -0.8692,14.38661 -2.0796,12.7179 -11.2645,27.376 -18.7777,27.376 -4.3965,0 -8.5837,-8.5275 -8.5837,-26.7015 0,-24.20871 1.4984,-58.676706 1.7517,-61.998702 0,0 9.4928,-0.1613 11.3312,-0.1827 4.735,-0.052 9.0236,0.06 15.3303,-0.2626 3.1634,-0.1613 6.2108,-11.5138 2.9461,-12.9188 -1.4797,-0.6359 -11.9377,-1.1931 -16.0835,-1.2811 -3.486,-0.079 -13.1908,-0.7972 -13.1908,-0.7972 0,0 0.8705,-22.8783 1.0731,-25.2951 0.172,-2.0143 -2.4342,-3.0514 -3.9286,-3.6807 -3.6339,-1.537 -6.8853,-2.2729 -10.7392,-3.0674 -5.3244,-1.0984 -7.7399,-0.024 -8.2118,4.4698 -0.7105,6.8201 -1.0785,26.7962 -1.0785,26.7962 -3.9072,0 -17.254,-0.7638 -21.1625,-0.7638 -3.6313,0 -7.5506,15.617 -2.5302,15.8089 5.7762,0.224 15.8423,0.4173 22.5156,0.6186 0,0 -0.2972,35.035892 -0.2972,45.852492 0,1.1508 0.01,2.259 0.012,3.3343 -3.6727,19.14301 -16.6088,29.48361 -16.6088,29.48361 2.7781,-12.6642 -2.8968,-22.1744 -13.1188,-30.22481 -3.766,-2.9666 -11.2006,-8.5828 -19.519,-14.7372 0,0 4.8178,-4.7484 9.0903,-14.3012 3.0274,-6.7667 3.1581,-14.5106 -4.2725,-16.218196 -12.2777,-2.823496 -22.401,6.193396 -25.4205,15.819596 -2.3395,7.4572 -1.0917,12.9908 3.4914,18.739 0.3346,0.42 0.6972,0.8492 1.0718,1.2811 -2.7715,5.3419 -6.5788,12.5339 -9.8035,18.11121 -8.9503,15.485 -15.7116,27.7333 -20.8213,27.7333 -4.0846,0 -4.0299,-12.4352 -4.0299,-24.078 0,-10.03711 0.7412,-25.12721 1.3331,-40.75081 0.1959,-5.167 -2.3876,-8.1105 -6.7187,-10.7766 -2.6315,-1.6197 -8.2478,-4.8044 -11.5005,-4.8044 -4.8686,0 -18.915,0.6625 -32.1871,39.0538 -1.6726,4.8389 -4.9585,13.65601 -4.9585,13.65601 l 0.2828,-46.16711 c 0,-1.0824 -0.5765,-2.1289 -1.8965,-2.8448 -2.2365,-1.2144 -8.2099,-3.6979 -13.5214,-3.6979 -2.5307,0 -3.7936,1.1771 -3.7936,3.5233 l -0.4633,72.22881 c 0,5.488 0.1431,11.8903 0.6857,14.6905 0.5406,2.8037 1.4164,5.0845 2.5011,6.4415 1.0831,1.3544 2.336,2.3876 4.4017,2.814 1.9226,0.3958 12.4503,1.7477 12.9975,-2.2755 0.6556,-4.8215 0.6807,-10.0366 6.2088,-29.4864 8.6061,-30.28081 19.8269,-45.05531 25.1018,-50.30231 0.9223,-0.9171 1.9754,-0.9718 1.9247,0.5292 -0.2252,6.6388 -1.0171,23.2276 -1.5502,37.32091 -1.4289,37.7154 5.4322,44.706 15.2371,44.706 7.5012,0 18.0752,-7.4533 29.4103,-26.3202 7.0667,-11.7576 13.928,-23.2862 18.8577,-31.59531 3.4354,3.1802 7.2906,6.60301 11.1432,10.25951 8.9529,8.4973 11.8924,16.5715 9.9421,24.2313 -1.4917,5.8557 -7.1093,11.8904 -17.1074,6.0249 -2.9141,-1.7112 -4.1579,-3.0333 -7.088,-4.9625 -1.5743,-1.0364 -3.9779,-1.3462 -5.4189,-0.2605 -3.7433,2.8224 -5.8842,6.4123 -7.1066,10.8568 -1.1891,4.3247 3.142,6.6108 7.6318,8.6104 3.8659,1.721 12.175,3.2805 17.474,3.4581 20.6467,0.6905 37.1862,-9.9689 48.6999,-37.4648 2.061,23.7461 10.8326,37.1835 26.0724,37.1835 10.1887,0 20.404,-13.1698 24.8712,-26.1256 1.2824,5.2812 3.1807,9.8737 5.6322,13.7573 11.7431,18.6058 34.524,14.6012 45.9672,-1.1981 3.538,-4.8819 4.0765,-6.6362 4.0765,-6.6362 1.669,14.9184 13.6827,20.1308 20.5614,20.1308 7.7039,0 15.6583,-3.642 21.2332,-16.1929 0.6533,1.3621 1.3664,2.6629 2.145,3.896 11.743,18.6058 34.524,14.6012 45.9671,-1.1981 0.5399,-0.7411 1.0078,-1.4134 1.4171,-2.0168 l 0.3359,9.7991 c 0,0 -6.5281,5.9885 -10.5353,9.6622 -17.6366,16.1809 -31.0473,28.4572 -32.0338,42.7531 -1.2664,18.2285 13.5174,25.0032 24.7019,25.891 11.8777,0.9426 22.0491,-5.6187 28.3012,-14.8012 5.4989,-8.0823 9.0983,-25.4777 8.8343,-42.6584 -0.1053,-6.8799 -0.2786,-15.6277 -0.4146,-25.0045 6.1988,-7.1986 13.1828,-16.2969 19.6136,-26.9468 7.008,-11.6061 14.5185,-27.19211 18.3644,-39.32181 0,0 6.5255,0.056 13.4894,-0.3999 2.2276,-0.1453 2.8675,0.3092 2.4556,1.9423 -0.4973,1.9729 -8.7983,33.99081 -1.2225,55.32001 5.1857,14.6012 16.8755,19.2989 23.8061,19.2989 8.1131,0 15.8743,-6.1269 20.03348,-15.225 0.5012,1.0143 1.0251,1.9958 1.597,2.9019 11.7431,18.6058 34.4441,14.5772 45.9672,-1.1981 2.6008,-3.5592 4.0765,-6.6362 4.0765,-6.6362 2.4729,15.4397 14.4799,20.2094 21.3572,20.2094 7.164,0 13.9627,-2.9369 19.479,-15.9889 0.2306,5.7468 0.5932,10.4459 1.1664,11.9274 0.3493,0.906 2.3849,2.0434 3.8659,2.5927 6.5534,2.4302 13.2375,1.281 15.7103,0.7811 1.713,-0.3467 3.0488,-1.721 3.2314,-5.2698 0.4799,-9.3181 0.1853,-24.9739 3.0101,-36.609 4.7418,-19.52691 9.1649,-27.10141 11.2632,-30.85131 1.1744,-2.101 2.4995,-2.4476 2.5475,-0.224 0.099,4.4991 0.3226,17.7113 2.1596,35.46251 1.349,13.0554 3.1514,20.772 4.5364,23.2142 3.9526,6.984 8.8343,7.3147 12.8096,7.3147 2.5288,0 7.8171,-0.6988 7.3439,-5.1432 -0.2306,-2.1663 0.1733,-15.5544 4.8484,-34.792 3.0527,-12.56281 8.1424,-23.91411 9.9781,-28.06391 0.6772,-1.5304 0.9918,-0.324 0.9811,-0.089 -0.3866,8.6517 -1.2544,36.95031 2.2702,52.42731 4.7778,20.9666 18.5991,23.3128 23.4155,23.3128 10.282,0 18.6911,-7.8214 21.5239,-28.4012 0.6825,-4.9526 -0.328,-8.7768 -3.3554,-8.7768"
  9 |             />
 10 |         </Svg>
 11 |     )
 12 | }
 13 | 
 14 | function Home({size = 24, fill, ...props}) {
 15 |     return (
 16 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
 17 |             <Path
 18 |                 d="M9.005 16.545a2.997 2.997 0 012.997-2.997h0A2.997 2.997 0 0115 16.545V22h7V11.543L12 2 2 11.543V22h7.005z"
 19 |                 fill="none"
 20 |                 stroke={fill}
 21 |                 strokeLinejoin="round"
 22 |                 strokeWidth="2"
 23 |             />
 24 |         </Svg>
 25 |     )
 26 | }
 27 | 
 28 | function HomeFilled({size = 24, ...props}) {
 29 |     return (
 30 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
 31 |             <Path
 32 |                 d="M22 23h-6.001a1 1 0 01-1-1v-5.455a2.997 2.997 0 10-5.993 0V22a1 1 0 01-1 1H2a1 1 0 01-1-1V11.543a1.002 1.002 0 01.31-.724l10-9.543a1.001 1.001 0 011.38 0l10 9.543a1.002 1.002 0 01.31.724V22a1 1 0 01-1 1z"
 33 |             />
 34 |         </Svg>
 35 |     )
 36 | }
 37 | 
 38 | function Search({size = 24, fill, ...props}) {
 39 |     return (
 40 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
 41 |             <Path d="M19 10.5A8.5 8.5 0 1110.5 2a8.5 8.5 0 018.5 8.5z" fill="none" stroke={fill}
 42 |                   strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
 43 |             <Line fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
 44 |                   x1="16.511" x2="22" y1="16.511" y2="22"/>
 45 |         </Svg>
 46 |     )
 47 | }
 48 | 
 49 | function SearchFilled({size = 24, ...props}) {
 50 |     return (
 51 |         <Svg height={size} role="img" viewBox="0 0 48 48" width={size} {...props}>
 52 |             <Path
 53 |                 d="M47.6 44L35.8 32.2C38.4 28.9 40 24.6 40 20 40 9 31 0 20 0S0 9 0 20s9 20 20 20c4.6 0 8.9-1.6 12.2-4.2L44 47.6c.6.6 1.5.6 2.1 0l1.4-1.4c.6-.6.6-1.6.1-2.2zM20 35c-8.3 0-15-6.7-15-15S11.7 5 20 5s15 6.7 15 15-6.7 15-15 15z"/>
 54 |         </Svg>
 55 |     )
 56 | }
 57 | 
 58 | function Reel({size = 24, fill, ...props}) {
 59 |     return (
 60 |         <Svg height={size} role="img" viewBox="0 0 23 23" width={size} {...props}>
 61 |             <Rect x="1.5" y="1.92661" width="20" height="20" rx="6" stroke={fill} strokeWidth="2"/>
 62 |             <Path
 63 |                 d="M2.24609 7.03775H9.57943H20.754M15.6905 6.51394L14.4683 4.4187L13.4207 2.67267M9.40482 6.68854L8.1826 4.5933L7.13498 2.84727"
 64 |                 stroke={fill} strokeWidth="2" strokeLinecap="square"/>
 65 |             <Path
 66 |                 d="M9.0961 11.6735C9.11374 10.9247 9.91799 10.4603 10.5753 10.8195L15.1153 13.3C15.8001 13.6741 15.8116 14.6534 15.1359 15.0436L10.474 17.7351C9.79824 18.1253 8.95591 17.6256 8.97428 16.8455L9.0961 11.6735Z"
 67 |                 fill={fill}/>
 68 |         </Svg>
 69 |     )
 70 | }
 71 | 
 72 | function ReelFilled({size = 24, fill, ...props}) {
 73 |     return (
 74 |         <Svg height={size} role="img" viewBox="0 0 23 23" width={size} {...props}>
 75 |             <Mask fill="white" id="path1">
 76 |                 <Path fillRule="evenodd" clipRule="evenodd"
 77 |                       d="M7.89844 0.539825H11.6329L11.7068 0.664464L14.0048 4.53885L14.6535 5.65095H10.5813L9.44654 3.70559L7.63171 0.544813C7.72021 0.541498 7.80913 0.539825 7.89844 0.539825ZM1.15625 5.65095C1.76946 3.45758 3.42421 1.69904 5.55365 0.942198L7.71382 4.70444L7.7138 4.70445L7.71726 4.71038L8.26593 5.65095H1.15625ZM0.898438 15.5398V7.65095H9.4326L9.44335 7.6694L9.47497 7.65095H9.97787H22.8984V15.5398C22.8984 19.4058 19.7644 22.5398 15.8984 22.5398H7.89844C4.03244 22.5398 0.898438 19.4058 0.898438 15.5398ZM15.8984 0.539825C19.1099 0.539825 21.8163 2.70252 22.6406 5.65095H16.9689L16.9528 5.62327L15.7305 3.52804L15.7306 3.52802L15.7268 3.52177L13.9582 0.539825H15.8984ZM10.9737 10.4327C10.3164 10.0735 9.51217 10.5379 9.49454 11.2867L9.37272 16.4588C9.35434 17.2388 10.1967 17.7385 10.8724 17.3483L15.5343 14.6568C16.2101 14.2666 16.1985 13.2873 15.5138 12.9132L10.9737 10.4327Z"/>
 78 |             </Mask>
 79 |             <Path fillRule="evenodd" clipRule="evenodd"
 80 |                   d="M7.89844 0.539825H11.6329L11.7068 0.664464L14.0048 4.53885L14.6535 5.65095H10.5813L9.44654 3.70559L7.63171 0.544813C7.72021 0.541498 7.80913 0.539825 7.89844 0.539825ZM1.15625 5.65095C1.76946 3.45758 3.42421 1.69904 5.55365 0.942198L7.71382 4.70444L7.7138 4.70445L7.71726 4.71038L8.26593 5.65095H1.15625ZM0.898438 15.5398V7.65095H9.4326L9.44335 7.6694L9.47497 7.65095H9.97787H22.8984V15.5398C22.8984 19.4058 19.7644 22.5398 15.8984 22.5398H7.89844C4.03244 22.5398 0.898438 19.4058 0.898438 15.5398ZM15.8984 0.539825C19.1099 0.539825 21.8163 2.70252 22.6406 5.65095H16.9689L16.9528 5.62327L15.7305 3.52804L15.7306 3.52802L15.7268 3.52177L13.9582 0.539825H15.8984ZM10.9737 10.4327C10.3164 10.0735 9.51217 10.5379 9.49454 11.2867L9.37272 16.4588C9.35434 17.2388 10.1967 17.7385 10.8724 17.3483L15.5343 14.6568C16.2101 14.2666 16.1985 13.2873 15.5138 12.9132L10.9737 10.4327Z"
 81 |                   fill={fill}/>
 82 |             <Path
 83 |                 d="M11.6329 0.539825L13.3531 -0.480447L12.772 -1.46017H11.6329V0.539825ZM11.7068 0.664464L9.98661 1.68474V1.68474L11.7068 0.664464ZM14.0048 4.53885L15.7323 3.53111L15.7287 3.52483L15.725 3.51857L14.0048 4.53885ZM14.6535 5.65095V7.65095H18.1356L16.3811 4.64321L14.6535 5.65095ZM10.5813 5.65095L8.85378 6.6587L9.4326 7.65095H10.5813V5.65095ZM9.44654 3.70559L7.71207 4.70147L7.71898 4.71333L9.44654 3.70559ZM7.63171 0.544813L7.55684 -1.45378L4.2491 -1.32987L5.89728 1.54067L7.63171 0.544813ZM5.55365 0.942198L7.28809 -0.0536635L6.45685 -1.50138L4.88386 -0.942314L5.55365 0.942198ZM1.15625 5.65095L-0.769894 5.11246L-1.47959 7.65095H1.15625V5.65095ZM7.71382 4.70444L8.73679 6.42303L10.4286 5.41599L9.44826 3.70858L7.71382 4.70444ZM7.7138 4.70445L6.69083 2.98587L4.98743 3.9998L5.98621 5.71213L7.7138 4.70445ZM7.71726 4.71038L5.98967 5.71806L5.9897 5.71812L7.71726 4.71038ZM8.26593 5.65095V7.65095H11.748L9.99349 4.64321L8.26593 5.65095ZM0.898438 7.65095V5.65095H-1.10156V7.65095H0.898438ZM9.4326 7.65095L11.1602 6.64324L10.5814 5.65095H9.4326V7.65095ZM9.44335 7.6694L7.71578 8.67712L8.72352 10.4047L10.4511 9.39695L9.44335 7.6694ZM9.47497 7.65095V5.65095H8.93427L8.46722 5.9234L9.47497 7.65095ZM22.8984 7.65095H24.8984V5.65095H22.8984V7.65095ZM22.6406 5.65095V7.65095H25.2765L24.5668 5.11246L22.6406 5.65095ZM16.9689 5.65095L15.2414 6.65873L15.8202 7.65095H16.9689V5.65095ZM16.9528 5.62327L15.2252 6.63102L15.2252 6.63105L16.9528 5.62327ZM15.7305 3.52804L14.7228 1.80048L12.9952 2.80822L14.003 4.53578L15.7305 3.52804ZM15.7306 3.52802L16.7383 5.25558L18.4784 4.24052L17.4508 2.50781L15.7306 3.52802ZM15.7268 3.52177L17.4471 2.50156L17.447 2.5015L15.7268 3.52177ZM13.9582 0.539825V-1.46017H10.4466L12.238 1.5601L13.9582 0.539825ZM9.49454 11.2867L11.494 11.3338V11.3338L9.49454 11.2867ZM10.9737 10.4327L11.9327 8.67755L11.9327 8.67755L10.9737 10.4327ZM9.37272 16.4588L7.37327 16.4117L9.37272 16.4588ZM10.8724 17.3483L9.87244 15.6163L9.87244 15.6163L10.8724 17.3483ZM15.5343 14.6568L14.5343 12.9247H14.5343L15.5343 14.6568ZM15.5138 12.9132L16.4727 11.1581L15.5138 12.9132ZM11.6329 -1.46017H7.89844V2.53983H11.6329V-1.46017ZM13.427 -0.355808L13.3531 -0.480447L9.91269 1.5601L9.98661 1.68474L13.427 -0.355808ZM15.725 3.51857L13.427 -0.355809L9.98661 1.68474L12.2846 5.55912L15.725 3.51857ZM16.3811 4.64321L15.7323 3.53111L12.2772 5.54659L12.9259 6.6587L16.3811 4.64321ZM10.5813 7.65095H14.6535V3.65095H10.5813V7.65095ZM7.71898 4.71333L8.85378 6.6587L12.3089 4.64321L11.1741 2.69785L7.71898 4.71333ZM5.89728 1.54067L7.71211 4.70145L11.181 2.70973L9.36615 -0.451048L5.89728 1.54067ZM7.89844 -1.46017C7.78416 -1.46017 7.67028 -1.45803 7.55684 -1.45378L7.70659 2.54341C7.77015 2.54103 7.8341 2.53983 7.89844 2.53983V-1.46017ZM4.88386 -0.942314C2.1454 0.0309867 0.0194349 2.28912 -0.769894 5.11246L3.08239 6.18945C3.51948 4.62604 4.70303 3.36709 6.22344 2.82671L4.88386 -0.942314ZM9.44826 3.70858L7.28809 -0.0536635L3.81922 1.93806L5.97939 5.7003L9.44826 3.70858ZM8.73677 6.42304L8.73679 6.42303L6.69085 2.98586L6.69083 2.98587L8.73677 6.42304ZM9.44485 3.7027L9.4414 3.69677L5.98621 5.71213L5.98967 5.71806L9.44485 3.7027ZM9.99349 4.64321L9.44482 3.70264L5.9897 5.71812L6.53837 6.6587L9.99349 4.64321ZM1.15625 7.65095H8.26593V3.65095H1.15625V7.65095ZM-1.10156 7.65095V15.5398H2.89844V7.65095H-1.10156ZM9.4326 5.65095H0.898438V9.65096H9.4326V5.65095ZM11.1709 6.66168L11.1602 6.64324L7.70502 8.65867L7.71578 8.67712L11.1709 6.66168ZM8.46722 5.9234L8.4356 5.94185L10.4511 9.39695L10.4827 9.37851L8.46722 5.9234ZM9.97787 5.65095H9.47497V9.65096H9.97787V5.65095ZM22.8984 5.65095H9.97787V9.65096H22.8984V5.65095ZM24.8984 15.5398V7.65095H20.8984V15.5398H24.8984ZM15.8984 24.5398C20.869 24.5398 24.8984 20.5104 24.8984 15.5398H20.8984C20.8984 18.3012 18.6599 20.5398 15.8984 20.5398V24.5398ZM7.89844 24.5398H15.8984V20.5398H7.89844V24.5398ZM-1.10156 15.5398C-1.10156 20.5104 2.92787 24.5398 7.89844 24.5398V20.5398C5.13701 20.5398 2.89844 18.3012 2.89844 15.5398H-1.10156ZM24.5668 5.11246C23.5072 1.32259 20.0304 -1.46017 15.8984 -1.46017V2.53983C18.1895 2.53983 20.1254 4.08245 20.7145 6.18945L24.5668 5.11246ZM16.9689 7.65095H22.6406V3.65095H16.9689V7.65095ZM15.2252 6.63105L15.2414 6.65873L18.6964 4.64318L18.6803 4.6155L15.2252 6.63105ZM14.003 4.53578L15.2252 6.63102L18.6803 4.61553L17.4581 2.52029L14.003 4.53578ZM14.7228 1.80046L14.7228 1.80048L16.7383 5.25559L16.7383 5.25558L14.7228 1.80046ZM14.0066 4.54198L14.0103 4.54823L17.4508 2.50781L17.4471 2.50156L14.0066 4.54198ZM12.238 1.5601L14.0067 4.54204L17.447 2.5015L15.6784 -0.480447L12.238 1.5601ZM15.8984 -1.46017H13.9582V2.53983H15.8984V-1.46017ZM11.494 11.3338C11.4763 12.0826 10.6721 12.5469 10.0148 12.1878L11.9327 8.67755C9.96077 7.60018 7.548 8.99319 7.49509 11.2396L11.494 11.3338ZM11.3722 16.5058L11.494 11.3338L7.49509 11.2396L7.37327 16.4117L11.3722 16.5058ZM9.87244 15.6163C10.5482 15.2261 11.3905 15.7258 11.3722 16.5058L7.37327 16.4117C7.31815 18.7519 9.84515 20.2508 11.8724 19.0804L9.87244 15.6163ZM14.5343 12.9247L9.87244 15.6163L11.8724 19.0804L16.5343 16.3888L14.5343 12.9247ZM14.5548 14.6683C13.8701 14.2942 13.8585 13.3149 14.5343 12.9247L16.5343 16.3888C18.5616 15.2184 18.527 12.2805 16.4727 11.1581L14.5548 14.6683ZM10.0148 12.1878L14.5548 14.6683L16.4727 11.1581L11.9327 8.67755L10.0148 12.1878Z"
 84 |                 fill={fill} mask="url(#path1)"/>
 85 |         </Svg>
 86 |     )
 87 | }
 88 | 
 89 | function Shop({size = 24, fill, ...props}) {
 90 |     return (
 91 |         <Svg height={size} role="img" viewBox="0 0 23 25" width={size} {...props}>
 92 |             <Path
 93 |                 d="M2.34203 9.75104C2.435 8.1651 3.74822 6.92661 5.33689 6.92661H17.663C19.2516 6.92661 20.5649 8.1651 20.6578 9.75104L21.1293 17.7926C21.2976 20.6641 19.0143 23.0852 16.1378 23.0852H6.86203C3.98557 23.0852 1.70227 20.6641 1.87061 17.7926L2.34203 9.75104Z"
 94 |                 stroke="black" strokeWidth="2"/>
 95 |             <Path
 96 |                 d="M7.8335 6.81546V5.06944C7.8335 3.3337 9.39694 1.92661 11.3255 1.92661C13.2541 1.92661 14.8176 3.3337 14.8176 5.06944V6.81546"
 97 |                 stroke={fill} strokeWidth="2"/>
 98 |             <Path
 99 |                 d="M8.00781 10.3074C8.00781 10.3074 8.0078 13.974 11.3253 13.974C14.9919 13.974 14.9919 10.3074 14.9919 10.3074"
100 |                 stroke={fill} strokeWidth="2" strokeLinecap="round"/>
101 |         </Svg>
102 |     )
103 | }
104 | 
105 | function ShopFilled({size = 24, fill, ...props}) {
106 |     return (
107 |         <Svg height={size} role="img" viewBox="0 0 22 24" width={size} {...props}>
108 |             <Path
109 |                 d="M7.23193 6.19684V4.45082C7.23193 2.71508 8.79537 1.30798 10.724 1.30798C12.6526 1.30798 14.216 2.71508 14.216 4.45082V6.19684"
110 |                 stroke={fill} strokeWidth="2"/>
111 |             <Path fillRule="evenodd" clipRule="evenodd"
112 |                   d="M4.73531 5.30798C2.6171 5.30798 0.866131 6.95931 0.742169 9.07389L0.270749 17.1155C0.0687436 20.5613 2.8087 23.4666 6.26046 23.4666H15.5363C18.988 23.4666 21.728 20.5613 21.526 17.1155L21.0546 9.07389C20.9306 6.95931 19.1796 5.30798 17.0614 5.30798H4.73531ZM7.40624 8.68878C7.95707 8.68878 8.40388 9.13414 8.40623 9.68442L8.40623 9.68471L8.4066 9.69982C8.40708 9.716 8.40819 9.74391 8.41064 9.78184C8.41556 9.85804 8.4258 9.9727 8.44689 10.1126C8.48984 10.3974 8.57388 10.7604 8.73202 11.1099C8.88951 11.4581 9.10584 11.7615 9.39898 11.9775C9.68072 12.1851 10.0912 12.3554 10.7237 12.3554C11.4654 12.3554 11.9551 12.1729 12.2888 11.9505C12.6286 11.7239 12.8677 11.4146 13.0376 11.0749C13.2094 10.7313 13.3003 10.3756 13.3466 10.0973C13.3694 9.96054 13.3804 9.84876 13.3857 9.77509C13.3883 9.73842 13.3895 9.71171 13.39 9.69665L13.3903 9.6833C13.3933 9.13354 13.8399 8.68878 14.3903 8.68878C14.9426 8.68878 15.3903 9.1365 15.3903 9.68878H14.3903C15.3903 9.68878 15.3903 9.68928 15.3903 9.6898L15.3903 9.69091L15.3903 9.69339L15.3903 9.69938L15.3901 9.71543C15.3899 9.72791 15.3895 9.74394 15.3889 9.76327C15.3876 9.80192 15.3852 9.85399 15.3806 9.91758C15.3716 10.0444 15.3539 10.2191 15.3194 10.4261C15.2512 10.8353 15.1129 11.3963 14.8264 11.9693C14.5379 12.5463 14.0895 13.1537 13.3982 13.6146C12.7005 14.0796 11.8153 14.3554 10.7237 14.3554C9.69746 14.3554 8.86387 14.0675 8.21258 13.5876C7.57269 13.1161 7.16699 12.5028 6.90981 11.9343C6.65327 11.3672 6.52997 10.8135 6.46925 10.4108C6.43851 10.2069 6.42283 10.0351 6.4148 9.91082C6.41077 9.8485 6.40864 9.79763 6.4075 9.7601C6.40694 9.74132 6.40662 9.72584 6.40645 9.71389L6.40628 9.69862L6.40625 9.69301L6.40624 9.69072L6.40624 9.68971C6.40624 9.68923 6.40624 9.68878 7.40624 9.68878L6.40624 9.68878C6.40624 9.13649 6.85396 8.68878 7.40624 8.68878Z"
113 |                   fill={fill}/>
114 |         </Svg>
115 |     )
116 | }
117 | 
118 | function Plus({size = 24, fill, ...props}) {
119 |     return (
120 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
121 |             <Path
122 |                 d="M2 12v3.45c0 2.849.698 4.005 1.606 4.944.94.909 2.098 1.608 4.946 1.608h6.896c2.848 0 4.006-.7 4.946-1.608C21.302 19.455 22 18.3 22 15.45V8.552c0-2.849-.698-4.006-1.606-4.945C19.454 2.7 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.547 2 5.703 2 8.552z"
123 |                 fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
124 |             <Line fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" x1="6.545"
125 |                   x2="17.455" y1="12.001" y2="12.001"/>
126 |             <Line fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" x1="12.003"
127 |                   x2="12.003" y1="6.545" y2="17.455"/>
128 |         </Svg>
129 |     )
130 | }
131 | 
132 | function Heart({size = 24, ...props}) {
133 |     return (
134 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
135 |             <Path
136 |                 d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"/>
137 |         </Svg>
138 |     )
139 | }
140 | 
141 | function Chat({size = 24, fill, ...props}) {
142 |     return (
143 |         <Svg height={size} role="img" fill={fill} viewBox="0 0 24 24" width={size} {...props}>
144 |             <Path strokeWidth="1.739" strokeMiterlimit="10" stroke={fill} fill="none"
145 |                   d="M12.003 2.001a9.705 9.705 0 110 19.4 10.876 10.876 0 01-2.895-.384.798.798 0 00-.533.04l-1.984.876a.801.801 0 01-1.123-.708l-.054-1.78a.806.806 0 00-.27-.569 9.49 9.49 0 01-3.14-7.175 9.65 9.65 0 0110-9.7z"/>
146 |             <Path
147 |                 d="M17.79 10.132a.659.659 0 00-.962-.873l-2.556 2.05a.63.63 0 01-.758.002L11.06 9.47a1.576 1.576 0 00-2.277.42l-2.567 3.98a.659.659 0 00.961.875l2.556-2.049a.63.63 0 01.759-.002l2.452 1.84a1.576 1.576 0 002.278-.42z"
148 |                 fillRule="evenodd"/>
149 |         </Svg>
150 |     )
151 | }
152 | 
153 | function PlusOutline({size = 16, ...props}) {
154 |     return (
155 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
156 |             <Path
157 |                 d="M12.001.504a11.5 11.5 0 1011.5 11.5 11.513 11.513 0 00-11.5-11.5zm5 12.5h-4v4a1 1 0 01-2 0v-4h-4a1 1 0 110-2h4v-4a1 1 0 112 0v4h4a1 1 0 010 2z"/>
158 |         </Svg>
159 |     )
160 | }
161 | 
162 | function Comment({size = 24, fill, ...props}) {
163 |     return (
164 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
165 |             <Path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z" fill="none" stroke={fill} strokeLinejoin="round"
166 |                   strokeWidth="2"/>
167 |         </Svg>
168 |     )
169 | }
170 | 
171 | function Message({size = 24, fill, ...props}) {
172 |     return (
173 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
174 |             <Line fill="none" stroke={fill} strokeLinejoin="round" strokeWidth="2" x1="22" x2="9.218"
175 |                   y1="3" y2="10.083"/>
176 |             <Polygon fill="none" points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
177 |                      stroke={fill} strokeLinejoin="round" strokeWidth="2"/>
178 |         </Svg>
179 |     )
180 | }
181 | 
182 | function Bookmark({size = 24, fill, ...props}) {
183 |     return (
184 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
185 |             <Polygon fill="none" points="20 21 12 13.44 4 21 4 3 20 3 20 21" stroke={fill} strokeLinecap="round"
186 |                      strokeLinejoin="round" strokeWidth="2"/>
187 |         </Svg>
188 |     )
189 | }
190 | 
191 | function More({size = 24, ...props}) {
192 |     return (
193 |         <Svg height={size} role="img" viewBox="0 0 24 24" width={size} {...props}>
194 |             <Circle cx="12" cy="12" r="1.5"/>
195 |             <Circle cx="6" cy="12" r="1.5"/>
196 |             <Circle cx="18" cy="12" r="1.5"/>
197 |         </Svg>
198 |     )
199 | }
200 | 
201 | export {
202 |     Home,
203 |     HomeFilled,
204 |     Search,
205 |     SearchFilled,
206 |     Reel,
207 |     ReelFilled,
208 |     Shop,
209 |     ShopFilled,
210 |     Logo,
211 |     Plus,
212 |     Heart,
213 |     Chat,
214 |     PlusOutline,
215 |     Comment,
216 |     Message,
217 |     Bookmark,
218 |     More
219 | }
220 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@react-navigation/bottom-tabs": "^6.0.9",
12 |     "@react-navigation/native": "^6.0.6",
13 |     "dayjs": "^1.10.7",
14 |     "expo": "~44.0.0",
15 |     "expo-linear-gradient": "~11.0.0",
16 |     "expo-status-bar": "~1.2.0",
17 |     "react": "17.0.1",
18 |     "react-dom": "17.0.1",
19 |     "react-native": "0.64.3",
20 |     "react-native-safe-area-context": "3.3.2",
21 |     "react-native-screens": "~3.10.1",
22 |     "react-native-see-more-inline": "^1.3.0",
23 |     "react-native-svg": "12.1.1",
24 |     "react-native-text-size": "^4.0.0-rc.1",
25 |     "react-native-web": "0.17.1"
26 |   },
27 |   "devDependencies": {
28 |     "@babel/core": "^7.12.9"
29 |   },
30 |   "private": true
31 | }
32 | 


--------------------------------------------------------------------------------
/screens/home/components/Header.js:
--------------------------------------------------------------------------------
 1 | import {Chat, Heart, Logo, Plus} from "../../../icons";
 2 | import {StyleSheet, View} from "react-native";
 3 | 
 4 | function Header() {
 5 |     return (
 6 |         <View style={styles.header}>
 7 |             <Logo size={120}/>
 8 |             <View style={styles.actions}>
 9 |                 <View style={styles.icon}>
10 |                     <Plus fill="#000"/>
11 |                 </View>
12 |                 <View style={styles.icon}>
13 |                     <Heart fill="#000"/>
14 |                     <View style={styles.notificationContent}>
15 |                         <View style={styles.notification}/>
16 |                     </View>
17 |                 </View>
18 |                 <View style={styles.icon}>
19 |                     <Chat fill="#000"/>
20 |                 </View>
21 |             </View>
22 |         </View>
23 |     )
24 | }
25 | 
26 | export default Header
27 | 
28 | const styles = StyleSheet.create({
29 |     header: {
30 |         flexDirection: 'row',
31 |         backgroundColor: '#fff',
32 |         justifyContent: 'space-between',
33 |         alignItems: 'center',
34 |         paddingHorizontal: 20,
35 |         paddingVertical: 10
36 |     },
37 |     actions: {
38 |         flexDirection: 'row'
39 |     },
40 |     icon: {
41 |         marginLeft: 20,
42 |         position: 'relative'
43 |     },
44 |     notification: {
45 |         width: 8,
46 |         height: 8,
47 |         backgroundColor: '#FF3450',
48 |         borderRadius: 100
49 |     },
50 |     notificationContent: {
51 |         position: 'absolute',
52 |         top: -2,
53 |         right: -2,
54 |         backgroundColor: '#fff',
55 |         padding: 1.5
56 |     }
57 | })
58 | 


--------------------------------------------------------------------------------
/screens/home/components/Stories.js:
--------------------------------------------------------------------------------
  1 | import {StyleSheet, View, ScrollView, Text, Image} from "react-native";
  2 | import {LinearGradient} from 'expo-linear-gradient';
  3 | import { PlusOutline } from "../../../icons";
  4 | 
  5 | function Stories() {
  6 | 
  7 |     const user = {
  8 |         name: 'Tayfun Erbilen',
  9 |         avatar: 'https://pbs.twimg.com/profile_images/1469715048436277258/141ZXcHO_400x400.jpg',
 10 |         hasStory: false
 11 |     }
 12 | 
 13 |     const items = [
 14 |         {
 15 |             id: 2,
 16 |             avatar: 'https://pbs.twimg.com/profile_images/1455707950341890051/flRfKMOq_400x400.jpg',
 17 |             user: 'Nacho Iacovino'
 18 |         },
 19 |         {
 20 |             id: 3,
 21 |             avatar: 'https://pbs.twimg.com/profile_images/557940120184041473/bFyXy8Pu_400x400.jpeg',
 22 |             user: 'Rich Harris'
 23 |         },
 24 |         {
 25 |             id: 4,
 26 |             avatar: 'https://pbs.twimg.com/profile_images/1439602105107443714/Vpb3Ra1K_400x400.jpg',
 27 |             user: 'Taylor Otwell'
 28 |         },
 29 |         {
 30 |             id: 5,
 31 |             avatar: 'https://pbs.twimg.com/profile_images/1262107495037796359/N_HoUfGz_400x400.jpg',
 32 |             user: 'Galen Gidman'
 33 |         },
 34 |         {
 35 |             id: 6,
 36 |             avatar: 'https://pbs.twimg.com/profile_images/1458081709291868178/7bFb7AbF_400x400.jpg',
 37 |             user: 'Scott Jehl'
 38 |         },
 39 |         {
 40 |             id: 7,
 41 |             avatar: 'https://pbs.twimg.com/profile_images/1266007237874647044/-JqTQ_14_400x400.jpg',
 42 |             user: 'Ildiko Gaspar'
 43 |         },
 44 |         {
 45 |             id: 8,
 46 |             avatar: 'https://pbs.twimg.com/profile_images/1323356199945859072/oJM0cDPb_400x400.png',
 47 |             user: 'Joel Thoms'
 48 |         },
 49 |         {
 50 |             id: 9,
 51 |             avatar: 'https://pbs.twimg.com/profile_images/1386085325647265801/-w1nECc4_400x400.jpg',
 52 |             user: 'Emir Karşıyakalı'
 53 |         },
 54 |         {
 55 |             id: 10,
 56 |             avatar: 'https://pbs.twimg.com/profile_images/958997253892419586/Jb6NPqEa_400x400.jpg',
 57 |             user: 'Selman Kaya'
 58 |         }
 59 |     ]
 60 | 
 61 |     return (
 62 |         <View style={styles.container}>
 63 |             <ScrollView
 64 |                 showsHorizontalScrollIndicator={false}
 65 |                 horizontal={true}
 66 |             >
 67 |                 <View style={{
 68 |                     ...styles.story,
 69 |                     marginLeft: 15
 70 |                 }}>
 71 |                     <LinearGradient
 72 |                         colors={user.hasStory ? ['#D6307E', '#F37A41', '#F06E48'] : ['#fff']}
 73 |                         style={styles.avatarParent}
 74 |                     >
 75 |                         <Image
 76 |                             style={styles.avatar}
 77 |                             source={{
 78 |                                 uri: user.avatar
 79 |                             }}
 80 |                         />
 81 |                     </LinearGradient>
 82 |                     {!user.hasStory && <View style={styles.plus}><PlusOutline size={20} fill="#0095F6" /></View>}
 83 |                     <Text style={styles.title} numberOfLines={1}>Your Story</Text>
 84 |                 </View>
 85 |                 {items.map((item, key) => (
 86 |                     <View style={styles.story}>
 87 |                         <LinearGradient
 88 |                             colors={['#D6307E', '#F37A41', '#F06E48']}
 89 |                             style={styles.avatarParent}
 90 |                         >
 91 |                             <Image
 92 |                                 style={styles.avatar}
 93 |                                 source={{
 94 |                                     uri: item.avatar
 95 |                                 }}
 96 |                             />
 97 |                         </LinearGradient>
 98 |                         <Text style={styles.title} numberOfLines={1}>{item.user}</Text>
 99 |                     </View>
100 |                 ))}
101 |             </ScrollView>
102 |         </View>
103 |     )
104 | }
105 | 
106 | export default Stories
107 | 
108 | const styles = StyleSheet.create({
109 |     container: {
110 |         paddingLeft: 0,
111 |         paddingRight: 0,
112 |         borderBottomWidth: 0.5,
113 |         borderBottomColor: '#DBDBDB',
114 |         paddingBottom: 10
115 |     },
116 |     story: {
117 |         width: 68,
118 |         marginRight: 15,
119 |         position: 'relative'
120 |     },
121 |     avatarParent: {
122 |         width: 68,
123 |         height: 68,
124 |         borderRadius: 34,
125 |         padding: 2,
126 |     },
127 |     plus: {
128 |         position: 'absolute',
129 |         bottom: 20,
130 |         right: 0,
131 |         padding: 3,
132 |         borderRadius: 25,
133 |         backgroundColor: '#fff'
134 |     },
135 |     avatar: {
136 |         width: 64,
137 |         height: 64,
138 |         borderWidth: 2,
139 |         borderColor: '#fff',
140 |         borderRadius: 64
141 |     },
142 |     title: {
143 |         fontSize: 13,
144 |         marginTop: 3,
145 |         textAlign: 'center'
146 |     }
147 | })
148 | 


--------------------------------------------------------------------------------
/screens/home/index.js:
--------------------------------------------------------------------------------
 1 | import {View, Text, RefreshControl, ScrollView, StyleSheet} from "react-native";
 2 | import Header from "./components/Header";
 3 | import Stories from "./components/Stories";
 4 | import Post from "../../components/shared/Post";
 5 | import posts from "../../data/posts";
 6 | import {useCallback, useState} from "react";
 7 | 
 8 | const wait = (timeout) => {
 9 |     return new Promise(resolve => setTimeout(resolve, timeout));
10 | }
11 | 
12 | function Home() {
13 | 
14 |     const [refreshing, setRefreshing] = useState(false);
15 | 
16 |     const onRefresh = useCallback(() => {
17 |         setRefreshing(true);
18 |         wait(2000).then(() => setRefreshing(false));
19 |     }, []);
20 | 
21 |     return (
22 |         <View style={styles.container}>
23 |             <Header/>
24 |             <ScrollView
25 |                 refreshControl={
26 |                     <RefreshControl
27 |                         refreshing={refreshing}
28 |                         onRefresh={onRefresh}
29 |                     />
30 |                 }
31 |             >
32 |                 <Stories/>
33 |                 {posts && posts.map(post => (
34 |                     <Post key={post.id} post={post} />
35 |                 ))}
36 |             </ScrollView>
37 |         </View>
38 |     )
39 | }
40 | 
41 | export default Home
42 | 
43 | const styles = StyleSheet.create({
44 |     container: {
45 |         flex: 1,
46 |         backgroundColor: '#fff'
47 |     }
48 | })
49 | 


--------------------------------------------------------------------------------
/screens/profile/index.js:
--------------------------------------------------------------------------------
 1 | import {View, Text, StyleSheet} from "react-native";
 2 | 
 3 | function Search() {
 4 |     return (
 5 |         <View style={styles.container}>
 6 |             <Text>Profile</Text>
 7 |         </View>
 8 |     )
 9 | }
10 | 
11 | export default Search
12 | 
13 | const styles = StyleSheet.create({
14 |     container: {
15 |         flex: 1,
16 |         backgroundColor: '#fff'
17 |     }
18 | })
19 | 


--------------------------------------------------------------------------------
/screens/reel/index.js:
--------------------------------------------------------------------------------
 1 | import {View, Text, StyleSheet} from "react-native";
 2 | 
 3 | function Search() {
 4 |     return (
 5 |         <View style={styles.container}>
 6 |             <Text>Reel</Text>
 7 |         </View>
 8 |     )
 9 | }
10 | 
11 | export default Search
12 | 
13 | const styles = StyleSheet.create({
14 |     container: {
15 |         flex: 1,
16 |         backgroundColor: '#fff'
17 |     }
18 | })
19 | 


--------------------------------------------------------------------------------
/screens/search/index.js:
--------------------------------------------------------------------------------
 1 | import {View, Text, StyleSheet} from "react-native";
 2 | 
 3 | function Search() {
 4 |     return (
 5 |         <View style={styles.container}>
 6 |             <Text>Search</Text>
 7 |         </View>
 8 |     )
 9 | }
10 | 
11 | export default Search
12 | 
13 | const styles = StyleSheet.create({
14 |     container: {
15 |         flex: 1,
16 |         backgroundColor: '#fff'
17 |     }
18 | })
19 | 


--------------------------------------------------------------------------------
/screens/shop/index.js:
--------------------------------------------------------------------------------
 1 | import {View, Text, StyleSheet} from "react-native";
 2 | 
 3 | function Search() {
 4 |     return (
 5 |         <View style={styles.container}>
 6 |             <Text>Shop</Text>
 7 |         </View>
 8 |     )
 9 | }
10 | 
11 | export default Search
12 | 
13 | const styles = StyleSheet.create({
14 |     container: {
15 |         flex: 1,
16 |         backgroundColor: '#fff'
17 |     }
18 | })
19 | 


--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
1 | import dayjs from "dayjs";
2 | import relativeTime from "dayjs/plugin/relativeTime"
3 | dayjs.extend(relativeTime)
4 | 
5 | export {
6 |     dayjs
7 | }
8 | 


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