react-native#useColorScheme JavaScript Examples

The following examples show how to use react-native#useColorScheme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ThemeProvider.js    From universal-verifier-app with GNU General Public License v3.0 6 votes vote down vote up 
ThemeProvider = (props) => {
    // Getting the device color theme, this will also work with react-native-web
    const colorScheme = useColorScheme(); // Can be dark | light | no-preference

    /*
    * To enable changing the app theme dynamicly in the app (run-time)
    * we're gonna use useState so we can override the default device theme
    */
    const [isDark, setIsDark] = React.useState(colorScheme === "dark");

    // Listening to changes of device appearance while in run-time
    React.useEffect(() => {
        setIsDark(colorScheme === "dark");
    }, [colorScheme]);

    const defaultTheme = {
        isDark,
        // Chaning color schemes according to theme
        colors: isDark ? darkColors : lightColors,
        // Overrides the isDark value will cause re-render inside the context.  
        setScheme: (scheme) => setIsDark(scheme === "dark"),
    };

  return (
        <ThemeContext.Provider value={defaultTheme}>
            {props.children}
        </ThemeContext.Provider>
    );
}
Example #2
Source File: App.js    From react-native-ultimate-config with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: index.js    From stayaway-app with European Union Public License 1.2 5 votes vote down vote up 
export default function Root () {
  const dispatch = useDispatch();

  const appLaunched = useSelector(isAppLaunched);
  const storedTheme = useSelector(getTheme);
  const systemTheme = useColorScheme();

  const theme = THEMES[storedTheme] || THEMES[systemTheme || LIGHT];

  // Set navigationr reference
  const ref = useRef(null);
  NavigationService.setNavigationRef(ref);

  // Startup app
  useEffect(() => {
    if (appLaunched) {
      setTimeout(() => {
        // Set status bar
        if (Platform.OS === 'android') {
          StatusBar.setBackgroundColor('transparent');
          StatusBar.setTranslucent(true);
        }

        // Hide splash screen on resume
        SplashScreen.hide();
      }, 1500);
    } else {
      // Dispatch startup action
      dispatch(startupActions.startup());
    }
  }, [appLaunched]);

  // Re-render when theme changes
  useEffect(() => {}, [storedTheme]);

  if (! appLaunched) {
    return null;
  }

  return (
    <ThemeProvider value={theme}>
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
        <NavigationContainer ref={ref}>
          <RootNavigator />
        </NavigationContainer>
        <Modals />
      </SafeAreaProvider>
    </ThemeProvider>
  );
}