react-native#ColorSchemeName TypeScript Examples

The following examples show how to use react-native#ColorSchemeName. 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: index.tsx    From SpotifyClone with MIT License 6 votes vote down vote up 
// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}
Example #2
Source File: index.tsx    From TwitterClone with MIT License 6 votes vote down vote up 
// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}
Example #3
Source File: styleToBarStyle.ts    From nlw2-proffy with MIT License 6 votes vote down vote up 
export default function styleToBarStyle(
  style: StatusBarStyle = 'auto',
  colorScheme: ColorSchemeName = getColorScheme()
): 'light-content' | 'dark-content' {
  if (!colorScheme) {
    colorScheme = 'light';
  }

  let resolvedStyle = style;
  if (style === 'auto') {
    resolvedStyle = colorScheme === 'light' ? 'dark' : 'light';
  } else if (style === 'inverted') {
    resolvedStyle = colorScheme === 'light' ? 'light' : 'dark';
  }

  return resolvedStyle === 'light' ? 'light-content' : 'dark-content';
}
Example #4
Source File: index.tsx    From expo-hamburger-menu-template with MIT License 6 votes vote down vote up 
// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}
Example #5
Source File: useColorScheme.ts    From SpotifyClone with MIT License 5 votes vote down vote up 
// The useColorScheme value is always either light or dark, but the built-in
// type suggests that it can be null. This will not happen in practice, so this
// makes it a bit easier to work with.
export default function useColorScheme(): NonNullable<ColorSchemeName> {
  return _useColorScheme() as NonNullable<ColorSchemeName>;
}
Example #6
Source File: styleToBarStyle.d.ts    From nlw2-proffy with MIT License 5 votes vote down vote up 
export default function styleToBarStyle(style?: StatusBarStyle, colorScheme?: ColorSchemeName): 'light-content' | 'dark-content';
Example #7
Source File: Colors.tsx    From jellyfin-audio-player with MIT License 5 votes vote down vote up 
/**
 * Function for generating both the dark and light stylesheets, so that they
 * don't have to be generate on every individual component render
 */
function generateStyles(scheme: ColorSchemeName) {
    return StyleSheet.create({
        text: {
            color: scheme === 'dark' ? '#fff' : '#000',
            fontSize: 14,
            fontFamily: 'Inter',
        },
        textHalfOpacity: {
            color: scheme === 'dark' ? '#ffffff88' : '#00000088',
            fontSize: 14,
            // fontFamily: 'Inter',
        },
        textQuarterOpacity: {
            color: scheme === 'dark' ? '#ffffff44' : '#00000044',
            fontSize: 14,
        },
        view: {
            backgroundColor: scheme === 'dark' ? '#111' : '#fff',
        },
        border: {
            borderColor: scheme === 'dark' ? '#262626' : '#ddd',
        },
        activeBackground: {
            backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '26' : '16'}`,
        },
        imageBackground: {
            backgroundColor: scheme === 'dark' ? '#191919' : '#eee',
            borderWidth: 0.5,
            borderColor: scheme === 'dark' ? '#262626' : '#ddd',
        },
        modal: {
            backgroundColor: scheme === 'dark' ? '#000' : '#fff',
        },
        modalInner: {
            backgroundColor: scheme === 'dark' ? '#000' : '#fff',
        },
        button: {
            backgroundColor: scheme === 'dark' ? '#ffffff09' : '#00000009',
        },
        input: {
            backgroundColor: scheme === 'dark' ? '#191919' : '#f3f3f3',
            color: scheme === 'dark' ? '#fff' : '#000',
        },
        stackHeader: {
            color: scheme === 'dark' ? 'white' : 'black'
        },
        icon: {
            color: scheme === 'dark' ? '#ffffff4d' : '#0000004d',
        },
        divider: {
            backgroundColor: scheme === 'dark' ? '#333' : '#eee',
        },
        filter: {
            backgroundColor: scheme === 'dark' ? '#191919' : '#f3f3f3',
        },
    });
}
Example #8
Source File: App.tsx    From magento_react_native_graphql with MIT License 5 votes vote down vote up 
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 />;
}