@react-navigation/native#DarkTheme TypeScript Examples

The following examples show how to use @react-navigation/native#DarkTheme. 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: 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 #4
Source File: AppNavigator.tsx    From lexicon with MIT License 6 votes vote down vote up 
export default function AppNavigator() {
  const { colorScheme } = useColorScheme();
  const darkMode = colorScheme === 'dark';

  return (
    <>
      <StatusBar style={darkMode ? 'light' : 'dark'} />
      <NavigationContainer theme={darkMode ? DarkTheme : DefaultTheme}>
        <RootStackNavigator />
      </NavigationContainer>
    </>
  );
}
Example #5
Source File: darkTheme.ts    From magento_react_native_graphql with MIT License 6 votes vote down vote up 
navigationDarkTheme = {
  dark: true,
  colors: {
    ...DarkTheme.colors,
    /**
     * Used as tint color in bottombar
     */
    primary: '#fff',
  },
}
Example #6
Source File: App.tsx    From react-native-sticky-item with MIT License 5 votes vote down vote up 
export default function App() {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator initialRouteName="Root">
        <Stack.Screen
          name="Root"
          component={RootScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Basic"
          options={{
            title: 'Basic',
          }}
          component={BasicScreen}
        />
        <Stack.Screen
          name="BasicRTL"
          options={{
            title: `בסיסי`,
          }}
          component={BasicRTLScreen}
        />
        <Stack.Screen
          name="BasicCustomSeparator"
          options={{
            title: 'Custom Separator',
          }}
          component={BasicCustomSeparatorScreen}
        />
        <Stack.Screen
          name="FacebookStories"
          options={{
            title: 'Facebook Stories',
          }}
          component={FacebookStoriesScreen}
        />
        <Stack.Screen
          name="FacebookStoriesStyled"
          options={{
            title: 'Facebook Stories Styled',
          }}
          component={FacebookStoriesStyledScreen}
        />
        <Stack.Screen
          name="FacebookStoriesRTL"
          options={{
            title: 'فيس بوك قصص',
          }}
          component={FacebookStoriesRTLScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
Example #7
Source File: App.tsx    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up 
App: FC = () => {
  const theme = useTheme()
  const ref = useRef(null)

  useEffect(() => {
    setI18nConfig()
    SplashScreen.hide()
    addEventListener('change', handleLocalizationChange)
    Purchases.setDebugLogsEnabled(true)
    Purchases.setup(CONFIG.REVENUE_CAT)
    Purchases.addPurchaserInfoUpdateListener(purchaserInfoUpdateListener)
    Purchases.addShouldPurchasePromoProductListener(shouldPurchasePromoProduct)

    return () => {
      removeEventListener('change', handleLocalizationChange)
      Purchases.removePurchaserInfoUpdateListener(purchaserInfoUpdateListener)
      Purchases.removeShouldPurchasePromoProductListener(
        shouldPurchasePromoProduct
      )
    }
  }, [])

  const purchaserInfoUpdateListener: PurchaserInfoUpdateListener = (info) => {
    //FIXME
  }

  const handleLocalizationChange = () => {
    setI18nConfig()
  }

  const shouldPurchasePromoProduct = async (
    deferredPurchase: () => MakePurchasePromise
  ) => {
    try {
      deferredPurchase()
    } catch (error) {
      Sentry.captureException(error)
    }
  }

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
        <StyledStatusBar animated />
        <NavigationContainer
          linking={linking}
          ref={ref}
          theme={theme === 'dark' ? DarkTheme : DefaultTheme}>
          <Root />
        </NavigationContainer>
      </ThemeProvider>
    </QueryClientProvider>
  )
}