update UI

.vscode/settings.json

 {
     "java.configuration.updateBuildConfiguration": "automatic",
     "xd.globalEditor": true,
-    "xd.lastPackage": "d:\\RNFolder\\Test\\PianoApp\\style\\Design-app"
+    "xd.lastPackage": "/d:/RNFolder/Test/PianoApp/style/Design-app"
 }
\ No newline at end of file

App.js

 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {Image} from 'react-native';
+import {Image, Dimensions} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {Icon} from 'react-native-elements';
@@ -15,79 +15,87 @@ import Home from './screens/home';
 import Quiz from './screens/quiz';
 import MetronomeSkill from './screens/metronome';
 import Orientation from 'react-native-orientation';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 
 const Stack = createStackNavigator();
 const Tab = createMaterialBottomTabNavigator();
+const TabTop = createMaterialTopTabNavigator();
 
 function LogBook() {
   return (
-    <Tab.Navigator
-      activeColor="white"
-      inactiveColor="black"
-      barStyle={{backgroundColor: '#BDBDBD', fontSize: 10}}>
-      <Tab.Screen
+   <TabTop.Navigator
+      tabBarOptions={{
+        indicatorStyle: {
+          backgroundColor: 'transparent',
+        },
+        labelStyle: {
+          fontSize: 14,
+          fontFamily: 'Gilroy-Bold',
+        },
+        style: {backgroundColor: '#81C9C9'},
+        tabStyle: {
+          marginTop: Dimensions.get('window').height * 0.08,
+          marginBottom: Dimensions.get('window').height * 0.015,
+          marginHorizontal: Dimensions.get('window').width * 0.07,
+          width: '120%',
+        },
+        activeTintColor: '#F7F7F7',
+        inactiveTintColor: '#3B3A39',
+      }}>
+      <TabTop.Screen
         name="Scale"
         component={LogBookScale}
         options={{
           tabBarLabel: 'Scale',
-          tabBarIcon: ({color, size}) => (
-            <Image
-              style={{height: 20, width: 30}}
-              source={require('./media/img/1piano.png')}
-            />
-          ),
         }}
       />
-      <Tab.Screen
+      <TabTop.Screen
         name="Listen Scale"
         component={LogBookListen}
         options={{
           tabBarLabel: 'Listen Skill',
-          tabBarIcon: ({color, size}) => (
-            <Image
-              style={{height: 23, width: 30}}
-              source={require('./media/img/listening.png')}
-            />
-          ),
         }}
       />
-    </Tab.Navigator>
+    </TabTop.Navigator>
   );
 }
 
 function Settings() {
   return (
-    <Tab.Navigator
-      activeColor="white"
-      inactiveColor="black"
-      barStyle={{backgroundColor: '#BDBDBD', fontSize: 10}}>
-      <Tab.Screen
+    <TabTop.Navigator
+      tabBarOptions={{
+        indicatorStyle: {
+          backgroundColor: 'transparent',
+        },
+        labelStyle: {
+          fontSize: 14,
+          fontFamily: 'Gilroy-Bold',
+        },
+        style: {backgroundColor: '#81C9C9'},
+        tabStyle: {
+          marginTop: Dimensions.get('window').height * 0.08,
+          marginBottom: Dimensions.get('window').height * 0.015,
+          marginHorizontal: Dimensions.get('window').width * 0.07,
+          width: '120%',
+        },
+        activeTintColor: '#F7F7F7',
+        inactiveTintColor: '#3B3A39',
+      }}>
+      <TabTop.Screen
         name="Scale"
         component={SettingsScale}
         options={{
           tabBarLabel: 'Scale',
-          tabBarIcon: ({color, size}) => (
-            <Image
-              style={{height: 20, width: 30}}
-              source={require('./media/img/1piano.png')}
-            />
-          ),
         }}
       />
-      <Tab.Screen
+      <TabTop.Screen
         name="Listen Scale"
         component={SettingsListen}
         options={{
           tabBarLabel: 'Listen Skill',
-          tabBarIcon: ({color, size}) => (
-            <Image
-              style={{height: 23, width: 30}}
-              source={require('./media/img/listening.png')}
-            />
-          ),
         }}
       />
-    </Tab.Navigator>
+    </TabTop.Navigator>
   );
 }
 
@@ -177,13 +185,18 @@ class App extends React.PureComponent {
             name="4"
             component={MetronomeSkill}
             options={({navigation}) => ({
+              title: 'Metronome',
               //title: 'C Major',
-              headerStyle: {
-                backgroundColor: '#E07EF9',
+               headerTransparent: true,
+               headerStyle: {
+                backgroundColor: '#81C9C9',
+              },
+              headerTitleStyle: {
+                fontFamily: 'Gilroy-Bold',
+                fontSize: 20,
+                lineHeight: 25,
+                marginHorizontal: Dimensions.get('window').width * 0.15,
               },
-              headerTintColor: '#fff',
-              title: '',
-              headerTransparent: true,
               headerBackImage: () => (
                 <Icon
                   name="chevron-left"
@@ -202,8 +215,17 @@ class App extends React.PureComponent {
             name="5"
             component={LogBook}
             options={{
-              title: 'Records',
-              headerTransparent: true,
+              title: 'Record',
+               headerTransparent: true,
+              headerStyle: {
+                backgroundColor: '#81C9C9',
+              },
+              headerTitleStyle: {
+                fontFamily: 'Gilroy-Bold',
+                fontSize: 20,
+                lineHeight: 25,
+                marginHorizontal: Dimensions.get('window').width * 0.2,
+              },
               headerBackImage: () => (
                 <Icon
                   name="chevron-left"
@@ -218,8 +240,17 @@ class App extends React.PureComponent {
             name="6"
             component={Settings}
             options={{
-              title: 'Settings ',
-              headerTransparent: true,
+              title: 'Setting',
+               headerTransparent: true,
+              headerStyle: {
+                backgroundColor: '#81C9C9',
+              },
+              headerTitleStyle: {
+                fontFamily: 'Gilroy-Bold',
+                fontSize: 20,
+                lineHeight: 25,
+                marginHorizontal: Dimensions.get('window').width * 0.2,
+              },
               headerBackImage: () => (
                 <Icon
                   name="chevron-left"

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

@@ -4,6 +4,9 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.art.ARTPackage;
+//import com.reactnativecommunity.art.ARTPackage;
+//n com.reactnativecommunity.art.ARTPackage;
 //import com.reactlibrary.RNMetronomePackage;
 //import com.reactlibrary.RNMetronomePackage;
 //import com.reactlibrary.RNMetronomePackage;

android/settings.gradle

 rootProject.name = 'PianoApp'
+include ':@react-native-community_art'
+project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
+include ':@react-native-community_art'
+project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
+include ':@react-native-community_art'
+project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
 include ':react-native-metronome'
 project(':react-native-metronome').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-metronome/android')
 include ':react-native-metronome'

ios/Podfile

@@ -20,6 +20,8 @@ target 'PianoApp' do
 
   pod 'RNMetronome', :path => '../node_modules/react-native-metronome'
 
+  pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art'
+
   target 'PianoAppTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -14,10 +14,12 @@
     "@emotion/styled": "^11.1.5",
     "@miblanchard/react-native-slider": "^1.5.0",
     "@react-native-async-storage/async-storage": "^1.13.2",
+    "@react-native-community/art": "^1.2.0",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/drawer": "^5.11.4",
     "@react-navigation/material-bottom-tabs": "^5.3.13",
+    "@react-navigation/material-top-tabs": "^5.3.15",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
     "adobe-spectrum-dsp": "^0.2.0",
@@ -29,15 +31,18 @@
     "react-native-fs": "^2.16.6",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-grid-list": "^1.1.0",
+    "react-native-image-progress": "^1.1.1",
     "react-native-numeric-input": "^1.8.3",
     "react-native-orientation": "^3.1.3",
     "react-native-paper": "^4.7.1",
+    "react-native-progress": "^4.1.2",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.0",
     "react-native-sound": "^0.11.0",
     "react-native-stopwatch-timer": "^0.0.21",
     "react-native-super-grid": "^4.0.3",
+    "react-native-tab-view": "^2.16.0",
     "react-native-vector-icons": "^7.1.0",
     "react-native-web-swiper": "^2.2.1",
     "styled-components": "^5.2.1",
@@ -57,6 +62,8 @@
     "preset": "react-native"
   },
   "rnpm": {
-   "assets": ["./assets/fonts"]
-}
+    "assets": [
+      "./assets/fonts"
+    ]
+  }
 }

screens/home.js

@@ -48,16 +48,16 @@ class Home extends React.PureComponent {
       <Image source={require('../media/img/bg_overlay.png')} style={{width:'100%', height:'100%', resizeMode:'cover', position: 'absolute', marginTop:'40%'}}/>
 
         <View style={{height: 44, flexDirection: 'row', paddingHorizontal:8}}>
-        <TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('6')} >
-        <Image source={require('../media/img/btn_settings.png')}  style={{width:'100%', height:'100%'}}/>
+        <TouchableOpacity style={{height: 44,flex:2}} onPress={() => this.props.navigation.navigate('6')} >
+        <Image source={require('../media/img/btn_settings.png')}  style={{width:'100%', height:'100%', padding:5}}/>
         </TouchableOpacity>
 
-        <View style={{flex:9,justifyContent: 'center', paddingHorizontal:config.deviceWidth * 0.21}}>
+        <View style={{flex:9,justifyContent: 'center', paddingHorizontal:config.deviceWidth * 0.08}}>
         <Text style={{color: '#3B3A39',fontSize: 20,lineHeight:25,fontFamily: 'Gilroy-Bold',textAlign: 'center'}}>Lessons</Text>
         </View>
 
-         <TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('5')}>
-        <Image source={require('../media/img/btn_history.png')} style={{width:'100%', height:'100%'}}/>
+         <TouchableOpacity style={{height: 44,flex:2}} onPress={() => this.props.navigation.navigate('5')}>
+        <Image source={require('../media/img/btn_history.png')} style={{width:'100%', height:'100%', padding:5}}/>
         </TouchableOpacity>
 
          </View>

screens/quiz.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable no-unused-vars */
+/* eslint-disable prettier/prettier */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
 /* eslint-disable prettier/prettier */
@@ -654,6 +656,7 @@ class Quiz extends React.Component {
       corrSound.play((success) => {
         if (success) {
          // console.log('successfully finished playing');
+           corrSound.release();
         } else {
          // console.log('playback failed due to audio decoding errors');
           corrSound.release();
@@ -672,6 +675,7 @@ class Quiz extends React.Component {
       wrongSound.play((success) => {
         if (success) {
          // console.log('successfully finished playing');
+          wrongSound.release();
         } else {
          // console.log('playback failed due to audio decoding errors');
           wrongSound.release();

screens/settingListen.js

@@ -11,6 +11,7 @@ import {
   ScrollView,
   BackHandler,
   Pressable,
+  Dimensions,
 } from 'react-native';
 import styles from '../style/styleSettings';
 import Orientation from 'react-native-orientation';
@@ -153,28 +154,35 @@ export default class SettingsListen extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-      <ImageBackground
-          source={require('../media/img/background.jpg')}
-          style={styles.imagebackground}>
           <SafeAreaView>
           <View style={styles.view1}>
+            <View>
           <Text style={styles.textques}>No. of Questions :  </Text>
+          </View>
+          <View style={{marginHorizontal: Dimensions.get('window').width * 0.15}}>
           <NumericInput
             value={this.state.value}
             minValue={1}
             maxValue={100}
             onChange={this.onChange.bind(this)}
             onLimitReached={(isMax,msg) => console.log(isMax,msg)}
-            totalWidth={150}
-            totalHeight={40}
+            totalWidth={250}
+            totalHeight={50}
             iconSize={25}
             step={1}
             valueType="real"
             rounded
             textColor="black"
             iconStyle={{ color: 'white' }}
-            rightButtonBackgroundColor="black"
-            leftButtonBackgroundColor="black"/>
+            rightButtonBackgroundColor="#81C9C9"
+            leftButtonBackgroundColor="#81C9C9"/>
+            </View>
+            <View>
+          <Text style={styles.textques2}>Major Lists</Text>
+          </View>
+          <View>
+          <Text style={styles.textques3}>3/7 octave are selected</Text>
+          </View>
             </View>
             <ScrollView style={styles.scroll}>
               <View
@@ -184,12 +192,12 @@ export default class SettingsListen extends React.Component {
                     <Pressable
                       style={
                         notes.find((element) => element === item)
-                          ? styles.selectedKeywordStyle
-                          : styles.buttonStyle
+                          ? styles.selectedKeywordStyleOct
+                          : styles.buttonStyleOct
                       }
                       onPress={() => this.toggleKeyword(item)}
                       key={id}>
-                      <Text style={styles.textname}>
+                      <Text style={styles.textnameOct}>
                         {item}
                       </Text>
                     </Pressable>
@@ -198,7 +206,6 @@ export default class SettingsListen extends React.Component {
               </View>
             </ScrollView>
           </SafeAreaView>
-          </ImageBackground>
       </View>
     );
   }

screens/settingScale.js

@@ -11,6 +11,7 @@ import {
   ScrollView,
   BackHandler,
   Pressable,
+  Dimensions,
 } from 'react-native';
 import styles from '../style/styleSettings';
 import Orientation from 'react-native-orientation';
@@ -146,28 +147,35 @@ export default class SettingsScale extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-      <ImageBackground
-          source={require('../media/img/background.jpg')}
-          style={styles.imagebackground}>
           <SafeAreaView>
           <View style={styles.view1}>
+          <View>
           <Text style={styles.textques}>No. of Questions :  </Text>
+          </View>
+          <View style={{marginHorizontal: Dimensions.get('window').width * 0.15}}>
           <NumericInput
             value={this.state.value}
             minValue={1}
             maxValue={100}
             onChange={this.onChange.bind(this)}
             onLimitReached={(isMax,msg) => console.log(isMax,msg)}
-            totalWidth={150}
-            totalHeight={40}
+            totalWidth={250}
+            totalHeight={50}
             iconSize={25}
             step={1}
             valueType="real"
             rounded
             textColor="black"
             iconStyle={{ color: 'white' }}
-            rightButtonBackgroundColor="black"
-            leftButtonBackgroundColor="black"/>
+            rightButtonBackgroundColor="#81C9C9"
+            leftButtonBackgroundColor="#81C9C9"/>
+            </View>
+            <View>
+          <Text style={styles.textques2}>Major Lists</Text>
+          </View>
+          <View>
+          <Text style={styles.textques3}>4/28 major are selected</Text>
+          </View>
             </View>
             <ScrollView style={styles.scroll}>
               <View
@@ -194,7 +202,6 @@ export default class SettingsScale extends React.Component {
               </View>
             </ScrollView>
           </SafeAreaView>
-          </ImageBackground>
       </View>
     );
   }

style/styleListen.js

@@ -269,7 +269,7 @@ export default StyleSheet.create({
     marginLeft: config.deviceHeight * 1.0,
   },
   buttonStyle: {
-    width: config.deviceWidth * 0.075,
+    width: config.deviceWidth / 14,
     height:'70%',
     alignItems: 'center',
     backgroundColor: 'white',
@@ -278,7 +278,7 @@ export default StyleSheet.create({
     borderBottomWidth: 1,
   },
   selectedKeywordStyle: {
-    width: config.deviceWidth * 0.075,
+    width: config.deviceWidth / 14,
     height:'70%',
     alignItems: 'center',
     backgroundColor: '#EEA1E1',
@@ -301,4 +301,21 @@ export default StyleSheet.create({
     width: '1.5%',
     position: 'absolute',
   },
+
+  anime: {
+    backgroundColor:'white',
+    width: '100%',
+    height: 20,
+    borderColor: '#FAA',
+    justifyContent: 'center',
+  },
+  inner:{
+    width: '100%',
+    height: 20,
+    backgroundColor:'green',
+  },
 });
+
+//
+//  height: '75%',
+  //  width: Dimensions.get('window').width * 0.06,

style/styleSettings.js

@@ -12,29 +12,52 @@ export default StyleSheet.create({
     justifyContent: 'center',
     width: '100%',
     height: '100%',
+    backgroundColor:'#FFFBF0',
   },
   buttonStyle: {
-    flex: 1,
-    width: config.deviceWidth * 0.4,
+    width: 164,
+    height : 164,
     alignItems: 'center',
-    borderWidth: 3,
-    borderColor: 'white',
-    borderRadius: 10,
+    borderWidth: 0.5,
+    borderColor: '#B3B3B3',
+    borderRadius: 8,
     backgroundColor: 'rgba(52, 52, 52, 0.0)',
     opacity:0.4,
     padding: 10,
-    marginRight: config.deviceWidth * 0.03,
     marginBottom: config.deviceHeight * 0.03,
   },
   selectedKeywordStyle: {
-    flex: 1,
-    width: config.deviceWidth * 0.4,
+    width: 164,
+    height : 164,
     alignItems: 'center',
-    borderWidth: 3,
-    borderColor: 'black',
-    backgroundColor: 'white',
-    borderRadius: 10,
-    marginRight: config.deviceWidth * 0.03,
+    borderWidth: 0.5,
+    borderColor: '#B3B3B3',
+    backgroundColor: '#3D9090',
+    borderRadius: 8,
+    marginBottom: config.deviceHeight * 0.03,
+    padding: 10,
+  },
+
+   buttonStyleOct: {
+    width: 164,
+    height : 70,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: '#B3B3B3',
+    borderRadius: 8,
+    backgroundColor: 'rgba(52, 52, 52, 0.0)',
+    opacity:0.4,
+    padding: 10,
+    marginBottom: config.deviceHeight * 0.03,
+  },
+  selectedKeywordStyleOct: {
+    width: 164,
+    height : 70,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: '#B3B3B3',
+    backgroundColor: '#3D9090',
+    borderRadius: 8,
     marginBottom: config.deviceHeight * 0.03,
     padding: 10,
   },
@@ -43,36 +66,63 @@ export default StyleSheet.create({
     height: '100%',
   },
   view1: {
-    alignItems:'center',
-    marginTop: '15%',
-    marginLeft: config.deviceWidth * 0.08,
-    marginRight: config.deviceWidth * 0.1,
     flexDirection: 'row',
     flexWrap: 'wrap',
+    height: '30%',
+    alignItems: 'center',
   },
   textques: {
-    fontSize: 15,
-    marginRight:9,
-    fontFamily: 'sans-serif',
+    fontSize: 16,
+    fontFamily: 'Gilroy-Bold',
+    lineHeight: 20,
+    marginHorizontal: config.deviceWidth * 0.292,
+    marginVertical: config.deviceHeight * 0.02,
+   },
+
+   textques2: {
+    fontSize: 16,
+    fontFamily: 'Gilroy-Bold',
+    lineHeight: 20,
+    marginTop: config.deviceHeight * 0.02,
+    marginHorizontal: config.deviceWidth * 0.37,
+   },
+
+    textques3: {
+    fontSize: 14,
+    fontFamily: 'Gilroy',
+    lineHeight: 20,
+    marginHorizontal: config.deviceWidth * 0.28,
+    marginVertical: config.deviceHeight * 0.02,
    },
   scroll: {
-    marginTop: '5%',
+    marginTop: '4%',
+    backgroundColor: '#F7F7F7',
 },
   view2: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    width: config.deviceWidth,
-    marginLeft: config.deviceWidth * 0.08,
-    marginRight: config.deviceWidth * 0.1,
-    marginBottom: config.deviceHeight * 0.12,
+    justifyContent: 'space-between',
+    marginTop: config.deviceHeight * 0.03,
+    marginLeft: config.deviceWidth * 0.027,
+    marginRight: config.deviceWidth * 0.027,
+    marginBottom: config.deviceHeight * 0.1,
 },
 textname: {
   textAlign: 'center',
-  fontFamily: 'sans-serif',
-  paddingBottom: 10,
+  fontFamily: 'Gilroy-Bold',
+  fontSize:16,
+  lineHeight:20,
+},
+textnameOct: {
+  textAlign: 'center',
+  fontFamily: 'Gilroy-Bold',
+  fontSize:16,
+  lineHeight:20,
+  paddingHorizontal: config.deviceWidth * 0.05,
+  paddingVertical: config.deviceHeight * 0.02,
 },
 image: {
-  width: 100,
-  height: 100,
+  width: 115,
+  height: 115,
 },
 });

yarn.lock

@@ -1264,6 +1264,15 @@
   dependencies:
     deep-assign "^3.0.0"
 
+"@react-native-community/art@^1.1.2", "@react-native-community/art@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
+  integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
+  dependencies:
+    art "^0.10.3"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+
 "@react-native-community/cli-debugger-ui@^4.13.1":
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz#07de6d4dab80ec49231de1f1fbf658b4ad39b32c"
@@ -1445,6 +1454,13 @@
   resolved "https://registry.yarnpkg.com/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-5.3.13.tgz#c9657008894b2ec85ed3560731e8ea6220151e5a"
   integrity sha512-yx/V8wnjZPq+1Gbxeb9G2xvavS52bRB9YoTkIHbSRuug6VBLSc4yK3N1tWpc5rytQZegIL0h63jOn65uo1hm/g==
 
+"@react-navigation/material-top-tabs@^5.3.15":
+  version "5.3.15"
+  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.15.tgz#d2719db5f6af4bb372371619ea84fac402295784"
+  integrity sha512-oVu+KjHhLlzbkjFEyZcS2Tq/I5rf8WigtoeAYVisPncZQjnZXT3rsswBm3spN4CnJUQUDPKhg6pH8KK1iFIKzw==
+  dependencies:
+    color "^3.1.3"
+
 "@react-navigation/native@^5.8.10":
   version "5.8.10"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.8.10.tgz#3fe806abff9efb085bcf595212803dd05a1347ca"
@@ -1957,6 +1973,11 @@ array.prototype.flatmap@^1.2.3:
     es-abstract "^1.18.0-next.1"
     function-bind "^1.1.1"
 
+art@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
+  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
+
 asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -6190,7 +6211,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6310,6 +6331,13 @@ react-native-grid-list@^1.1.0:
   dependencies:
     prop-types "^15.6.0"
 
+react-native-image-progress@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-image-progress/-/react-native-image-progress-1.1.1.tgz#95bbe0875c7ebd54286df69cb37b598b94c54eb0"
+  integrity sha512-5rI2UjUo1bJoggU3lZAa+Wv29bm+N322XVR49mxfczfhaOyFdoXMIRgd5x2eXG+RQi9PcLleD6wxVDxGAPPO9Q==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
@@ -6342,6 +6370,14 @@ react-native-pixel-perfect@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz#8e6dc97e377caa4bd07f9e584ba438d53c0e25e8"
   integrity sha512-0IvYCNkxuQbQC9q4tI+C3i6o38nbx916p7gBRBWuPxDhKBCuTkVV3VukcfW6vtjRlwQm6kwQcF9OtI+yUBt+YA==
 
+react-native-progress@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"
+  integrity sha512-sFHs6k6npWDOyvQoL2NeyOyHb+q1s8iOAOeyzoObN77zkxOAsgJt9FcSJLRq70Mw7qSGNJMFDqCgvYR1huYRwQ==
+  dependencies:
+    "@react-native-community/art" "^1.1.2"
+    prop-types "^15.7.2"
+
 react-native-ratings@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-7.3.0.tgz#32e11e4ed944ba8adbbc995d601df3f131619b6f"
@@ -6396,6 +6432,11 @@ react-native-super-grid@^4.0.3:
   dependencies:
     prop-types "^15.6.0"
 
+react-native-tab-view@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
+  integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
+
 react-native-text@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/react-native-text/-/react-native-text-1.0.8.tgz#d1004dfeb675de98fe0915b10c69ddeb977f6d55"