@react-navigation/native#DefaultTheme TypeScript Examples

The following examples show how to use @react-navigation/native#DefaultTheme. 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: App.tsx    From THUInfo with MIT License 6 votes vote down vote up 
App = () => (
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<NavigationContainer
				theme={{
					...DefaultTheme,
					colors: {
						...DefaultTheme.colors,
						text: themes(useColorScheme()).colors.text,
						background: themes(useColorScheme()).colors.themeBackground,
						card: themes(useColorScheme()).colors.themeBackground,
						border:
							useColorScheme() === "dark"
								? "white"
								: DefaultTheme.colors.border,
					},
				}}>
				<AuthFlow />
			</NavigationContainer>
		</PersistGate>
	</Provider>
)
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: 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 #6
Source File: lightTheme.ts    From magento_react_native_graphql with MIT License 6 votes vote down vote up 
navigationLightTheme = {
  dark: false,
  colors: {
    ...DefaultTheme.colors,
    /**
     * Used as tint color in bottombar
     */
    primary: lightColors.secondary,
    background: lightColors.background,
    text: lightColors.primary,
  },
}
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>
  )
}
Example #8
Source File: App.tsx    From jellyfin-audio-player with MIT License 5 votes vote down vote up 
LightTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        background: themes.light.view.backgroundColor,
    }
}