Design changes:

- corrected colors
- updated icons
- display logo in toolbar
- show page title in toolbar

App.js

@@ -40,6 +40,8 @@ import VideoCall from './VideoCall';
 import ErrorPage from './ErrorPage';
 import { themeDark, themeLight, useTheme } from './Theme';
 
+import Logo from "./img/logo.svg";
+
 import { version } from './package.json';
 
 type Props = {};
@@ -48,7 +50,7 @@ const BASE_URL = 'https://una.io/'; // site URL
 const MIX_LIGHT = '12'; // template styles mix for light mode
 const MIX_DARK = '13'; // template styles mix for dark mode
 const TEMPLATE = 'protean'; // template name
-const TITLE = 'UNA.IO'; // app title
+const TITLE = 'UNA.IO | Community Management System'; // homepage title
 const ONESIGNALAPPID = ''; // you can obtain one from https://onesignal.com/
 const PAYMENTS_CALLBACK = ''; // empty string means payment functionality is disabled
 
@@ -67,7 +69,7 @@ export default class App extends Component<Props> {
 
         this.state = {
             url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' === colorScheme ? MIX_DARK : MIX_LIGHT}`,
-            status: 'No Page Loaded',
+            status: '',
             backButtonEnabled: false,
             forwardButtonEnabled: false,
             loading: this.loading,
@@ -209,11 +211,12 @@ export default class App extends Component<Props> {
     
     onHomeMenu() {
         this.endVideoCall();
-        if (`${BASE_URL}` == this.state.url || this.state.url.startsWith(`${BASE_URL}?skin=${TEMPLATE}`) || `${BASE_URL}index.php` == this.state.url) {
+        if (`${BASE_URL}` == this.state.url || this.state.url.startsWith(`${BASE_URL}?skin=${TEMPLATE}`) || `${BASE_URL}index.php` == this.state.url) {        
             this.injectJavaScript("bx_mobile_apps_close_sliding_menus()");
         } else {
             this.setState ({
                 url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == this.state.colorScheme ? MIX_DARK : MIX_LIGHT}`,
+                status: '',
                 searchbar: false,
                 key: this.state.key + 1,
             });
@@ -354,7 +357,7 @@ export default class App extends Component<Props> {
 
         return true;
     }
-    
+  
     javascriptToInject () { 
         return 'glBxNexusApp = ' + JSON.stringify({ver:version});
     }
@@ -568,7 +571,7 @@ export default class App extends Component<Props> {
         this.refs.drawer._root.open()
     }
     
-    render() {        
+    render() {
         var sWebview = (
                 <WebView
                     useWebKit={true}
@@ -584,7 +587,7 @@ export default class App extends Component<Props> {
                     injectedJavaScript={this.javascriptToInject()}
                     onShouldStartLoadWithRequest={this.onWebViewShouldStartLoadWithRequest.bind(this)}
                     onNavigationStateChange={this.onWebViewNavigationStateChange.bind(this)}
-                    style={{flex: 1}}
+                    style={styles.webview}
                     source={{uri: this.state.url }}
                     userAgent={"UNAMobileApp/Mobile (" + Platform.OS + ")"}
                     onMessage={this.onWebViewMessage.bind(this)}
@@ -592,6 +595,8 @@ export default class App extends Component<Props> {
                     onLoad={this.onWebViewLoadEnd.bind(this)}
                     onLoadStart={this.onWebViewLoadStart.bind(this)}
                     renderError={this.onWebViewRenderError.bind(this)}
+                    startInLoadingState={true}
+                    renderLoading={() => <View style={styles.webviewFirstLoad} />}
                 />
         );
         return (
@@ -629,7 +634,7 @@ function UnaApp(o) {
                 {o.state.searchbar ? (
                     <UnaToolbarSearch onSearch={o.onSearch} onSearchCancel={o.onSearchCancelMenu} />
                 ) : (
-                    <UnaToolbar loading={o.state.loading} loggedin={o.state.data.loggedin} backButtonEnabled={o.state.backButtonEnabled} onMainMenu={o.onMainMenu} onHomeMenu={o.onHomeMenu} onSearchMenu={o.onSearchMenu} onBackAndMainMenu={o.onBackAndMainMenu} />
+                    <UnaToolbar loading={o.state.loading} loggedin={o.state.data.loggedin} backButtonEnabled={o.state.backButtonEnabled} onMainMenu={o.onMainMenu} onHomeMenu={o.onHomeMenu} onSearchMenu={o.onSearchMenu} onBackAndMainMenu={o.onBackAndMainMenu} title={o.state.status} url={o.state.url} />
                 ) }
 
                 {o.state.videoCall && o.state.videoCallUri ? (
@@ -654,7 +659,7 @@ function UnaFooter(o) {
             {!('decorous' == TEMPLATE && Platform.isPad) &&
                 (<FooterTab style={styles.footerTab}>
                     <Button vertical onPress={o.onMainMenu}>
-                        <Icon style={styles.footerIcon} name="bars" type="FontAwesome5" />
+                        <Icon style={styles.footerIcon} name="menu-outline" type="Ionicons" />
                     </Button>
                 </FooterTab>)
             }
@@ -663,19 +668,19 @@ function UnaFooter(o) {
                     {o.bubbles['notifications-preview'] > 0 && 
                         (<Badge><Text>{o.bubbles['notifications-preview']}</Text></Badge>)
                     }
-                    <Icon style={styles.footerIcon} name="bell" type="FontAwesome5" solid />
+                    <Icon style={styles.footerIcon} name="notifications-outline" type="Ionicons" solid />
                 </Button>
             </FooterTab>
 {/*
             <FooterTab style={styles.footerTab}>
                 <Button vertical onPress={o.onVideoCallToggle}>
-                    <Icon style={styles.footerIcon} name="video" type="FontAwesome5" solid />
+                    <Icon style={styles.footerIcon} name="videocam-outline" type="Ionicons" solid />
                 </Button>
             </FooterTab>
 */}
             <FooterTab style={styles.footerTab}>
                 <Button vertical onPress={o.onAddMenu}>
-                    <Icon style={styles.footerIcon} name="plus-circle" type="FontAwesome5" solid />
+                    <Icon style={styles.footerIcon} name="add-circle-outline" type="Ionicons" solid />
                 </Button>
             </FooterTab>
             <FooterTab style={styles.footerTab}>
@@ -683,7 +688,7 @@ function UnaFooter(o) {
                     {o.bubbles['notifications-messenger'] > 0 && 
                         (<Badge><Text>{o.bubbles['notifications-messenger']}</Text></Badge>)
                     }
-                    <Icon style={styles.footerIcon} name="comments" type="FontAwesome5" solid />
+                    <Icon style={styles.footerIcon} name="chatbubbles-outline" type="Ionicons" solid />
                 </Button>
             </FooterTab>                    
             <FooterTab style={styles.footerTab}>
@@ -691,7 +696,7 @@ function UnaFooter(o) {
                     {o.bubbles['account'] > 0 && 
                         (<Badge><Text>{o.bubbles['account']}</Text></Badge>)
                     }
-                    <Icon style={styles.footerIcon} name="user" type="FontAwesome5" solid />
+                    <Icon style={styles.footerIcon} name="person-circle-outline" type="Ionicons" solid />
                 </Button>
             </FooterTab>
         </Footer>
@@ -708,26 +713,27 @@ function UnaToolbar(o) {
                 o.loggedin ? (
                     (o.backButtonEnabled || Platform.OS === 'android') && 
                         (<Button style={Platform.OS === 'android' ? styles.buttonLeftTopAndroid : styles.buttonLeftTopIos} transparent disabled={!o.backButtonEnabled} onPress={o.onBackAndMainMenu}>
-                        <Icon name="ios-arrow-back" style={styles.headerIcon} />
+                        <Icon name="arrow-back-outline" type="Ionicons" style={styles.headerIcon} />
                         </Button>)
                     
                 ) : (
                     <Button style={Platform.OS === 'android' ? styles.buttonLeftTopAndroid : styles.buttonLeftTopIos} transparent onPress={o.onMainMenu}>
-                        <Icon name='menu' style={styles.headerIcon} />
+                        <Icon name="menu-outline" type="Ionicons" style={styles.headerIcon} />
                     </Button>
                 )
             )}
             </Left>
-{/*
-            <Body style={Platform.OS === 'android' && {flexDirection: 'row', justifyContent: 'flex-start'}}>
-*/}
             <Body>
-                <Title style={styles.headerTitle} onPress={o.onHomeMenu}>{TITLE}</Title>
+                {!o.title || TITLE == o.title || o.loading ? (
+                    <Logo width={99} height={28} />
+                ) : (
+                    <Text numberOfLines={1} ellipsizeMode="tail" style={styles.headerTitle}>{o.title}</Text>
+                )}
             </Body>
             <Right>
                 {o.loggedin && (
                     <Button transparent>
-                        <Icon name='search' onPress={o.onSearchMenu} style={styles.headerIcon} />
+                        <Icon name='search-outline' type="Ionicons" onPress={o.onSearchMenu} style={styles.headerIcon} />
                     </Button>
                 )}
             </Right>
@@ -737,13 +743,12 @@ function UnaToolbar(o) {
 
 function UnaToolbarSearch(o) {
     return (
-        <Header androidStatusBarColor={useTheme('colors.statusBar')} transparent={false} iosBarStyle={useTheme('iosBarStyle')} style={styles.header} searchBar rounded>
-          <Item>
-            <Icon name="search" />
-            <Input placeholder="Search" onEndEditing={o.onSearchCancel} onSubmitEditing={o.onSearch} />
+        <Header androidStatusBarColor={useTheme('colors.statusBar')} transparent={false} iosBarStyle={useTheme('iosBarStyle')} style={styles.header} searchBar rounded noShadow>
+          <Item style={styles.searchInputItem}>
+            <Input placeholder="Search..." onEndEditing={o.onSearchCancel} onSubmitEditing={o.onSearch} style={styles.searchInput} placeholderTextColor={useTheme('colors.searchInputPlaceholderText')} />
           </Item>
           <Button transparent onPress={o.onSearchCancel}>
-            <Text style={styles.headerIcon}>Cancel</Text>
+            <Icon name='close-outline' type="Ionicons" style={styles.headerIcon} />
           </Button>
         </Header>
     );
@@ -754,18 +759,18 @@ function UnaDrawer(o) {
         <Container style={styles.drawerContainer}>
             <Content>
                 <View style={styles.drawerImageContainer}>
-                    <Image style={styles.drawerImage} source={require('./img/logo-loading.png')} />
+                    <Image style={styles.drawerImage} source={require('./img/logo-drawer.png')} />
                 </View>
                 <Button style={styles.drawerButton} iconLeft transparent onPress={o.onLogin}>
-                    <Icon style={styles.drawerButtonIcon} name='key' type="FontAwesome5" solid />
+                    <Icon style={styles.drawerButtonIcon} name='key-outline' type="Ionicons" solid />
                     <Text style={styles.drawerButtonText}>Login</Text>
                 </Button>
                 <Button style={styles.drawerButton} iconLeft transparent onPress={o.onJoin}>
-                    <Icon style={styles.drawerButtonIcon} name='plus-circle' type="FontAwesome5" solid />
+                    <Icon style={styles.drawerButtonIcon} name='add-circle-outline' type="Ionicons" solid />
                     <Text style={styles.drawerButtonText}>Join</Text>
                 </Button>
                 <Button style={styles.drawerButton} iconLeft transparent onPress={o.onForotPassword}>
-                    <Icon style={styles.drawerButtonIcon} name='lock' type="FontAwesome5" solid />
+                    <Icon style={styles.drawerButtonIcon} name='lock-closed-outline' type="Ionicons" solid />
                     <Text style={styles.drawerButtonText}>Forgot Password</Text>
                 </Button>
             </Content>
@@ -778,29 +783,61 @@ const styles = new StyleSheet.create({
         backgroundColor: useTheme('colors.background'),
         flex: 1
     },
+    webview: {
+        flex: 1,
+        backgroundColor: 'transparent',
+    },
+    webviewFirstLoad: {
+        flex: 9999999999,
+        backgroundColor: useTheme('colors.background'),
+    },
     header: {
         backgroundColor: useTheme('colors.primary'),
         height: 46, paddingTop:0, // tmp fix - https://github.com/GeekyAnts/NativeBase/issues/3095
+        borderBottomWidth: 0.5,
+        borderBottomColor: useTheme('colors.toolbarBorder'),
     },
     headerTitle: {
         color: useTheme('colors.textOnPrimary'),
+        fontSize: 22,
+    },
+    headerImage: {
+        width: 104,
+        height: 28,
     },
     headerIcon: {
         color: useTheme('colors.textOnPrimary'),
+        fontSize: 28,
+    },
+    searchInputItem: {
+        borderColor: useTheme('colors.searchInputBorder'),
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        borderLeftWidth: 1,
+        borderBottomWidth: 1,
+        backgroundColor: useTheme('colors.searchInputBackground'),
+    },
+    searchInput: {
+        color: useTheme('colors.searchInputText'), 
+        paddingLeft: 15, 
+        paddingRight: 15
     },
     footer: {
         backgroundColor: useTheme('colors.primary'),
+        borderTopWidth: 0.5,
+        borderTopColor: useTheme('colors.toolbarBorder'),
     },
     footerTab: {
         backgroundColor: useTheme('colors.primary'),
     },
     footerIcon: {
         color: useTheme('colors.textOnPrimary'),
+        fontSize: 28,
     },
 
     containerVideoCall: {
         backgroundColor: '#000',
-        flex: 999999999999,
+        flex: 9999999999,
     },
 
     loadingIndicator: {
@@ -810,7 +847,6 @@ const styles = new StyleSheet.create({
     buttonLeftTopAndroid: {
     },
     buttonLeftTopIos: {
-        marginLeft: 5,
     },
     drawerContainer: {
         backgroundColor: useTheme('colors.drawerBackground'),
@@ -837,5 +873,5 @@ const styles = new StyleSheet.create({
     },
     drawerButtonText: {
         color: useTheme('colors.drawerText'),
-    }
+    },
 });

Theme.js

@@ -5,28 +5,38 @@ const themeDark = {
     dark: true,
     iosBarStyle: 'light-content',
     colors: {
-        primary: '#1890ff',
-        textOnPrimary: '#f3f4f5',
-        background: '#123',
-        text: '#f3f4f5',
+        primary: '#111827',
+        textOnPrimary: '#6B7280',
+        background: '#000000',
+        toolbarBorder: '#1F2937',
+        text: '#6B7280',
         drawerBackground: '#f3f4f5',
         drawerText: '#1890ff',
-        statusBar: '#076fd3',
-        activityIndicator: '#f3f4f5',
+        statusBar: '#000000',
+        activityIndicator: '#6B7280',
+        searchInputBackground: '#000000',
+        searchInputBorder: '#1F2937',
+        searchInputText: '#6B7280',
+        searchInputPlaceholderText: '#8F9BB3',
     }
 };
 const themeLight = {
     dark: false,
-    iosBarStyle: 'light-content',
+    iosBarStyle: 'dark-content',
     colors: {
-        primary: '#1890ff',
-        textOnPrimary: '#f3f4f5',
-        background: '#edf1f7',
-        text: '#595959',
-        drawerBackground: '#edf1f7',
-        drawerText: '#1890ff',
-        statusBar: '#076fd3',
-        activityIndicator: '#f3f4f5',
+        primary: '#fff',
+        textOnPrimary: '#6B7280',
+        background: '#F3F4F6',
+        toolbarBorder: '#E4E9F2',
+        text: '#6B7280',
+        drawerBackground: '#F3F4F6',
+        drawerText: '#6B7280',
+        statusBar: '#fff',
+        activityIndicator: '#6B7280',
+        searchInputBackground: '#F7F9FC',
+        searchInputBorder: '#E4E9F2',
+        searchInputText: '#6B7280',
+        searchInputPlaceholderText: '#8F9BB3',
     }
 };
 

img/logo.svg

@@ -0,0 +1,45 @@
+<svg width="170" height="48" viewBox="0 0 170 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 4">
+<g id="mark">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M47.9999 24.0801C47.9999 32.4811 43.6673 39.8627 37.1247 44.1335C33.3711 46.5764 28.8807 48 24.0746 48C23.8992 48 23.7413 48 23.5659 48C23.4081 48 23.2326 48 23.0748 47.9825C22.952 47.9825 22.8293 47.9649 22.7064 47.9649C22.5662 47.9649 22.4258 47.9473 22.2855 47.9473C22.1451 47.9296 22.0049 47.9297 21.8645 47.9121C21.6716 47.8946 21.5487 47.8945 21.4085 47.877C21.2156 47.8594 21.0225 47.8242 20.8296 47.8066C20.7419 47.7891 20.6367 47.7891 20.549 47.7716C20.4086 47.754 20.2508 47.7188 20.1105 47.7012C19.8473 47.6486 19.5842 47.6133 19.3386 47.5606C19.251 47.5431 19.1633 47.5254 19.0755 47.5078C18.9528 47.4727 18.83 47.4552 18.7073 47.42C18.5493 47.3849 18.4091 47.3673 18.2862 47.3322C18.0407 47.2794 17.7951 47.209 17.532 47.1388C17.4267 47.1036 17.3216 47.0861 17.2163 47.051C16.9532 46.9631 16.6725 46.8927 16.4094 46.7872C16.2866 46.7521 16.1639 46.6995 16.041 46.6643C15.8832 46.6116 15.7604 46.5764 15.6377 46.5237C15.5324 46.4886 15.4271 46.4358 15.3219 46.4007C15.1466 46.3303 14.9711 46.26 14.8132 46.1898C14.708 46.137 14.6027 46.1019 14.4975 46.0491C14.3572 45.9964 14.2344 45.9437 14.1116 45.8735C13.9888 45.8207 13.866 45.7503 13.7257 45.6976C13.4977 45.5922 13.2521 45.4692 13.0241 45.3462C12.761 45.2055 12.4979 45.065 12.2523 44.9244C12.1812 44.8836 12.1101 44.8429 12.0424 44.8021C11.3122 44.2662 11.2253 43.9311 11.1999 43.2107C11.1999 38.2844 11.1999 34.5474 11.1999 32.0001C11.1999 31.4867 11.7454 31.509 12.0641 32.0035C14.6002 35.937 19.0241 38.5446 24.057 38.5446C27.9861 38.5446 31.5644 36.9452 34.1429 34.3617C36.7212 31.7781 38.3175 28.2104 38.3175 24.2559C38.3175 16.3166 38.3175 10.362 38.3175 6.39225C38.334 5.38952 38.3423 4.90307 39.5109 5.74856C44.69 10.1396 47.9999 16.722 47.9999 24.0801Z" fill="url(#paint0_linear)"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M36.8 4.79544C36.8 9.71719 36.8 13.4524 36.8 15.9999C36.8 16.61 36.1631 16.5938 35.7816 16.0208C35.2595 15.2364 34.6603 14.51 33.9907 13.8484C31.4098 11.2585 27.8457 9.65531 23.8953 9.65531C16.0122 9.65531 9.62134 16.0683 9.62134 23.9787C9.62134 31.813 9.62134 37.6889 9.62134 41.6061C9.5877 42.5546 9.59456 43.2108 8.01114 41.8838C3.09102 37.4927 0 31.0891 0 23.9787C0 16.1034 3.77479 9.12676 9.62134 4.7575C13.6244 1.76245 18.5755 0.000661504 23.9481 0.000661504C28.3363 -0.0319573 32.4239 1.14327 35.9597 3.19089C36.5558 3.60172 36.8 3.83026 36.8 4.79544Z" fill="url(#paint1_linear)"/>
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M48.0001 33.6256C48.0001 39.2188 48.0001 43.477 48.0001 46.4C48.0001 48.0001 48.0001 48.0001 46.3939 47.9893C42.7969 47.8657 40.3804 46.6897 38.7306 44.8256C38.6665 44.7533 38.5843 44.6113 38.6026 44.4626C38.6169 44.3473 38.7171 44.2175 38.7708 44.1806C42.228 41.8028 45.1584 38.4343 47.3179 33.632C47.5548 33.1055 48.0001 33.0958 48.0001 33.6256Z" fill="url(#paint2_linear)"/>
+<path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd" d="M0 1.60132C0 4.52802 0 8.7931 0 14.3965C0 14.9198 0.414434 14.927 0.642527 14.4019C2.47321 10.1874 5.21983 6.50047 9.34921 3.61338C9.393 3.58276 9.46224 3.49539 9.46125 3.40476C9.46037 3.32353 9.39381 3.23896 9.35476 3.202C7.35976 1.3134 4.85399 0.127628 1.59101 0.0108345C0 0.00132293 0 0.0013231 0 1.60132Z" fill="url(#paint3_linear)"/>
+</g>
+<g id="text">
+<path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd" d="M88.2221 38.3361C85.1308 40.1315 82.36 40.1315 80.864 40.1315C80.8574 40.1315 80.8507 40.1315 80.8441 40.1313C80.8375 40.1315 80.8309 40.1315 80.8241 40.1315C79.3283 40.1315 76.5575 40.1315 73.466 38.3361C72.1075 37.6026 70.8426 36.6443 69.6716 35.4611C66.5571 32.3801 65 28.6503 65 24.272V8.58553C65 8.58553 69.7895 8.10577 71.3749 11.5261C71.0738 17.0328 71.0783 21.2343 71.3749 24.272C71.6806 27.2658 72.2993 29.1368 74.1485 30.9855C75.9931 32.8295 78.2249 33.7538 80.8441 33.7584C83.4632 33.7538 85.695 32.8295 87.5396 30.9855C89.3888 29.1368 90.0076 27.2658 90.3134 24.272C90.6098 21.2343 90.6143 17.0328 90.3134 11.5261C97.505 16.9196 96.6881 24.272 96.6881 24.272C96.6881 28.6503 95.131 32.3801 92.0165 35.4611C90.8455 36.6443 89.5807 37.6026 88.2221 38.3361Z" fill="url(#paint4_linear)"/>
+<path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd" d="M110.103 10.3578C113.194 8.5625 115.965 8.5625 117.461 8.5625C117.468 8.5625 117.474 8.5625 117.481 8.5625C117.488 8.5625 117.494 8.5625 117.501 8.5625C118.997 8.5625 121.768 8.5625 124.859 10.3578C126.218 11.0913 127.482 12.0497 128.654 13.2328C131.768 16.3138 133.325 20.0435 133.325 24.4219V40.1083C133.325 40.1083 128.536 40.5881 126.95 37.1678C127.251 31.661 127.247 27.4595 126.95 24.4219C126.645 21.428 126.026 19.5571 124.177 17.7083C122.332 15.8644 120.1 14.9401 117.481 14.9355C114.862 14.9401 112.63 15.8644 110.786 17.7083C108.936 19.5571 108.318 21.428 108.012 24.4219C107.715 27.4595 107.711 31.661 108.012 37.1678C100.82 31.7744 101.637 24.4219 101.637 24.4219C101.637 20.0435 103.194 16.3138 106.309 13.2328C107.48 12.0497 108.745 11.0913 110.103 10.3578Z" fill="url(#paint5_linear)"/>
+<path id="Vector_7" fill-rule="evenodd" clip-rule="evenodd" d="M169.961 23.9181C169.982 24.0768 169.994 24.2447 169.994 24.422V40.1084C169.994 40.1084 165.205 40.5881 163.619 37.1678C163.621 37.1321 163.622 37.0964 163.625 37.0607C160.981 39.0425 157.696 40.2165 154.136 40.2165C145.393 40.2165 138.305 33.1305 138.305 24.3894C138.305 15.6485 145.393 8.5625 154.136 8.5625C162.722 8.5625 169.712 15.3952 169.961 23.9181ZM154.136 33.8165C159.344 33.8165 163.567 29.5959 163.567 24.3894C163.567 19.1831 159.344 14.9625 154.136 14.9625C148.93 14.9625 144.707 19.1831 144.707 24.3894C144.707 29.5959 148.93 33.8165 154.136 33.8165Z" fill="url(#paint6_linear)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="29.5999" y1="5.31519" x2="29.5999" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0EA5E9"/>
+<stop offset="1" stop-color="#0284C7"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="18.4" y1="0" x2="18.4" y2="42.6325" gradientUnits="userSpaceOnUse">
+<stop stop-color="#10B981"/>
+<stop offset="1" stop-color="#059669"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="43.3001" y1="33.2327" x2="43.3001" y2="47.9909" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F59E0B"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="4.73063" y1="0.00952148" x2="4.73063" y2="14.7924" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0EA5E9"/>
+<stop offset="1" stop-color="#0284C7"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="80.858" y1="8.5625" x2="80.858" y2="40.1315" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F59E0B"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="117.467" y1="8.5625" x2="117.467" y2="40.1313" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F59E0B"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="154.15" y1="8.5625" x2="154.15" y2="40.2165" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F59E0B"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+</defs>
+</svg>

ios/Podfile.lock

@@ -330,6 +330,8 @@ PODS:
     - React-perflogger (= 0.64.1)
   - RNIap (6.0.5):
     - React-Core
+  - RNSVG (12.1.1):
+    - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -388,6 +390,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNIap (from `../node_modules/react-native-iap`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -472,6 +475,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNIap:
     :path: "../node_modules/react-native-iap"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -521,6 +526,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6
   ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca
   RNIap: a5c2a6e776178f39bb29add4da1b2afce9e3fc8b
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

metro.config.js

@@ -7,19 +7,29 @@
 
 // const blacklist = require('metro-config/src/defaults/blacklist');
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-  // resolver: {
-  //  blacklistRE: blacklist([
-  //    /ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/,
-  //  ]),
-  // },
-};
+const { getDefaultConfig } = require("metro-config");
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts }
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false
+        }
+      }),
+      babelTransformerPath: require.resolve("react-native-svg-transformer")
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== "svg"),
+      sourceExts: [...sourceExts, "svg"],
+//    blacklistRE: blacklist([
+//      /ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/,
+//    ]),
+    }
+  };
+})();
 

package-lock.json

@@ -118,18 +118,18 @@
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.12.17",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz",
-      "integrity": "sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==",
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.3.tgz",
+      "integrity": "sha512-JIB2+XJrb7v3zceV2XzDhGIB902CmKGSpSl4q2C6agU9SNLG/2V1RtFRGPG1Ajh9STj3+q6zJMOC+N/pp2P9DA==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.12.13",
         "regexpu-core": "^4.7.1"
       }
     },
     "@babel/helper-define-polyfill-provider": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz",
-      "integrity": "sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.1.tgz",
+      "integrity": "sha512-x3AUTVZNPunaw1opRTa5OwVA5N0YxGlIad9xQ5QflK1uIS7PnAGGU5O2Dj/G183fR//N8AzTq+Q8+oiu9m0VFg==",
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -369,9 +369,9 @@
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.13.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz",
-      "integrity": "sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==",
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.2.tgz",
+      "integrity": "sha512-XtkJsmJtBaUbOxZsNk0Fvrv8eiqgneug0A6aqLFZ4TSkar2L5dSXWcnUKHgmjJt49pyB/6ZHvkr3dPgl9MOWRQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.13.0",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -708,11 +708,11 @@
       }
     },
     "@babel/plugin-transform-react-jsx-source": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.13.tgz",
-      "integrity": "sha512-O5JJi6fyfih0WfDgIJXksSPhGP/G0fQpfxYy87sDc+1sFmsCS6wr3aAn+whbzkhbjtq4VMqLRaSzR6IsshIC0Q==",
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.2.tgz",
+      "integrity": "sha512-OMorspVyjxghAjzgeAWc6O7W7vHbJhV69NeTGdl9Mxgz6PaweAuo7ffB9T5A1OQ9dGcw0As4SYMUhyNC4u7mVg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.12.13"
+        "@babel/helper-plugin-utils": "^7.13.0"
       }
     },
     "@babel/plugin-transform-regenerator": {
@@ -724,9 +724,9 @@
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.13.15",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.15.tgz",
-      "integrity": "sha512-d+ezl76gx6Jal08XngJUkXM4lFXK/5Ikl9Mh4HKDxSfGJXmZ9xG64XT2oivBzfxb/eQ62VfvoMkaCZUKJMVrBA==",
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.3.tgz",
+      "integrity": "sha512-t960xbi8wpTFE623ef7sd+UpEC5T6EEguQlTBJDEO05+XwnIWVfuqLw/vdLWY6IdFmtZE+65CZAfByT39zRpkg==",
       "requires": {
         "@babel/helper-module-imports": "^7.13.12",
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -1957,6 +1957,100 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
+      "integrity": "sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig=="
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz",
+      "integrity": "sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ=="
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz",
+      "integrity": "sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w=="
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz",
+      "integrity": "sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w=="
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz",
+      "integrity": "sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w=="
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz",
+      "integrity": "sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w=="
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz",
+      "integrity": "sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw=="
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz",
+      "integrity": "sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw=="
+    },
+    "@svgr/babel-preset": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-4.3.3.tgz",
+      "integrity": "sha512-6PG80tdz4eAlYUN3g5GZiUjg2FMcp+Wn6rtnz5WJG9ITGEF1pmFdzq02597Hn0OmnQuCVaBYQE1OVFAnwOl+0A==",
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^4.2.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^4.2.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^4.2.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^4.2.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "^4.3.3",
+        "@svgr/babel-plugin-svg-em-dimensions": "^4.2.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^4.2.0",
+        "@svgr/babel-plugin-transform-svg-component": "^4.2.0"
+      }
+    },
+    "@svgr/core": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-4.3.3.tgz",
+      "integrity": "sha512-qNuGF1QON1626UCaZamWt5yedpgOytvLj5BQZe2j1k1B8DUG4OyugZyfEwBeXozCUwhLEpsrgPrE+eCu4fY17w==",
+      "requires": {
+        "@svgr/plugin-jsx": "^4.3.3",
+        "camelcase": "^5.3.1",
+        "cosmiconfig": "^5.2.1"
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz",
+      "integrity": "sha512-JioXclZGhFIDL3ddn4Kiq8qEqYM2PyDKV0aYno8+IXTLuYt6TOgHUbUAAFvqtb0Xn37NwP0BTHglejFoYr8RZg==",
+      "requires": {
+        "@babel/types": "^7.4.4"
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz",
+      "integrity": "sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==",
+      "requires": {
+        "@babel/core": "^7.4.5",
+        "@svgr/babel-preset": "^4.3.3",
+        "@svgr/hast-util-to-babel-ast": "^4.3.2",
+        "svg-parser": "^2.0.0"
+      }
+    },
+    "@svgr/plugin-svgo": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz",
+      "integrity": "sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==",
+      "requires": {
+        "cosmiconfig": "^5.2.1",
+        "merge-deep": "^3.0.2",
+        "svgo": "^1.2.2"
+      }
+    },
     "@types/babel__core": {
       "version": "7.1.14",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
@@ -2054,6 +2148,11 @@
       "integrity": "sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==",
       "dev": true
     },
+    "@types/q": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
+    },
     "@types/stack-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
@@ -2736,30 +2835,30 @@
       }
     },
     "babel-plugin-polyfill-corejs2": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz",
-      "integrity": "sha512-9bNwiR0dS881c5SHnzCmmGlMkJLl0OUZvxrxHo9w/iNoRuqaPjqlvBf4HrovXtQs/au5yKkpcdgfT1cC5PAZwg==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.1.tgz",
+      "integrity": "sha512-hXGSPbr6IbjeMyGew+3uGIAkRjBFSOJ9FLDZNOfHuyJZCcoia4nd/72J0bSgvfytcVfUcP/dxEVcUhVJuQRtSw==",
       "requires": {
         "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "@babel/helper-define-polyfill-provider": "^0.2.1",
         "semver": "^6.1.1"
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz",
-      "integrity": "sha512-zZyi7p3BCUyzNxLx8KV61zTINkkV65zVkDAFNZmrTCRVhjo1jAS+YLvDJ9Jgd/w2tsAviCwFHReYfxO3Iql8Yg==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.1.tgz",
+      "integrity": "sha512-WZCqF3DLUhdTD/P381MDJfuP18hdCZ+iqJ+wHtzhWENpsiof284JJ1tMQg1CE+hfCWyG48F7e5gDMk2c3Laz7w==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "@babel/helper-define-polyfill-provider": "^0.2.1",
         "core-js-compat": "^3.9.1"
       }
     },
     "babel-plugin-polyfill-regenerator": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz",
-      "integrity": "sha512-J7vKbCuD2Xi/eEHxquHN14bXAW9CXtecwuLrOIDJtcZzTaPzV1VdEfoUf9AzcRBMolKUQKM9/GVojeh0hFiqMg==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.1.tgz",
+      "integrity": "sha512-T3bYyL3Sll2EtC94v3f+fA8M28q7YPTOZdB++SRHjvYZTvtd+WorMUq3tDTD4Q7Kjk1LG0gGromslKjcO5p2TA==",
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.2.0"
+        "@babel/helper-define-polyfill-provider": "^0.2.1"
       }
     },
     "babel-plugin-syntax-trailing-function-commas": {
@@ -2934,6 +3033,11 @@
       "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
       "integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
     "bplist-creator": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz",
@@ -3203,6 +3307,49 @@
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -3411,6 +3558,72 @@
         }
       }
     },
+    "css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "requires": {
+        "css-tree": "^1.1.2"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+          "requires": {
+            "mdn-data": "2.0.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -3630,6 +3843,27 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        }
+      }
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
     "domexception": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
@@ -3647,6 +3881,15 @@
         }
       }
     },
+    "domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "dooboolab-welcome": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.0.tgz",
@@ -3708,6 +3951,11 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
     "envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -4592,6 +4840,14 @@
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
     },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -6905,6 +7161,11 @@
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
     },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -7100,6 +7361,69 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+    },
+    "merge-deep": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.3.tgz",
+      "integrity": "sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "clone-deep": "^0.2.4",
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "clone-deep": {
+          "version": "0.2.4",
+          "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+          "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
+          "requires": {
+            "for-own": "^0.1.3",
+            "is-plain-object": "^2.0.1",
+            "kind-of": "^3.0.2",
+            "lazy-cache": "^1.0.3",
+            "shallow-clone": "^0.1.2"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "shallow-clone": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+          "integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=",
+          "requires": {
+            "is-extendable": "^0.1.1",
+            "kind-of": "^2.0.1",
+            "lazy-cache": "^0.2.3",
+            "mixin-object": "^2.0.1"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+              "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
+              "requires": {
+                "is-buffer": "^1.0.2"
+              }
+            },
+            "lazy-cache": {
+              "version": "0.2.7",
+              "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+              "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U="
+            }
+          }
+        }
+      }
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -7213,6 +7537,52 @@
             "klaw": "^1.0.0"
           }
         },
+        "metro-react-native-babel-preset": {
+          "version": "0.64.0",
+          "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.64.0.tgz",
+          "integrity": "sha512-HcZ0RWQRuJfpPiaHyFQJzcym+/dDIVUPwUAXWoub/C4GkGu+mPjp8vqK6g0FxokCnnI2TK0gZTza2IDfiNNscQ==",
+          "requires": {
+            "@babel/core": "^7.0.0",
+            "@babel/plugin-proposal-class-properties": "^7.0.0",
+            "@babel/plugin-proposal-export-default-from": "^7.0.0",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+            "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+            "@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+            "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+            "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+            "@babel/plugin-syntax-export-default-from": "^7.0.0",
+            "@babel/plugin-syntax-flow": "^7.2.0",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.0.0",
+            "@babel/plugin-transform-arrow-functions": "^7.0.0",
+            "@babel/plugin-transform-block-scoping": "^7.0.0",
+            "@babel/plugin-transform-classes": "^7.0.0",
+            "@babel/plugin-transform-computed-properties": "^7.0.0",
+            "@babel/plugin-transform-destructuring": "^7.0.0",
+            "@babel/plugin-transform-exponentiation-operator": "^7.0.0",
+            "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+            "@babel/plugin-transform-for-of": "^7.0.0",
+            "@babel/plugin-transform-function-name": "^7.0.0",
+            "@babel/plugin-transform-literals": "^7.0.0",
+            "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+            "@babel/plugin-transform-object-assign": "^7.0.0",
+            "@babel/plugin-transform-parameters": "^7.0.0",
+            "@babel/plugin-transform-react-display-name": "^7.0.0",
+            "@babel/plugin-transform-react-jsx": "^7.0.0",
+            "@babel/plugin-transform-react-jsx-self": "^7.0.0",
+            "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+            "@babel/plugin-transform-regenerator": "^7.0.0",
+            "@babel/plugin-transform-runtime": "^7.0.0",
+            "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+            "@babel/plugin-transform-spread": "^7.0.0",
+            "@babel/plugin-transform-sticky-regex": "^7.0.0",
+            "@babel/plugin-transform-template-literals": "^7.0.0",
+            "@babel/plugin-transform-typescript": "^7.5.0",
+            "@babel/plugin-transform-unicode-regex": "^7.0.0",
+            "@babel/template": "^7.0.0",
+            "react-refresh": "^0.4.0"
+          }
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -7347,6 +7717,7 @@
       "version": "0.64.0",
       "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.64.0.tgz",
       "integrity": "sha512-HcZ0RWQRuJfpPiaHyFQJzcym+/dDIVUPwUAXWoub/C4GkGu+mPjp8vqK6g0FxokCnnI2TK0gZTza2IDfiNNscQ==",
+      "dev": true,
       "requires": {
         "@babel/core": "^7.0.0",
         "@babel/plugin-proposal-class-properties": "^7.0.0",
@@ -7400,6 +7771,54 @@
         "metro-react-native-babel-preset": "0.64.0",
         "metro-source-map": "0.64.0",
         "nullthrows": "^1.1.1"
+      },
+      "dependencies": {
+        "metro-react-native-babel-preset": {
+          "version": "0.64.0",
+          "resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.64.0.tgz",
+          "integrity": "sha512-HcZ0RWQRuJfpPiaHyFQJzcym+/dDIVUPwUAXWoub/C4GkGu+mPjp8vqK6g0FxokCnnI2TK0gZTza2IDfiNNscQ==",
+          "requires": {
+            "@babel/core": "^7.0.0",
+            "@babel/plugin-proposal-class-properties": "^7.0.0",
+            "@babel/plugin-proposal-export-default-from": "^7.0.0",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+            "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+            "@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+            "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+            "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+            "@babel/plugin-syntax-export-default-from": "^7.0.0",
+            "@babel/plugin-syntax-flow": "^7.2.0",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.0.0",
+            "@babel/plugin-transform-arrow-functions": "^7.0.0",
+            "@babel/plugin-transform-block-scoping": "^7.0.0",
+            "@babel/plugin-transform-classes": "^7.0.0",
+            "@babel/plugin-transform-computed-properties": "^7.0.0",
+            "@babel/plugin-transform-destructuring": "^7.0.0",
+            "@babel/plugin-transform-exponentiation-operator": "^7.0.0",
+            "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+            "@babel/plugin-transform-for-of": "^7.0.0",
+            "@babel/plugin-transform-function-name": "^7.0.0",
+            "@babel/plugin-transform-literals": "^7.0.0",
+            "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+            "@babel/plugin-transform-object-assign": "^7.0.0",
+            "@babel/plugin-transform-parameters": "^7.0.0",
+            "@babel/plugin-transform-react-display-name": "^7.0.0",
+            "@babel/plugin-transform-react-jsx": "^7.0.0",
+            "@babel/plugin-transform-react-jsx-self": "^7.0.0",
+            "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+            "@babel/plugin-transform-regenerator": "^7.0.0",
+            "@babel/plugin-transform-runtime": "^7.0.0",
+            "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+            "@babel/plugin-transform-spread": "^7.0.0",
+            "@babel/plugin-transform-sticky-regex": "^7.0.0",
+            "@babel/plugin-transform-template-literals": "^7.0.0",
+            "@babel/plugin-transform-typescript": "^7.5.0",
+            "@babel/plugin-transform-unicode-regex": "^7.0.0",
+            "@babel/template": "^7.0.0",
+            "react-refresh": "^0.4.0"
+          }
+        }
       }
     },
     "metro-resolver": {
@@ -7578,6 +7997,22 @@
         }
       }
     },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "requires": {
+        "for-in": "^0.1.3",
+        "is-extendable": "^0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE="
+        }
+      }
+    },
     "mkdirp": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
@@ -7845,6 +8280,14 @@
         "set-blocking": "~2.0.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -7957,6 +8400,16 @@
         "has": "^1.0.3"
       }
     },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -8175,6 +8628,11 @@
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -8431,6 +8889,11 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -8717,6 +9180,54 @@
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz",
       "integrity": "sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg=="
     },
+    "react-native-svg": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.1.tgz",
+      "integrity": "sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==",
+      "requires": {
+        "css-select": "^2.1.0",
+        "css-tree": "^1.0.0-alpha.39"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+          "requires": {
+            "mdn-data": "2.0.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "react-native-svg-transformer": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/react-native-svg-transformer/-/react-native-svg-transformer-0.14.3.tgz",
+      "integrity": "sha512-agDGdMeeBAsWEgg/u7mjtR2Z3c8smGCLep/n3svwifut9dpswZCP+bSIrU8ekg6RNtxAJL+eGJbWjJ38vWxw6g==",
+      "requires": {
+        "@svgr/core": "^4.3.3",
+        "@svgr/plugin-svgo": "^4.3.1",
+        "path-dirname": "^1.0.2",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
+      }
+    },
     "react-native-vector-icons": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz",
@@ -9735,6 +10246,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+    },
     "stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -9954,6 +10470,64 @@
         }
       }
     },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10372,6 +10946,11 @@
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -10440,6 +11019,17 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      }
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

package.json

@@ -17,6 +17,8 @@
     "react-native-jitsi-meet": "^2.1.1",
     "react-native-onesignal": "^4.0.8",
     "react-native-splash-screen": "^3.2.0",
+    "react-native-svg": "^12.1.1",
+    "react-native-svg-transformer": "^0.14.3",
     "react-native-webview": "^11.4.4"
   },
   "devDependencies": {