react-native#StatusBar TypeScript Examples

export function getDeviceHeight(statusBarTranslucent: boolean | undefined):number {
  var height = Dimensions.get("window").height;

  if (Platform.OS === "android" && !statusBarTranslucent) {

    return StatusBar.currentHeight ?  height - StatusBar.currentHeight : height;
  }

  return height;
}

Onboarding = () => {
  const scrollRef = React.useRef<ScrollView>(null);
  return (
    <Box flex={1} backgroundColor="white">
      <StatusBar barStyle="light-content" />
      <ScrollView
        ref={scrollRef}
        horizontal
        snapToInterval={width}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        bounces={false}
      >
        <Welcome1 />
        <Welcome2 {...{ scrollRef }} />
        <Welcome3 />
        <Welcome4 />
        <Welcome5 />
        <Onboarding1 />
      </ScrollView>
    </Box>
  );
}

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

export default function App() {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
    Ubuntu_700Bold,
  });

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

  return (
    <>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="transparent"
        translucent
      />
      <Routes />
    </>
  );
}

App: React.FC = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <NavigationContainer>
        <StatusBar barStyle="light-content" translucent />
        <AppProvider>
          <View style={{ backgroundColor: '#312e38', flex: 1 }}>
            <Routes />
          </View>
        </AppProvider>
      </NavigationContainer>
    </ThemeProvider>
  );
}

App: React.FC = () => (
  <View style={{ flex: 1 }}>
    <StatusBar
      barStyle="light-content"
      backgroundColor="transparent"
      translucent
    />
    <Routes />
  </View>
)

render() {
        if (!this.props.skipLoadingScreen && (!this.state.isLoadingComplete)) {
            return (
                <AppLoading
                    startAsync={this._loadStuffAsync}
                    onError={this._handleLoadingError}
                    onFinish={this._handleFinishLoading}
                />
            );
        }

        return (
            <MobxProvider>
                <View style={styles.container}>
                    <StatusBar barStyle="light-content" hidden={true} />
                    <AppRouter />
                </View>
            </MobxProvider>
        );
    }

App = () => {
  const navigationRef = useRef<any>(null);

  useEffect(() => {
    StatusBar.setBarStyle('dark-content');

    Linking.addEventListener('url', (data) => {
      navigationRef.current && onOpenedFromDeepLink(data.url, navigationRef.current);
    });
  }, []);

  return (
    <View style={styles.container}>
      <Provider store={storeFactory()}>
        <NavigationContainer ref={navigationRef}>
          <Loading navigation={navigationRef.current} />
        </NavigationContainer>
      </Provider>
    </View>
  );
}

DataPolicy: FC = () => {
  const {t} = useTranslation();
  const {user} = useApplication();

  return (
    <>
      <StatusBar barStyle="default" />
      <ScrollView style={styles.container}>
        {user && <Back variant="light" />}
        {!user && (
          <View style={styles.modalClose}>
            <ModalClose />
          </View>
        )}
        <Spacing s={44} />
        <Title accessible title="dataPolicy:title" />
        <Markdown>{t('dataPolicy:body', {link: t('links:m')})}</Markdown>
      </ScrollView>
    </>
  );
}

App: React.FC = () => {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
    Ubuntu_700Bold,
  });

  if (!fontsLoaded) return <AppLoading />;

  return (
    <AppProvider>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="transparent"
        translucent
      />
      <Routes />
    </AppProvider>
  );
}

App: React.FC = () => {
    useEffect(() => {
        if (Platform.OS !== 'web') {
            Sentry.init({
                dsn: SENTRY_DSN,
                enableInExpoDevelopment: false,
                debug: process.env.NODE_ENV === 'development' ? true : false,
            });

            Sentry.setRelease(Constants.manifest.revisionId);
        }
    }, []);

    const { store, persistor } = stores();
    return (
        <Provider store={store}>
            <PersistGate loading={<AppLoading />} persistor={persistor}>
                <View style={{ flex: 1 }}>
                    <StatusBar barStyle="light-content" />
                    {Platform.OS === 'web' ? (
                        <AppNavigatorWeb />
                    ) : (
                        <AppNavigator />
                    )}
                </View>
            </PersistGate>
        </Provider>
    );
}

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>
  );
}

OnboardProgressing = () => {
  const STRING = {
    TITLE: I18n.t('in_progress'),
    SUB_TITLE: I18n.t('please_wait'),
  }
  const navigation = useNavigation()
  const resetTo = useResetTo()
  useEffect(() => {
    setTimeout(() => {
      applicationState.setData('isPassedOnboarding', true)
      // if (applicationState.getData('filledQuestionaireV2')) {
      //   navigation.navigate('OnboardComplete')
      // } else {
      //   resetTo({ routeName: 'Questionaire' })
      // }
      navigation.navigate('OnboardComplete')
    }, 1000)
  }, [])
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor={COLORS.WHITE} barStyle="dark-content" />
      <View style={{ height: 56 }} />
      <View style={styles.header}>
        <Text style={styles.title}>{STRING.TITLE}</Text>
        <Text style={styles.subtitle}>{STRING.SUB_TITLE}</Text>
      </View>
      <View style={styles.content}>
        <ActivityIndicator size="large" color={COLORS.BLACK_1} />
      </View>
    </SafeAreaView>
  )
}

export default function App() {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
    Ubuntu_700Bold,
  });

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

  return (
    <>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="transparent"
        translucent
      />
      <Routes />
    </>
  );
}

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

BaseLayout = (props: IProps) => {
  const { children } = props;
  return (
    <RootContainer {...props}>
      <StatusBar barStyle="default" backgroundColor="#FFFFFF" />
      {children}
    </RootContainer>
  );
}

function App() {
  const [nightMode, setNightmode] = useState(false);

  return (
    <Provider theme={nightMode ? DarkTheme : DefaultTheme}>
      <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
        <StatusBar
          backgroundColor={
            nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
          }
          barStyle={'light-content'}
        />
        <Surface style={styles.container}>
          <Appbar.Header>
            <Appbar.Content title="React Native Paper Form Builder" />
            <Appbar.Action
              icon={nightMode ? 'brightness-7' : 'brightness-3'}
              onPress={() => setNightmode(!nightMode)}
            />
          </Appbar.Header>
          <SafeAreaView style={styles.container}>
            <ScrollView
              showsVerticalScrollIndicator={false}
              style={styles.scrollView}
              keyboardShouldPersistTaps={'handled'}>
              <AdvancedExample />
            </ScrollView>
            {Platform.OS === 'ios' && <KeyboardSpacer />}
          </SafeAreaView>
        </Surface>
      </ThemeProvider>
    </Provider>
  );
}

Background: React.FC<IBackgroundProps> = ({ isBlue, children }) => {
  const { state } = useContext(AppContext);
  const theme = useTheme<Theme>();
  const { colors } = theme;
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar
        backgroundColor={isBlue ? colors.bgPrimaryBlue : colors.bgPrimary}
        barStyle={state.darkMode || isBlue ? 'light-content' : 'dark-content'}
      />
      <Box flex={1} backgroundColor={isBlue ? 'bgPrimaryBlue' : 'bgPrimary'}>
        {children}
      </Box>
    </SafeAreaView>
  );
}

App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <NavigationContainer>
        <Navigator
          // initialRouteName={OrderAccepted.name}
          screenOptions={{
            headerShown: false,
          }}>
          <Screen name={Onboarding.name} component={Onboarding.component} />
          <Screen name={SignIn.name} component={SignIn.component} />
          <Screen name={SignUp.name} component={SignUp.component} />
          <Screen name={Tabs.name} component={Tabs.component} />

          {/* Temporary */}
          <Screen
            name={OrderAccepted.name}
            component={OrderAccepted.component}
          />
        </Navigator>
      </NavigationContainer>
    </>
  );
}

App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default function ExpoStatusBar(props: StatusBarProps) {
  const {
    style,
    animated,
    hidden,
    backgroundColor: backgroundColorProp,
    translucent: translucentProp,
  } = props;

  // Default to true for translucent
  const translucent = translucentProp ?? true;

  // Pick appropriate default value depending on current theme, so if we are
  // locked to light mode we don't end up with a light status bar
  const colorScheme = useColorScheme();
  const barStyle = styleToBarStyle(style, colorScheme);

  // If translucent and no backgroundColor is provided, then use transparent
  // background
  let backgroundColor = backgroundColorProp;
  if (translucent && !backgroundColor) {
    backgroundColor = 'transparent';
  }

  return (
    <StatusBar
      translucent={translucent}
      barStyle={barStyle}
      backgroundColor={backgroundColor}
      animated={animated}
      hidden={hidden}
    />
  );
}

WithStylingScreen = () => {
  // hooks
  const { goBack } = useNavigation();
  const safeInsets = useSafeAreaInsets();

  // variable
  const insets = useMemo(
    () => ({
      top: Math.max(safeInsets.top, 20),
      bottom: Math.max(safeInsets.bottom, 20),
      left: Math.max(safeInsets.left, 20),
      right: Math.max(safeInsets.right, 20),
    }),
    [safeInsets]
  );

  // callbacks
  const handleOnClosePress = useCallback(() => goBack(), [goBack]);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <PaperOnboarding
        data={data}
        titleStyle={styles.title}
        descriptionStyle={styles.description}
        closeButtonTextStyle={styles.closeTextStyle}
        indicatorBorderColor="black"
        indicatorBackgroundColor="black"
        indicatorSize={24}
        safeInsets={insets}
        onCloseButtonPress={handleOnClosePress}
      />
    </>
  );
}

App = () => {
  return (
    <View style={{flex: 1, alignSelf:'stretch'}}>
    <Provider store={store}>
      <StatusBar barStyle="light-content" backgroundColor={PRIMARY_DARK_COLOR} />
      <View style={{flex: 1, backgroundColor: WHITE_COLOR}}>
        <RouterComponent />
        <Toast />
      </View>
    </Provider>
    </View>);
}

styles = StyleSheet.create({
  root: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    backgroundColor: '#eaeaea',
  },
  input: {
    borderColor: 'gray',
    borderWidth: 1,
    marginHorizontal: 30,
    marginVertical: 5,
    backgroundColor: 'white',
  },
  textbox: {
    height: 40,
    paddingHorizontal: 20,
  },
  editor: {
    flex: 1,
    padding: 0,
  },
  buttons: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    alignItems: 'center',
    backgroundColor: '#ddd',
    padding: 10,
    margin: 3,
  },
})

App = () => {
  try {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
      <SafeAreaView style={backgroundStyle}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <AILabNativeImage source={require('./storybook/dinner.jpg')} />
      </SafeAreaView>
    );
  } catch (e) {
    console.log((e as any).message);
    return (
      <SafeAreaView>
        <Text>What's going on?</Text>
      </SafeAreaView>
    );
  }
}

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <AuthProvider>
        <ConfigProvider>
          <UIProvider>
            <NavigationContainer>
              <StatusBar backgroundColor="#00B1FF" />
              <Login />
              <Registration />
              <Main />
            </NavigationContainer>
          </UIProvider>
        </ConfigProvider>
      </AuthProvider>
    </PaperProvider>
  );
}

App: React.FC = () => {
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <NavigationContainer>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#312e38"
        translucent
      />
      <AppProvider>
        <View style={{ flex: 1, backgroundColor: '#312e38' }}>
          <Routes />
        </View>
      </AppProvider>
    </NavigationContainer>
  );
}

App: React.FC = () => {
  const { user } = useAuth();
  return (
    <NavigationContainer>
      <StatusBar
        barStyle="light-content"
        backgroundColor={user ? '#28262e' : '#312e38'}
      />
      <AppProvider>
        <Routes />
      </AppProvider>
    </NavigationContainer>
  );
}

App = () => {
    return (
        <Provider store={store}>
            <RootSiblingParent>
                <Navigator />
            </RootSiblingParent>
            <StatusBar
                backgroundColor="transparent"
                barStyle="dark-content"
                translucent
            />
        </Provider>
    );
}