react-native-safe-area-context#SafeAreaProvider TypeScript Examples

AppProvider = () => {
  return (
    <SafeAreaProvider>
      <StatusBar backgroundColor="transparent" translucent />
      <StorageServiceProvider>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </StorageServiceProvider>
    </SafeAreaProvider>
  );
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <StorageProvider>
        <SafeAreaProvider>
          <AppearanceProvider>
            <ThemeProvider>
              <PostProvider>
                <ModalProvider>
                  <UserEventProvider>
                    <AppNavigator />
                  </UserEventProvider>
                </ModalProvider>
              </PostProvider>
            </ThemeProvider>
          </AppearanceProvider>
        </SafeAreaProvider>
      </StorageProvider>
    </ApolloProvider>
  );
}

export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadAsync({
      'material-community': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'),
    }).then(() => setIsLoading(false));
  });

  if (isLoading) {
    return <ActivityIndicator />;
  }

  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <PaperProvider>
        <ToastProvider>
          <Application />
        </ToastProvider>
      </PaperProvider>
    </SafeAreaProvider>
  );
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

export default function SafeAreaProviderCompat({ children }: Props) {
  return (
    <SafeAreaConsumer>
      {(insets) => {
        if (insets) {
          // If we already have insets, don't wrap the stack in another safe area provider
          // This avoids an issue with updates at the cost of potentially incorrect values
          // https://github.com/react-navigation/react-navigation/issues/174
          return children;
        }

        return (
          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
            {children}
          </SafeAreaProvider>
        );
      }}
    </SafeAreaConsumer>
  );
}

App = () => {
  return (
    <ContextProvider>
      <DarkThemeProvider>
        <SafeAreaProvider>
          <RootNavigator />
          <NotificationHandler />
        </SafeAreaProvider>
      </DarkThemeProvider>
    </ContextProvider>
  );
}

export default function App() {
  const [loaded] = Font.useFonts(customFonts);

  if (!loaded) {
    return <AppLoading />;
  }

  return (
    <Provider theme={DefaultTheme}>
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
        <Examples />
      </SafeAreaProvider>
    </Provider>
  );
}

withDarkNavNonModal = (Component: React.ElementType) => {
  const ComponentWithDarkNav = (props: any) => {
    // for onboarding, we don't use modal navigation
    return (
      <SafeAreaProvider>
        <StatusBar barStyle="dark-content" />
        <Component {...props} />
      </SafeAreaProvider>
    );
  };
  return ComponentWithDarkNav;
}

withDarkNav = (Component: React.ElementType) => {
  const ComponentWithDarkNav = (props: any) => {
    return (
      <SafeAreaProvider>
        <StatusBar barStyle="dark-content" />
        <Component {...props} />
      </SafeAreaProvider>
    );
  };
  return ComponentWithDarkNav;
}

AppProvider = () => {
  return (
    <SafeAreaProvider>
      <StatusBar backgroundColor="transparent" translucent />
      <StorageServiceProvider>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </StorageServiceProvider>
    </SafeAreaProvider>
  );
}

render() {
    if (!this.state.loaded) {
      return null
    }
    const theme = this.getTheme()

    return (
      <ThemeProvider theme={theme}>
        <ContactTracerProvider
          anonymousId={userPrivateData.getAnonymousId()}
          isPassedOnboarding={applicationState.getData('isPassedOnboarding')}
        >
          <SafeAreaProvider>
            <HUDProvider>
              <View style={{ flex: 1, backgroundColor: COLORS.PRIMARY_DARK }}>
                <AppContainer
                  uriPrefix="morchana://"
                  ref={(navigator) => {
                    if (!this._navigator) {
                      this._navigator = navigator
                      this.onNavigatorLoaded()
                    }
                  }}
                />
              </View>
            </HUDProvider>
          </SafeAreaProvider>
        </ContactTracerProvider>
      </ThemeProvider>
    )
  }

App = () => {

  useEffect(() => {
    SplashScreen.hide()
  }, [])

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer>
            <View style={{flex:1, backgroundColor:'#1A1E29'}}>
            <StatusBar backgroundColor="#090C14" barStyle="light-content"/>
                <Stack.Navigator mode="card" screenOptions={{...TransitionPresets.SlideFromRightIOS}} initialRouteName="Root" headerMode="none" >
                  <Stack.Screen name="Root" component={RootView} />
                  <Stack.Screen name="CreateStepOne" component={CreateStepOne} />
                  <Stack.Screen name="CreateStepTwo" component={CreateStepTwo} />
                  <Stack.Screen name="Restore" component={Restore} />
                  <Stack.Screen name="PickerView" component={PickerView} />
                  <Stack.Screen name="ScanQRCode" component={ScanQRCode} />
                  <Stack.Screen name="Send" component={Send} />
                </Stack.Navigator>
                </View>
              </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  const [songId, setSongId] = useState<string|null>(null);

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <AppContext.Provider value={{
          songId,
          setSongId: (id: string) => setSongId(id),
        }}>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
          <PlayerWidgets />
        </AppContext.Provider>
      </SafeAreaProvider>
    );
  }
}

export function MyTabs() {
  const {width} = useWindowDimensions();
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Tab.Navigator
          tabBar={props => (
            <AnimatedTabBar
              tabs={tabs}
              {...props}
              titleShown={true}
              barWidth={width - 32}
            />
          )}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen
            name="NotificationScreen"
            component={NotificationScreen}
          />
          <Tab.Screen name="Settings" component={SettingsScreen} />
          <Tab.Screen name="ProfileScreen" component={ProfileScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

withLightNav = (Component: React.ElementType) => {
  const ComponentWithLightNav = (props: any) => (
    <SafeAreaProvider>
      <StatusBar barStyle="light-content" />
      <Component {...props} />
    </SafeAreaProvider>
  );
  return ComponentWithLightNav;
}

withDarkNav = (Component: React.ElementType) => {
  const ComponentWithDarkNav = (props: any) => {
    const stackIndex = useNavigationState(state => state.index);
    return (
      <SafeAreaProvider>
        <StatusBar
          barStyle={
            // On iOS 13+ keep light statusbar since the screen will be displayed in a modal with a
            // dark background.
            stackIndex > 0 && Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 13 && !Platform.isPad
              ? 'light-content'
              : 'dark-content'
          }
        />
        <Component {...props} />
      </SafeAreaProvider>
    );
  };
  return ComponentWithDarkNav;
}

export default function App() {
  return (
    <ThemeProvider {...{ theme }}>
      <SafeAreaProvider>
        <LoadAsset {...{ fonts, assets }}>
          <AppNavigator />
        </LoadAsset>
      </SafeAreaProvider>
    </ThemeProvider>
  );
}

function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  const getRandomImage = () => {
    return 'https://scontent.fkiv3-1.fna.fbcdn.net/v/t31.0-8/s960x960/22256588_1932617800312085_5686197942193420542_o.jpg?_nc_cat=110&_nc_sid=85a577&_nc_ohc=svjjE7DUkc0AX9yjcdC&_nc_ht=scontent.fkiv3-1.fna&tp=7&oh=1df4116c73c45a32ebad070704ca3333&oe=5F6ECD77'
  }

  const saveUserToDB = async (user) => {
    console.log(user);
    await API.graphql(graphqlOperation(createUser, { input: user }))
  }

  useEffect(() => {
    const updateUser = async () => {
      // Get current authenticated user
      const userInfo = await Auth.currentAuthenticatedUser({ bypassCache: true });

      if(userInfo) {
        // Check if user already exists in database
        const userData = await API.graphql(graphqlOperation(getUser, { id: userInfo.attributes.sub }));
        console.log(userData)
        if(!userData.data.getUser) {
          const user = {
            id: userInfo.attributes.sub,
            username: userInfo.username,
            name: userInfo.username,
            email: userInfo.attributes.email,
            image: getRandomImage(),
          }
          await saveUserToDB(user);
        } else {
          console.log('User already exists');
        }
      }


      // If it doesn't, create the user in the database
    }
    updateUser();
  }, [])

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

function App(props: any) {
  const { pageProps, Component } = props;

  /* eslint-disable react/no-danger */
  /* eslint-disable global-require */

  return (
    <Provider store={store}>
      <ThemeProvider theme={muiTheme}>
        <Head>
          <title>Selftrace</title>
          <style
            dangerouslySetInnerHTML={{
              __html: `
            html,
            body {
              position: relative;
              width: 100%;
              height: 100%;
            }
          
            html,
            body,
            #__next {
              display: flex;
              flex-direction: column;
              flex-grow: 1;
            }

            @font-face {
              font-family: 'office-code';
              src: url(${require('../../assets/fonts/OfficeCodePro-Regular.eot')});
              src: url(${require('../../assets/fonts/OfficeCodePro-Regular.ttf')}) format('truetype');
            }

            @font-face {
              font-family: 'office-code-medium';
              src: url(${require('../../assets/fonts/OfficeCodePro-Medium.eot')});
              src: url(${require('../../assets/fonts/OfficeCodePro-Medium.ttf')}) format('truetype');
            }
          `,
            }}
          />
          <link rel="manifest" href="/manifest.webmanifest" />
          {/* <GoogleAnalytics id="UA-107832480-1" /> */}
          {injectMeta.map((value, index) => {
            return <meta key={`meta-${index.toString()}`} {...value} />;
          })}
        </Head>
        <SafeAreaProvider>
          <AppearanceProvider>
            <CustomAppearanceProvider>
              <View style={{ flexGrow: 1 }}>
                <Favicon />
                <Layout>
                  <Component {...pageProps} />
                </Layout>
              </View>
            </CustomAppearanceProvider>
          </AppearanceProvider>
        </SafeAreaProvider>
      </ThemeProvider>
    </Provider>
  );

  /* eslint-enable react/no-danger */
  /* eslint-enable global-require */
}

// const EmptyStatesStack = createStackNavigator();

function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider theme="light">
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={() => ({
              headerShown: false,
              // gestureEnabled: false,
              ...TransitionPresets.SlideFromRightIOS,
            })}
          >
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{ headerShown: false }}
              // initialParams={{ setTheme }}
            />
            <Stack.Screen
              name="SearchbarScreen"
              component={SearchbarScreen}
              options={{ headerShown: false }}
              // initialParams={{ setTheme }}
            />
            {SCREEN_MAPPING.map((item) => (
              <Stack.Screen
                name={item.name}
                component={item.screen}
                key={item.name}
                options={{ headerShown: false }}
              />
            ))}
          </Stack.Navigator>
        </NavigationContainer>
      </ThemeProvider>
    </SafeAreaProvider>
  );
}

AppNavigator = () => {
  useEffect(() => {
    enableAnimation();
  }, []);
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Navigator
          keyboardHandlingEnabled
          mode={'card'}
          headerMode={'none'}
          initialRouteName="Home">
          <Screen name="Home" component={HomePage} />
          <Screen
            name="Details"
            component={DetailsPage}
            sharedElementsConfig={(route) => {
              const {id, selected, shareId} = route.params;
              return [
                {
                  id: `${shareId}-image-${id}`,
                  animation: 'move',
                  resize: 'clip',
                  align: 'auto',
                },
                {
                  id: `${shareId}-${selected.name}-${id}`,
                  animation: 'move',
                  resize: 'clip',
                  align: 'auto',
                },
                {
                  id: `${shareId}-${selected.price}-${id}`,
                  animation: 'move',
                  resize: 'clip',
                  align: 'auto',
                },
              ];
            }}
          />
        </Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

export default function App() {
  const [robotoLoaded] = useFontsRoboto({ Roboto_400Regular })
  const [rubikLoaded] = useFontsRubik({
    Rubik_300Light,
    Rubik_400Regular,
    Rubik_500Medium
  })

  const hydratedTheme = {
    ...theme,
    regularFont300: rubikLoaded ? 'Rubik_300Light' : 'Arial',
    regularFont400: rubikLoaded ? 'Rubik_400Regular' : 'Arial',
    regularFont500: rubikLoaded ? 'Rubik_500Medium' : 'Arial',
    codeFont400: robotoLoaded ? 'Roboto_400Regular' : 'Arial',
    platform: 'react-native'
  }

  return (
    <ThemeProvider theme={hydratedTheme}>
      <NativeThemeProvider theme={hydratedTheme}>
        <SafeAreaProvider>
          <SafeAreaView
            edges={['top', 'left', 'right']}
            style={{
              flex: 1,
              backgroundColor: theme.grey5
            }}
          >
            <ProjectProvider>
              <AuthProvider>
                <ErrorBoundary>
                  <Navigation />
                  <ForkMe />
                </ErrorBoundary>
              </AuthProvider>
            </ProjectProvider>
          </SafeAreaView>
        </SafeAreaProvider>
      </NativeThemeProvider>
    </ThemeProvider>
  )
}

App = (): React.ReactElement => {
  const [client, setClient] = useState<ApolloClient<any>>();
  const colorScheme: ColorSchemeName = useColorScheme();

  useEffect(() => {
    getApolloClient()
      .then(setClient)
      .catch(e => console.log(e));

    const listener = ({
      colorScheme: newColorScheme,
    }: {
      colorScheme: ColorSchemeName;
    }) => {
      // do something when color scheme changes
      const theme = newColorScheme === 'dark' ? darkTheme : lightTheme;
      FlashMessage.setColorTheme({
        success: theme.colors.success,
        info: theme.colors.info,
        warning: theme.colors.warning,
        danger: theme.colors.error,
      });
    };

    Appearance.addChangeListener(listener);

    return () => Appearance.removeChangeListener(listener);
  }, []);

  if (client) {
    return (
      <ApolloProvider client={client}>
        <SafeAreaProvider>
          <ThemeProvider
            useDark={colorScheme === 'dark'}
            theme={colorScheme === 'dark' ? darkTheme : lightTheme}
          >
            <>
              <OverflowMenuProvider>
                <Navigator />
              </OverflowMenuProvider>
              <FlashMessage position="top" />
            </>
          </ThemeProvider>
        </SafeAreaProvider>
      </ApolloProvider>
    );
  }

  // TODO: SplashScreen logic
  return <Spinner />;
}

App: React.FC = () => {
  const [tableData, setTableData] = useState<tableDataNode>({
    header: [],
    rows: [[]],
  }); // header rows with value

  const tableWidths = useRef<Array<number>>([]);
  const [inputValue, setInputValue] = useState<string>(
    'SELECT * FROM employees',
  );
  const [loaderVisibility, setLoaderVisibility] = useState<boolean>(false);
  const [isPremium, setIsPremium] = useState<boolean>(false);
  const [premiumModalOpen, setPremiumModalOpen] = useState<boolean>(false);
  const {load, adLoaded} = useInterstitialAd(getInterstitialId(), adConfig);
  const styles = useDynamicValue(dynamicStyles);

  const showAd = async () => {
    if (!shouldShowAd()) return;

    if (adLoaded) return;
    try {
      load();
    } catch (error) {
      console.log('failed to load ad', error);
    }
  };

  const runQuery = async () => {
    Keyboard.dismiss();
    setLoaderVisibility(true);
    await insertUserCommand(inputValue); // store the command in db
    try {
      /** Show add if user is not premium */
      if (!isPremium) {
        showAd();
      }
      // execute the query
      const res: any = await ExecuteUserQuery(inputValue);

      const len: number = res.rows.length;

      // console.log(res.rows);
      if (len === 0) {
        setLoaderVisibility(false);
        Snackbar.show({text: 'Query Executed!'});
        return;
      }
      const header: string[] = Object.keys(res.rows.item(0)).reverse();
      const rowsArr: any[] = [];

      for (let i = 0; i < len; i++) {
        let row = res.rows.item(i);
        rowsArr.push(Object.values(row).reverse());
      }
      // pass the header and result arr to get the largest widths of their respective column
      tableWidths.current = await getLargestWidths([header, ...rowsArr]);
      // console.log(([header, ...rowsArr]));

      setLoaderVisibility(false);
      // console.log(rowsArr);

      setTableData({header: header, rows: rowsArr});
    } catch (error) {
      setLoaderVisibility(false);
      Alert.alert('Error in DB', error?.message);
    }
  };

  useEffect(() => {
    const init = async () => {
      const isPremRes = await getIsPremium();
      setIsPremium(isPremRes);
      // Setup ad only when user is not premium
      if (!isPremRes) {
      }
      await SplashScreen.hide({fade: true});
    };
    init();
    // return () => {};
  }, []);

  return (
    <ColorSchemeProvider>
      <BottomSheetModalProvider>
        <SafeAreaProvider>
          <StatusBar
            barStyle="dark-content"
            backgroundColor="#c8b900"
            translucent
          />
          <GoPremium
            modalState={premiumModalOpen}
            setModalState={setPremiumModalOpen}
            isPremium={isPremium}
            setIsPremium={setIsPremium}
          />
          <KeyboardAvoidingView
            style={{flex: 1}}
            {...(Platform.OS === 'ios' && {behavior: 'padding'})}
            keyboardVerticalOffset={Platform.select({
              ios: 0,
              android: 500,
            })}
          >
            <View style={styles.statusBar} />

            <Modal visible={loaderVisibility} transparent={true}>
              <View style={styles.modalStyle}>
                <ActivityIndicator size={50} color="gold" />
              </View>
            </Modal>
            <View testID="query-runner" style={styles.outerContainer}>
              <AppBar
                premiumModalOpen={premiumModalOpen}
                setPremiumModalOpen={setPremiumModalOpen}
                setInputValue={setInputValue}
                isPremium={isPremium}
                setIsPremium={setIsPremium}
              />
              <View style={styles.innercontainer}>
                <InputContainer
                  setPremiumModalOpen={setPremiumModalOpen}
                  inputValue={inputValue}
                  setInputValue={setInputValue}
                  isPremium={isPremium}
                />
                {!!tableData.header.length && (
                  <Table {...tableData} tableWidths={tableWidths} />
                )}
              </View>

              <RunButton runQuery={runQuery} />
            </View>
          </KeyboardAvoidingView>
        </SafeAreaProvider>
      </BottomSheetModalProvider>
    </ColorSchemeProvider>
  );
}

App = (props: {exposureNotificationClicked: boolean | null}) => {
  const [state, setState] = React.useState<ScotlandState>({
    loading: false,
    notification: null,
    exposureNotificationClicked: props.exposureNotificationClicked
  });

  useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        const imageAssets = cacheImages([
          require('./assets/images/logo/logo.png'),

          // Pre-load view-specific images so they don't flicker on Android on first load:

          // atoms/message
          require('./assets/images/symptoms/image.png'),

          // molecules/grid
          require('./assets/images/tracing/image.png'),
          require('./assets/images/tracing-inactive/image.png'),
          require('./assets/images/tracing-contact/image.png'),
          require('./assets/images/icon-comment/image.png'),
          require('./assets/images/icon-community-white/image.png'),
          require('./assets/images/icon-jar/image.png'),
          require('./assets/images/grid-paused/image.png'),

          // views/age-confirmation, views/age-under
          require('./assets/images/onboarding-logo/image.png'),
          require('./assets/images/onboarding-group/image.png'),
          require('./assets/images/wave/image.png'),

          // views/age-sorting
          require('./assets/images/age-sorting-age-group-2-illustration/image.png'),
          require('./assets/images/age-sorting-age-group-3-illustration/image.png'),

          // views/community
          require('./assets/images/icon-community-white/image.png'),
          require('./assets/images/community-illustration/image.png'),
          require('./assets/images/downloads-illustration/image.png'),

          // views/dashboard
          require('./assets/images/restrictions/image.png'),

          // views/tests
          require('./assets/images/icon-jar/image.png'),
          require('./assets/images/test-illustration/image.png'),
          require('./assets/images/icon-plus/image.png'),

          // views/tracing
          require('./assets/images/tracing-active/image.png'),
          require('./assets/images/icon-tracing-active-big/image.png'),
          require('./assets/images/icon-tracing-inactive-big/image.png'),
          require('./assets/images/tracing-illustration/image.png'),
          require('./assets/images/icon-close-green/image.png'),
          require('./assets/images/icon-paused/image.png'),

          // views/onboarding/agreement
          require('./assets/images/icon-opt-out/image.png'),

          // views/onboarding/permissions-info
          require('./assets/images/permissions-illustration/image.png'),

          // views/onboarding/privacy
          require('./assets/images/privacy-illustration/image.png'),

          // views/onboarding/test-result-modal
          require('./assets/images/test-result-modal-illustration/image.png'),
          require('./assets/images/message/android/image.png'),
          require('./assets/images/message/ios/image.png'),

          // views/onboarding/test-result
          require('./assets/images/test-result-illustration/image.png'),

          // views/onboarding/why-use
          require('./assets/images/why-use-illustration/image.png'),

          // views/onboarding/your-data-modal
          require('./assets/images/your-data-modal-illustration/image.png'),
          require('./assets/images/notification/android/age-group-1/image.png'),
          require('./assets/images/notification/android/age-group-2-3/image.png'),
          require('./assets/images/notification/ios/age-group-1/image.png'),
          require('./assets/images/notification/ios/age-group-2-3/image.png')
        ]);

        await Font.loadAsync({
          roboto: require('./assets/fonts/Roboto-Regular.ttf'),
          'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
          lato: require('./assets/fonts/Lato-Regular.ttf'),
          'lato-bold': require('./assets/fonts/Lato-Bold.ttf')
        });

        // @ts-ignore
        await Promise.all([...imageAssets]);
      } catch (e) {
        console.warn(e);
      } finally {
        console.log('done');
        setState({...state, loading: false});
      }
    }

    loadResourcesAndDataAsync();

    notificationHooks.handleNotification = async function (notification) {
      let requiresHandling = false;
      if (Platform.OS === 'ios') {
        if (
          (notification && notification.userInteraction) ||
          (AppState.currentState === 'active' && notification)
        ) {
          PushNotification.setApplicationIconBadgeNumber(0);
          requiresHandling = true;
          setTimeout(() => {
            notification.finish(
              Platform.OS === 'ios'
                ? PushNotificationIOS.FetchResult.NoData
                : ''
            );
          }, 3000);
        }
      }
      if (requiresHandling) {
        setTimeout(() => setState((s) => ({...s, notification})), 500);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <SafeAreaProvider>
      <Base>
        <StatusBar barStyle="default" />
        <SettingsProvider>
          <SettingsContext.Consumer>
            {(settingsValue) => {
              if (!settingsValue.loaded) {
                return <Loading />;
              }
              return (
                  <ApplicationProvider
                    user={settingsValue.user}
                    onboarded={settingsValue.onboarded}
                    completedExposureOnboarding={
                      settingsValue.completedExposureOnboarding
                    }>
                    <ExposureApp>
                      <ReminderProvider>
                        <StatusBar barStyle="default" />
                        <Navigation
                          notification={state.notification}
                          exposureNotificationClicked={state.exposureNotificationClicked}
                          completedExposureOnboarding={settingsValue.completedExposureOnboarding}
                          setState={setState}
                        />
                      </ReminderProvider>
                    </ExposureApp>
                  </ApplicationProvider>
              );
            }}
          </SettingsContext.Consumer>
        </SettingsProvider>
      </Base>
    </SafeAreaProvider>
  );
}