react-native#StatusBar JavaScript Examples

render() {
    const {intl} = this.props;
    const {formatMessage} = intl;

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar hidden={true} />
        <ScrollView>
          <View style={styles.containerLogo}>
            <IconBTT height={LOGO_HEIGHT} width={LOGO_HEIGHT} />
            <View style={styles.borderLogo} />
            <IconBYT height={LOGO_HEIGHT} width={LOGO_HEIGHT} />
          </View>
          <View style={styles.body}>
            <View style={styles.viewDep}>
              <Text style={styles.description}>
                {formatMessage(message.description)}
              </Text>
              <MediumText style={styles.title}>
                {formatMessage(message.title)}
              </MediumText>
            </View>
          </View>
        </ScrollView>
        <View style={styles.boxButton}>
          <Text style={styles.button} onPress={this.onContinue}>
            {formatMessage(message.button)}
          </Text>
        </View>
      </SafeAreaView>
    );
  }

setStatusBarStyle = (darkMode) => {
    if(Platform.OS == "android"){
        StatusBar.setBackgroundColor(darkMode ? "black" : "white")
        
        changeNavigationBarColor(darkMode ? "black" : "white", darkMode ? false : true, false)
    }

    StatusBar.setBarStyle(darkMode ? "light-content" : "dark-content")

}

export default function App() {
  return (
    <>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#7D40E7"
      />
      <Routes/>
    </>
  );
}

export default function (props) {
  const { backgroundColor } = props;
  if (Platform.OS === 'ios') {
    return (
      <View style={{ height: iOSStatusBarHeight, backgroundColor }}>
        <StatusBar {...props} />
      </View>
    );
  } else {
    return (
      <View style={{ backgroundColor }}>
        <StatusBar {...props} />
      </View>
    );
  }
}

render() {
    // 状态栏文字颜色
    const barStyle = verifyValueInArray(this.props.barStyle, ['light-content', 'dark-content', 'default'], 'light-content')
    return <StatusBar
      animated
      hidden={false}
      backgroundColor='transparent'
      translucent
      barStyle={barStyle}
    />
  }

export default function App() {
  return (
    <NavigationContainer>
      <StoreProvider>
        <StatusBar backgroundColor="#004b8b" translucent />
        <Router />
      </StoreProvider>
    </NavigationContainer>
  );
}

function HistoryView() {
  useFocusEffect(
    React.useCallback(() => {
      StatusBar.setBarStyle('dark-content')
    }, [])
  )

  return (
    <Box as={SafeAreaView} flex={1}>
      <Text>Arama Geçmişi</Text>
    </Box>
  )
}

export default function Main() {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          {Platform.OS === "ios" && <StatusBar barStyle="dark-content" />}
          <NavigationContainer linking={LinkingConfiguration}>
            <Stack.Navigator>
              <Stack.Screen name="Root" component={BottomTabNavigator} />
              <Stack.Screen name="Component" component={ComponentScreen} />
              <Stack.Screen name="Card" component={CardScreen} />
              <Stack.Screen name="IDeal" component={IDealScreen} />
              <Stack.Screen name="Result" component={ResultScreen} />
            </Stack.Navigator>
          </NavigationContainer>
        </View>
      </Provider>
    );
  }
}

Screen = ({ children }) => {
  return (
    <View style={{ flex: 1, backgroundColor: white }}>
      <Container>
        <StatusBar barStyle="dark-content" translucent />
        {children}
      </Container>
    </View>
  );
}

function MenuHeader(props) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={'white'} />
      <TouchableOpacity onPress={() => props.navigation.toggleDrawer()}>
        <MaterialIcons name="menu" size={22} color="white" />
      </TouchableOpacity>
      <Text style={[textStyle.heading, { color: 'white' }]}>{props.title}</Text>
      <View />
    </View>
  );
}

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === "ios" && <StatusBar barStyle="default" />}
        <AppNavigator />
      </View>
    );
  }
}

export default function DissertativeLesson() {
  const navigation = useNavigation();

  return (
    <Styled.SafeAreaContainer>
      <Styled.Container>
        <StatusBar barStyle="light-content" />
        <Styled.BackButtonContainer onPress={() => navigation.goBack()}>
          <Styled.BackButtonIcon name="chevron-left" />
        </Styled.BackButtonContainer>
        <Styled.Title>Tell me more about you!</Styled.Title>
        <Styled.ContentContainer>
          <Styled.Input placeholder="Here you can write anything you want!" />
        </Styled.ContentContainer>
        <Styled.ButtonContainer
          onPress={() => navigation.navigate('translate-lesson')}
        >
          <Styled.ButtonText>Próximo</Styled.ButtonText>
        </Styled.ButtonContainer>
      </Styled.Container>
    </Styled.SafeAreaContainer>
  );
}

export default function Container(props) {

	const activeTheme = useContext(theme).globalTheme
	const darkTheme = useContext(theme).darkTheme

	return (
		<>
			<StatusBar backgroundColor={activeTheme.backgroundColor} barStyle={activeTheme.darkTheme ? "light-content" : "dark-content"} />
			<ScrollView style={[styles.container, { backgroundColor: activeTheme.backgroundColor }]} contentContainerStyle={{ flexGrow: 1 }}>
				{props.children}
			</ScrollView>
		</>
	)
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Navigator />
        </PersistGate>
      </Provider>
      <StatusBar barStyle="dark-content" />
    </ApolloProvider>
  );
}

export default function App() {
  console.disableYellowBox = true;
  return (
    <Provider store={globalStorage.store}>
      <PersistGate
        persistor={globalStorage.persistor}
        loading={<Spinner visible={true} />}
      >
        <StatusBar style="dark" translucent={true} />
        <View
          style={{
            flex: 1,
            marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
          }}
        >
          <AppNavigator />
        </View>
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </PersistGate>
    </Provider>
  );
}

DetailFollowerScreen = () => {
  const navigation = useNavigation();

  const renderToolbar = () => {
    return (
      <View style={styles.toolbar}>
        <StatusBar
          hidden={false}
          backgroundColor={colors.primary}
          barStyle={barStyle.lightContent}
        />
        <TouchableOpacity
          style={styles.viewWrapIcLeft}
          onPress={() => navigation.goBack()}>
          <MaterialCommunityIcons
            name={'arrow-left'}
            size={30}
            color={colors.white}
          />
        </TouchableOpacity>
        <View style={styles.viewWrapTitleToolbar}>
          <Text style={styles.titleToolbar}>Detail follower</Text>
        </View>
        <View style={styles.viewWrapIcRight} />
      </View>
    );
  };

  return (
    <View style={styles.mainContainer}>
      {renderToolbar()}
      <Text style={styles.textContent}>
        Example this is the detail follower screen
      </Text>
    </View>
  );
}

ProfileScreen = () => {
  return (
    <SafeAreaView style={styles.appContainer}>
      <StatusBar
        translucent
        backgroundColor="transparent"
        barStyle="dark-content"
      />
      <View style={styles.header}>
        <Text style={styles.appTitle}>profile</Text>
      </View>
      <View style={styles.footer}>
        <Text style={styles.p}>Designed by Gino Lee Swanepoel</Text>
        <Text style={styles.p}>in React Native</Text>
      </View>
    </SafeAreaView>
  );
}

CustomScreenContainer = props => {
  const {children} = props;

  return (
    <>
      <StatusBar barStyle="light-content" />
      <SafeAreaView style={GenericStyles.whiteBackgroundContainer}>
        {children}
      </SafeAreaView>
    </>
  );
}

MainNavigation = () => {
  const { container } = styles;
  return (
    <View style={container}>
      {Platform.OS === 'ios' && <StatusBar />}
      <NavigationContainer linking={LinkingConfiguration} independent>
        <Stack.Navigator>
          <Stack.Screen name="Sign In" component={SignIn} options={{ headerShown: false }} />
          <Stack.Screen name="Sign Up" component={SignUp} options={{ headerShown: false }} />
          <Stack.Screen name="GetPincode" component={GetPinCode} options={{ headerShown: true }} />
          <Stack.Screen name="StorePincode" component={StorePinCode} options={{ headerShown: true }} />
          <Stack.Screen
            name="Root"
            component={BottomTabNavigator}
            options={{ headerShown: false, gestureEnabled: false }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

export default function Loading() {
    return (
        <>
        <StatusBar barStyle='dark-content' />
        <SafeAreaView style={{flex : 1, backgroundColor: "#00FF00", alignItems: 'center', justifyContent: "center"}}>
            <Text>loading lol</Text>
        </SafeAreaView>
    </>
    );
}

function Router() {
  useEffect(() => {
    SplashScreen.hide();
  });
  return (
    <NavigationContainer>
      {Platform.OS === 'ios' ? (
        <View style={styles.iosContainerStyle}>
          <StatusBar
            translucent
            backgroundColor="#1d9b54"
            barStyle="light-content"
          />
        </View>
      ) : (
        <StatusBar backgroundColor="#1d9b54" barStyle="light-content" />
      )}
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Tabs" component={Tabs} />
        <Stack.Screen name="Post" component={Post} />
        <Stack.Screen name="SearchResults" component={SearchResults} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

render() {
        const loadedComponent = <AppContainer screenProps={this.state.screenProps}/>;
        const notLoadedComponent = <View></View>;

        return(
            <View style={{ flex: 1, backgroundColor: this.state.screenProps.theme.backgroundColour}}>
            <StatusBar />
                {this.state.loaded ? loadedComponent : notLoadedComponent}
            </View>
        );
    }

render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle={'light-content'} />
        <SafeAreaView style={{backgroundColor: Colors.accent.general}} />
        <Header
          title={'React Native Animation'}
          isColor={true}
          isLeft={false}
        />

        <FlatList data={listAnimation} renderItem={this._renderItem} />
      </View>
    );
  }

componentDidMount() {
    StatusBar.setBarStyle("light-content");
    const { style } = this.props;

    if (style && style.height && !isNaN(style.height)) {
      this.initialHeight = style.height;
    }

    if (style && style.width && !isNaN(style.width)) {
      this.initialWidth = style.width;
    }

    this.setState({
      currentVideoAspectRatio: this.initialWidth + ":" + this.initialHeight,
    });
  }

App = () => (
  <>
    <StatusBar
      barStyle="light-content"
      backgroundColor={MyTheme.colors.primary}
    />
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: MyTheme.colors.primary,
          },
          headerTintColor: '#fff',
        }}>
        <Stack.Screen name="Pokédex" component={List} />
        <Stack.Screen name="Pokémon" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  </>
)

App: () => Node = () => {
  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,
          }}>
          <Text>{Config.HELLO}</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

App = () => (
  <Provider store={store}>
    <AuthProvider>
      {({ initialRouteName, theme }) => (
        <PaperProvider theme={theme}>
          <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />

          <AppNavigator
            initialRouteName={initialRouteName}
            screenProps={{
              theme,
            }}
          />
        </PaperProvider>
      )}
    </AuthProvider>
  </Provider>
)

export default function App() {
  const [assetsLoaded, setAssetLoaded] = useState(false);

  /* Loading custom fonts in async */
  const _loadAssetsAsync = async () => {
    await Font.loadAsync(customFonts);
    setAssetLoaded(true);
  };

  useEffect(() => {
    _loadAssetsAsync();
  });

  return assetsLoaded ? (
    <NavigationContainer>
      <StatusBar barStyle="light-content"></StatusBar>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="Featured"
      >
        <Stack.Screen name="Featured" component={Tabs} />
        <Stack.Screen name="EventDetail" component={EventDetail} />
      </Stack.Navigator>
    </NavigationContainer>
  ) : (
    <ActivityIndicator size="small"></ActivityIndicator>
  );
}

View404 = () => {
  const { t } = useTranslation()

  const currentRoute = usePlatformLocation()
  const path = currentRoute ? currentRoute.path : ''
  return (
    <Container>
      <StatusBar style="auto" />
      <Text>{t('errors:404', { path: path ? `${path} ` : '' })}</Text>
    </Container>
  )
}