react-native#useColorScheme TypeScript Examples

Money = ({title, money}: {title: string; money: number}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);

	const strMoney = money.toFixed(2);
	const bigMoney = strMoney.substring(0, strMoney.length - 3);
	const smallMoney = strMoney.substring(strMoney.length - 3);
	return (
		<View style={{alignItems: "center", flex: 1, padding: 5}}>
			<Text style={{color: colors.text}}>{title}</Text>
			<View style={{flexDirection: "row", alignItems: "flex-end"}}>
				<Text style={{fontSize: 28, color: colors.text}}>{bigMoney}</Text>
				<Text style={{fontSize: 18, color: colors.text}}>{smallMoney}</Text>
			</View>
		</View>
	);
}

export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
    const scheme = useColorScheme();

    return (
        <BlurView
            {...props}
            blurType={Platform.OS === 'ios' && majorPlatformVersion >= 13 
                ? 'material'
                : scheme === 'dark' ? 'extraDark' : 'xlight'
            } />
    );
}

export function useTheme() {
  const themeConfig = useSelector(themeSelector);
  const systemColorScheme = useColorScheme();
  if (themeConfig === ThemeConfig.Dark) {
    return LightTheme;
  }
  if (themeConfig === ThemeConfig.System) {
    if (systemColorScheme === 'dark') {
      return LightTheme;
    }
  }
  return LightTheme;
}

Classroom = ({name, navigation}: {name: string; navigation: RootNav}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	return (
		<TouchableOpacity
			style={{
				backgroundColor: colors.themeBackground,
				padding: 7,
				marginHorizontal: 5,
				marginTop: 10,
				width: 120,
				height: 40,
				justifyContent: "center",
				borderRadius: 3,
				shadowColor: "grey",
				shadowOffset: {
					width: 2,
					height: 2,
				},
				shadowOpacity: 0.8,
				shadowRadius: 2,
				borderColor: "#aaa",
				borderWidth: 2,
			}}
			onPress={() => navigation.navigate("ClassroomDetail", {name})}>
			<Text style={{textAlign: "center", color: colors.text}}>{name}</Text>
		</TouchableOpacity>
	);
}

App = () => {
  try {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
      <SafeAreaView style={backgroundStyle}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <AILabNativeImage source={require('./storybook/dinner.jpg')} />
      </SafeAreaView>
    );
  } catch (e) {
    console.log((e as any).message);
    return (
      <SafeAreaView>
        <Text>What's going on?</Text>
      </SafeAreaView>
    );
  }
}

useTheme = (): 'dark' | 'light' => {
  const { theme, followSystemTheme } = useAppSelector((state) => state.theme)
  const colorScheme = useColorScheme()
  if (followSystemTheme) {
    return colorScheme === 'dark' ? 'dark' : 'light'
  } else {
    return theme === 'dark' ? 'dark' : 'light'
  }
}

App = () => {
  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,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

ExpenditureCard = ({record}: {record: Record}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);

	return (
		<View
			style={{
				padding: 10,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View style={{flex: 2, alignItems: "flex-start"}}>
				<Text style={{fontSize: 16, marginVertical: 2, color: colors.text}}>
					{record.locale}
				</Text>
				<Text style={{color: "grey", marginVertical: 2}}>
					{record.category}
				</Text>
				<Text style={{color: "grey", marginVertical: 2}}>{record.date}</Text>
			</View>
			<View style={{flex: 1, alignItems: "flex-end"}}>
				<Text
					style={{fontSize: 20, color: record.value > 0 ? "red" : colors.text}}>
					{(record.value >= 0 ? "+" : "") + record.value.toFixed(2)}
				</Text>
			</View>
		</View>
	);
}

export default function AppWithProviders() {
  const dark = useColorScheme() === 'dark'

  return (
    <PaperProvider
      theme={
        dark
          ? {
              ...DarkTheme,
              roundness: 10,
              colors: {
                ...DarkTheme.colors,
                // primary: '#F59E00',
                // accent: '#FBBE5E',
              },
            }
          : {
              ...DefaultTheme,
              roundness: 10,
              colors: {
                ...DefaultTheme.colors,
                // primary: '#F59E00',
                // accent: '#FBBE5E',
              },
            }
      }
    >
      <App />
    </PaperProvider>
  )
}

GitlabCodeScreen = ({
	route: {
		params: {project, file},
	},
}: {
	navigation: RootNav;
	route: GitLabCodeProp;
}) => {
	const themeName = useColorScheme();

	const [content, setContent] = useState<string>();

	useEffect(() => {
		helper.getGitProjectFileBlob(project.id, file.id).then(setContent);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const adaptedHtml = `<head>
<meta name="viewport" content="width=100, initial-scale=1">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head><body><pre><code>${encode(content ?? "")}</code></pre></body>`;

	return (
		<WebView
			source={{html: adaptedHtml}}
			style={{margin: 6}}
			forceDarkOn={themeName === "dark"}
		/>
	);
}

RootNavigator = () => {
  const scheme = useColorScheme();
  return (
    <NavigationContainer
      theme={scheme === 'dark' ? navigationDarkTheme : navigationLightTheme}
    >
      <Drawer.Navigator drawerContent={props => <DrawerScreen {...props} />}>
        <Drawer.Screen
          name="drawer"
          component={StackNavigator}
          options={{
            swipeEnabled: false,
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

SettingsMiddleText = ({
	text,
	onPress,
}: {
	text: string;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				alignItems: "center",
			}}>
			<Text style={{color: colors.text}}>{text}</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

export default function MediaControls() {
    const scheme = useColorScheme();
    const fill = scheme === 'dark' ? '#ffffff' : '#000000';

    return (
        <Container>
            <Buttons>
                <Button>
                    <PreviousButton fill={fill} />
                </Button>
                <MainButton fill={fill} />
                <Button>
                    <NextButton fill={fill} />
                </Button>
            </Buttons>
        </Container>
    );
}

ReportSummary = (props: {
	gpa: number;
	totalCredits: number;
	allCredits: number;
	totalPoints: number;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const style = styles(themeName);

	return (
		<View style={style.reportSummaryContainer}>
			<View style={style.reportContainer}>
				<Text style={[style.reportText, {fontSize: 20, fontWeight: "bold"}]}>
					{getStr("allGPA")}
					{gpaToStr(props.gpa, 3)}
				</Text>
			</View>
			<View style={style.reportContainer}>
				<Text style={[style.reportText, {fontSize: 14, color: colors.fontB2}]}>
					{getStr("allCredits")}:{props.allCredits}
					{"  "}
					{getStr("totalCredits")}:{props.totalCredits}
					{"  "}
					{getStr("totalPoints")}:{gpaToStr(props.totalPoints, 1)}
				</Text>
			</View>
		</View>
	);
}

ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const _colorScheme = useColorScheme();
  const colorScheme = _colorScheme || "light";
  const [themePref, setThemePref] = useState({});
  const [colors, setColors] = useState(
    colorScheme === "dark" ? defaultThemeDark : defaultThemeLight
  );

  useEffect(() => {
    AsyncStorage.getItem(themeKey).then((x) => {
      if (x) {
        const themeOfChoice = JSON.parse(x);
        setThemePref(x);
        const name =
          themeOfChoice[colorScheme] ||
          (colorScheme === "dark"
            ? defaultDarkThemeName
            : defaultLightThemeName);
        const c = vscodeThemes.find((t) => t.name === name)?.colors;
        if (c) {
          setColors(c);
        }
      }
    });
  }, []);

  return (
    <ThemeContext.Provider
      value={useMemo(
        () => [
          colors,
          (name) => {
            const c = vscodeThemes.find((t) => t.name === name)?.colors;
            if (c) {
              setColors(c);
              const newThemePref = {
                ...themePref,
                [colorScheme]: name,
              };
              setThemePref(newThemePref);
              AsyncStorage.setItem(themeKey, JSON.stringify(newThemePref));
            }
          },
        ],
        [colors, colorScheme, themePref]
      )}
    >
      <StatusBar
        barStyle={
          colors.editorBackground === "#002B36"
            ? "light-content"
            : colorScheme === "dark"
            ? "light-content"
            : "dark-content"
        }
      />
      {children}
    </ThemeContext.Provider>
  );
}

HomeUI = (props: HomeProps) => {
	const theme = themes(useColorScheme());
	const homeFunctions = getHomeFunctions(props.navigation, props.updateTop5);
	const top5 = props.top5Functions.map((x) =>
		homeFunctions.find((y) => y.key === x),
	);
	const needToShowFunctionNames: HomeFunction[] = [
		"teachingEvaluation",
		"report",
		"classroomState",
		"reserve",
		"finance",
		"reservesLib",
		"dormitory",
		"cr",
	];
	const needToShowFunctions = needToShowFunctionNames.map((x) =>
		homeFunctions.find((y) => y.key === x),
	);

	React.useEffect(() => {
		setTimeout(() => {
			helper.userId !== "" &&
				helper.getBookingRecords().then(props.setActiveLibBookRecord);
			// To avoid login hazard between getBookingRecords and getCountdown
		}, 3000);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return (
		<ScrollView style={{backgroundColor: theme.colors.themeBackground}}>
			<HomeFunctionSection title="recentlyUsedFunction">
				{top5}
			</HomeFunctionSection>
			<HomeReservationSection
				activeLibBookRecords={props.activeLibBookRecords}
			/>
			<HomeScheduleSection
				baseSchedule={props.baseSchedule}
				shortenMap={props.shortenMap}
				navigation={props.navigation}
			/>
			<HomeFunctionSection title="allFunction">
				{needToShowFunctions}
			</HomeFunctionSection>
		</ScrollView>
	);
}

ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const _colorScheme = useColorScheme();
  const colorScheme = _colorScheme || "light";
  const [themePref, setThemePref] = useState({});
  const [colors, setColors] = useState(
    colorScheme === "dark" ? defaultThemeDark : defaultThemeLight
  );

  useEffect(() => {
    AsyncStorage.getItem(themeKey).then((x) => {
      if (x) {
        const themeOfChoice = JSON.parse(x);
        setThemePref(x);
        const name =
          themeOfChoice[colorScheme] ||
          (colorScheme === "dark"
            ? defaultDarkThemeName
            : defaultLightThemeName);
        const c = vscodeThemes.find((t) => t.name === name)?.colors;
        if (c) {
          setColors(c);
        }
      }
    });
  }, [colorScheme]);

  return (
    <ThemeContext.Provider
      value={useMemo(
        () => [
          colors,
          (name) => {
            const c = vscodeThemes.find((t) => t.name === name)?.colors;
            if (c) {
              setColors(c);
              const newThemePref = {
                ...themePref,
                [colorScheme]: name,
              };
              setThemePref(newThemePref);
              AsyncStorage.setItem(themeKey, JSON.stringify(newThemePref));
            }
          },
        ],
        [colors, colorScheme, themePref]
      )}
    >
      <StatusBar
        barStyle={
          colors.editorBackground === "#002B36"
            ? "light-content"
            : colorScheme === "dark"
            ? "light-content"
            : "dark-content"
        }
      />
      {children}
    </ThemeContext.Provider>
  );
}

PickerModalWrapper = (props: PickerModalWrapperProps) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);

	return (
		<View
			style={{
				flexDirection: "row",
				justifyContent: "space-around",
				alignItems: "center",
				marginBottom: 8,
			}}>
			{getModal(
				props.defaultValue[0],
				props.items[0],
				true,
				props.text[0],
				props.isModalGroup
					? (value: string) => {
							props.onLeftSelect(value);
							props.rightPickerRef.current.select(-1);
							// eslint-disable-next-line no-mixed-spaces-and-tabs
					  }
					: props.onLeftSelect,
				props.containerPadding,
				undefined,
				colors,
			)}
			{getModal(
				props.defaultValue[1],
				props.items[1],
				false,
				props.text[1],
				props.onRightSelect,
				props.containerPadding,
				props.rightPickerRef,
				colors,
			)}
		</View>
	);
}

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 />;
}

ReserveScreen = ({navigation}: {navigation: RootNav}) => {
	const themeName = useColorScheme();
	const style = styles(themeName);
	return (
		<View style={style.SecondaryRootView}>
			<View style={style.SecondaryContentView}>
				<SecondaryItem
					title="library"
					destKey="library"
					icon={
						<IconLibrary
							width={secondaryItemIconSize}
							height={secondaryItemIconSize}
						/>
					}
					onPress={() => {
						navigation.navigate("Library");
					}}
				/>
				<SecondaryItemSeparator />
				<SecondaryItem
					title="sportsBook"
					destKey="sportsBook"
					icon={
						<IconSports
							width={secondaryItemIconSize}
							height={secondaryItemIconSize}
						/>
					}
					onPress={() => {
						navigation.navigate("Sports");
					}}
				/>
				<SecondaryItemSeparator />
				<SecondaryItem
					title="libRoomBook"
					destKey="libRoomBook"
					icon={
						<IconLibRoom
							width={secondaryItemIconSize}
							height={secondaryItemIconSize}
						/>
					}
					onPress={() => {
						navigation.navigate("LibRoomBook");
					}}
				/>
			</View>
		</View>
	);
}

export function useColorSchemeContext(): Mode {
	const context = useContext(ColorSchemeContext)

	if (context) return context

	return useColorScheme() || 'light'
}

FeedbackScreen = ({navigation}: {navigation: RootNav}) => {
	const [text, setText] = useState("");
	const [contact, setContact] = useState("");
	const [qrcodeContent, setQrcodeContent] = useState<string>();
	const [feedbackData, setFeedbackData] = useState<
		AsyncReturnType<typeof getFeedbackReplies>
	>([]);
	const themeName = useColorScheme();
	const {colors} = themes(themeName);

	useEffect(() => {
		getFeedbackReplies().then(setFeedbackData);
		getWeChatGroupQRCodeContent().then(setQrcodeContent);
	}, []);

	return (
		<ScrollView style={{flex: 1, marginHorizontal: 12}}>
			<Text style={{fontSize: 20, marginLeft: 30, fontWeight: "bold"}}>
				{getStr("askBox")}
			</Text>
			{feedbackData.slice(0, 5).map(({question}) => (
				<SettingsItem
					key={question}
					text={question}
					onPress={() => navigation.navigate("Popi")}
					icon={undefined}
					normalText={true}
				/>
			))}
			<SettingsMiddleText
				text={getStr("more")}
				onPress={() => navigation.navigate("Popi")}
			/>
			<SettingsSeparator />
			<View
				style={{backgroundColor: colors.themeBackground, alignItems: "center"}}>
				{qrcodeContent !== undefined && (
					<>
						<QRCode value={qrcodeContent} size={80} />
						<Text style={{marginTop: 6, color: "grey"}}>
							{getStr("wechatPrompt")}
						</Text>
					</>
				)}
			</View>
			<TextInput
				value={text}
				onChangeText={setText}
				style={{
					textAlignVertical: "top",
					fontSize: 15,
					marginTop: 12,
					padding: 12,
					backgroundColor: colors.themeBackground,
					color: colors.text,
					borderColor: "#CCC",
					borderWidth: 1,
					borderRadius: 5,
				}}
				placeholder={getStr("feedbackHint")}
				multiline={true}
			/>
			<View
				style={{
					flexDirection: "row",
					alignItems: "center",
				}}>
				<TextInput
					value={contact}
					onChangeText={setContact}
					style={{
						flex: 3,
						textAlignVertical: "top",
						fontSize: 15,
						marginVertical: 8,
						padding: 12,
						backgroundColor: colors.themeBackground,
						color: colors.text,
						borderColor: "#CCC",
						borderWidth: 1,
						borderRadius: 5,
					}}
					placeholder={getStr("contact")}
				/>
				<BottomButton
					text="submit"
					onPress={() => {
						submitFeedback(text, contact)
							.then(() =>
								Snackbar.show({
									text: getStr("feedbackSuccess"),
									duration: Snackbar.LENGTH_SHORT,
								}),
							)
							.catch(() =>
								Snackbar.show({
									text: getStr("networkRetry"),
									duration: Snackbar.LENGTH_SHORT,
								}),
							);
					}}
					disabled={text.length === 0}
				/>
			</View>
		</ScrollView>
	);
}