Added search to clubs.js

android/app/src/main/java/com/blazerapp/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'blazerapp'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

app/Clubs.js

@@ -17,9 +17,10 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { SearchBar } from 'react-native-elements';
 
 const ClubElement = ({item}) => {
-  console.log(item)
+  //console.log(item)
   return(
   <View style={styles.item}>
     <Text style={styles.title}>{item.item.name}</Text>
@@ -28,18 +29,22 @@ const ClubElement = ({item}) => {
   )
 }
 class Clubs extends React.Component {
+
   
 	constructor(props) {
     super(props);
 
     this.state = {
       data: [],
-      isLoading: true
+      dataSearch:[],
+      isLoading: true,
+      search:""
     };
   }
 
   componentDidMount() {
-    fetch('https://84a7c514cb57.ngrok.io/api/en/clubs',{
+    
+    fetch('https://6dc2642ae9b3.ngrok.io/api/en/clubs',{
       headers: {
         'Cache-Control': 'no-cache'
       } })
@@ -48,22 +53,41 @@ class Clubs extends React.Component {
         return response.text();
       })
       .then((json) => {
-        console.log(json);
+        //onsole.log("done bitch?")
-        this.setState({ data: JSON.parse(json) });
+        //console.log(json);
+        this.setState({data: JSON.parse(json)});
+        this.setState({dataSearch:JSON.parse(json)});
       })
       .catch((error) => console.error(error))
       .finally(() => {
         this.setState({ isLoading: false });
       });
+      
+  }
+  updateSearch = (search) => {
+    this.setState({ search:search });
+    ds = this.state.dataSearch.filter((thing)=>{return thing.name.startsWith(search)})
+    this.setState({dataSearch: ds})
+  };
+  clearSearch  = (search)=>{
+    ds = this.state.data;
+    this.setState({dataSearch:ds})
   }
-
   render() {
-    const { data, isLoading} = this.state;
+    const { data , dataSearch, isLoading,search} = this.state;
 
     return (
+      
+
       <SafeAreaView style={styles.container}>
+        <SearchBar
+        lightTheme
+        placeholder="Type Here..."
+        onChangeText={this.updateSearch}
+        onClear={this.clearSearch}
+        value={this.state.search}/>
       <FlatList
-        data={data}
+        data={dataSearch}
         renderItem={item => <ClubElement item={item}/>}
         keyExtractor={item => JSON.stringify(item)}
       />

ios/Podfile

@@ -8,6 +8,8 @@ target 'blazerapp' do
 
   use_react_native!(:path => config["reactNativePath"])
 
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'blazerappTests' do
     inherit! :complete
     # Pods for testing

ios/blazerapp.xcodeproj/project.pbxproj

@@ -20,6 +20,22 @@
 		AB1538AB74DA9975CB15908C /* libPods-blazerapp-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 550124A0AD94266479548F8B /* libPods-blazerapp-tvOSTests.a */; };
 		BD2895983D059FBE0B87DB09 /* libPods-blazerapp-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = DFC7F69B5DE2568436F5484E /* libPods-blazerapp-tvOS.a */; };
 		DE2D0A2192BA72585CB5D638 /* libPods-blazerapp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E88C777CFF7621DDF76C01E4 /* libPods-blazerapp.a */; };
+		4A7A179DB98B47A8A40CD8FC /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 12335434D45F4133B3460C9C /* AntDesign.ttf */; };
+		D577C956C56741DCA2FF9E53 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5CF8D36D2E07475C8DFF5A4E /* Entypo.ttf */; };
+		9FB60B01BC5847D4B4F9B466 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 76DF3ADAE4D84932BDF634C5 /* EvilIcons.ttf */; };
+		80A84B323411490AA1121CB6 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1D8FCBD3C38144A386EB5C3E /* Feather.ttf */; };
+		CD41CDC3A49340F0B4A685F4 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9301233EFD6A4BCAB374085B /* FontAwesome.ttf */; };
+		B35D87CC71CE4617B98B1AB5 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5B02482EA0A644D3A0B33B87 /* FontAwesome5_Brands.ttf */; };
+		C5E070097F194497B1D0A399 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E291ADEE3300461CB8721A70 /* FontAwesome5_Regular.ttf */; };
+		C3EE5C7C53484FD499F58143 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C001A225EE9E4B0CB10EAF80 /* FontAwesome5_Solid.ttf */; };
+		59BDB38C42094133AB8C1000 /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EAA5D77A57FE41BC84B28739 /* Fontisto.ttf */; };
+		55C7513999DE403BAE2E24A8 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E13614A518FD4A609A5F1014 /* Foundation.ttf */; };
+		C4588E975CFC4177B8CD962D /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 330031E6BAD54BE2B553C25D /* Ionicons.ttf */; };
+		7410119ACB7948C3B4238742 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9FFDD16C8B594DDFAC15D5CB /* MaterialCommunityIcons.ttf */; };
+		4B4511873AC94279A8E61630 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D1595EA8A6E24DD1ABE3E57C /* MaterialIcons.ttf */; };
+		6F2CD3C269C943609D7CB09B /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8B88AA1BE7BA4AC3B2ECC177 /* Octicons.ttf */; };
+		59A12B79B6CE43BF9966362B /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2A15AE6CCE744D85B5486E63 /* SimpleLineIcons.ttf */; };
+		798E94847B4543C7804A76BE /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 35E405D9EFCD4619A090EBB2 /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -67,6 +83,22 @@
 		E88C777CFF7621DDF76C01E4 /* libPods-blazerapp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-blazerapp.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		12335434D45F4133B3460C9C /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5CF8D36D2E07475C8DFF5A4E /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		76DF3ADAE4D84932BDF634C5 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		1D8FCBD3C38144A386EB5C3E /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		9301233EFD6A4BCAB374085B /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5B02482EA0A644D3A0B33B87 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E291ADEE3300461CB8721A70 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C001A225EE9E4B0CB10EAF80 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		EAA5D77A57FE41BC84B28739 /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E13614A518FD4A609A5F1014 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		330031E6BAD54BE2B553C25D /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		9FFDD16C8B594DDFAC15D5CB /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D1595EA8A6E24DD1ABE3E57C /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		8B88AA1BE7BA4AC3B2ECC177 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		2A15AE6CCE744D85B5486E63 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		35E405D9EFCD4619A090EBB2 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -181,6 +213,7 @@
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				01279ADF7636BE54EC593E57 /* Pods */,
+				6C56ED1351EB48EBBB6DA1E3 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -198,6 +231,30 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		6C56ED1351EB48EBBB6DA1E3 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				12335434D45F4133B3460C9C /* AntDesign.ttf */,
+				5CF8D36D2E07475C8DFF5A4E /* Entypo.ttf */,
+				76DF3ADAE4D84932BDF634C5 /* EvilIcons.ttf */,
+				1D8FCBD3C38144A386EB5C3E /* Feather.ttf */,
+				9301233EFD6A4BCAB374085B /* FontAwesome.ttf */,
+				5B02482EA0A644D3A0B33B87 /* FontAwesome5_Brands.ttf */,
+				E291ADEE3300461CB8721A70 /* FontAwesome5_Regular.ttf */,
+				C001A225EE9E4B0CB10EAF80 /* FontAwesome5_Solid.ttf */,
+				EAA5D77A57FE41BC84B28739 /* Fontisto.ttf */,
+				E13614A518FD4A609A5F1014 /* Foundation.ttf */,
+				330031E6BAD54BE2B553C25D /* Ionicons.ttf */,
+				9FFDD16C8B594DDFAC15D5CB /* MaterialCommunityIcons.ttf */,
+				D1595EA8A6E24DD1ABE3E57C /* MaterialIcons.ttf */,
+				8B88AA1BE7BA4AC3B2ECC177 /* Octicons.ttf */,
+				2A15AE6CCE744D85B5486E63 /* SimpleLineIcons.ttf */,
+				35E405D9EFCD4619A090EBB2 /* Zocial.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -342,6 +399,22 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				4A7A179DB98B47A8A40CD8FC /* AntDesign.ttf in Resources */,
+				D577C956C56741DCA2FF9E53 /* Entypo.ttf in Resources */,
+				9FB60B01BC5847D4B4F9B466 /* EvilIcons.ttf in Resources */,
+				80A84B323411490AA1121CB6 /* Feather.ttf in Resources */,
+				CD41CDC3A49340F0B4A685F4 /* FontAwesome.ttf in Resources */,
+				B35D87CC71CE4617B98B1AB5 /* FontAwesome5_Brands.ttf in Resources */,
+				C5E070097F194497B1D0A399 /* FontAwesome5_Regular.ttf in Resources */,
+				C3EE5C7C53484FD499F58143 /* FontAwesome5_Solid.ttf in Resources */,
+				59BDB38C42094133AB8C1000 /* Fontisto.ttf in Resources */,
+				55C7513999DE403BAE2E24A8 /* Foundation.ttf in Resources */,
+				C4588E975CFC4177B8CD962D /* Ionicons.ttf in Resources */,
+				7410119ACB7948C3B4238742 /* MaterialCommunityIcons.ttf in Resources */,
+				4B4511873AC94279A8E61630 /* MaterialIcons.ttf in Resources */,
+				6F2CD3C269C943609D7CB09B /* Octicons.ttf in Resources */,
+				59A12B79B6CE43BF9966362B /* SimpleLineIcons.ttf in Resources */,
+				798E94847B4543C7804A76BE /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/blazerapp/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +53,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package-lock.json

@@ -2489,6 +2489,37 @@
       "integrity": "sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react": {
+      "version": "16.9.45",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.45.tgz",
+      "integrity": "sha512-vv950slTF5UZ5eDOf13b8qC1SD4rTvkqg3HfaUKzr17U97oeJZAa+dUaIHn0QoOJflNTIt6Pem9MmapULs9dkA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.63.6",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.6.tgz",
+      "integrity": "sha512-qAv/VOyXAk4it9MOsQoyUjUnEJ3kAW1FCRGi0OvfQDKLH1/FFogVFvoB6xAlBNc6lPyBtCg+nvzj/ScYe0PqCQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-native-vector-icons": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz",
+      "integrity": "sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3554,6 +3585,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
+      "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -8218,6 +8254,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
       "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -9332,6 +9373,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -9996,6 +10042,32 @@
         }
       }
     },
+    "react-native-elements": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-2.2.0.tgz",
+      "integrity": "sha512-OkXH96ecqDFcrjxzOWw2h3nt8TxX1ghzvJ/W4OGaxm7u7LC0LzE3SMAx/rh/Zyp/jkdXap032ZLm1mSrxrBuuQ==",
+      "requires": {
+        "@types/react-native-vector-icons": "^6.4.5",
+        "color": "^3.1.0",
+        "deepmerge": "^3.1.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.0",
+        "prop-types": "^15.7.2",
+        "react-native-ratings": "^7.2.0",
+        "react-native-status-bar-height": "^2.5.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
     "react-native-gesture-handler": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.7.0.tgz",
@@ -10012,6 +10084,15 @@
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
       "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
     },
+    "react-native-ratings": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-7.2.0.tgz",
+      "integrity": "sha512-oSrkQ4rnpYjCw+d6MPJQghXfrfb3uQKoTJx1exdk7xqzw4jnv3pyu0PAuxCDJk/rfDSD/sirIAudz+zdGxrBog==",
+      "requires": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-reanimated": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.10.2.tgz",
@@ -10030,6 +10111,98 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.10.1.tgz",
       "integrity": "sha512-Z2kKSk4AwWRQNCBmTjViuBQK0/Lx0jc25TZptn/2gKYUCOuVRvCekoA26u0Tsb3BIQ8tWDsZW14OwDlFUXW1aw=="
     },
+    "react-native-status-bar-height": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.5.0.tgz",
+      "integrity": "sha512-sYBCPYA/NapBSHkdm/IVL4ID3LLlIuLqINi2FBDyMkc2BU9pfSGOtkz9yfxoK39mYJuTrlTOQ7mManARUsYDSA=="
+    },
+    "react-native-vector-icons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-7.0.0.tgz",
+      "integrity": "sha512-Ku8+dTUAnR9pexRPQqsUcQEZlxEpFZsIy8iOFqVL/3mrUyncZJHtqJyx2cUOmltZIC6W2GI4IkD3EYzPerXV5g==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "prop-types": "^15.7.2",
+        "yargs": "^15.0.2"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",

package.json

@@ -16,10 +16,12 @@
     "@react-navigation/stack": "^5.9.0",
     "react": "16.13.1",
     "react-native": "0.63.2",
+    "react-native-elements": "^2.2.0",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-reanimated": "^1.10.2",
     "react-native-safe-area-context": "^3.1.4",
-    "react-native-screens": "^2.10.1"
+    "react-native-screens": "^2.10.1",
+    "react-native-vector-icons": "^7.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.11.1",