Use SegmentedControls

zoontek · Jul 22, 2024 · d1a3fd5 · d1a3fd5
1 parent 53dbe06
commit d1a3fd5
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 100 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -937,6 +937,8 @@ PODS:
     - React-debug
   - react-native-safe-area-context (4.10.8):
     - React-Core
+  - react-native-segmented-control (2.5.2):
+    - React-Core
   - React-nativeconfig (0.74.3)
   - React-NativeModulesApple (0.74.3):
     - glog
@@ -1225,6 +1227,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-segmented-control (from `../node_modules/@react-native-segmented-control/segmented-control`)"
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1319,6 +1322,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-segmented-control:
+    :path: "../node_modules/@react-native-segmented-control/segmented-control"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1402,6 +1407,7 @@ SPEC CHECKSUMS:
   React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304
   React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
   react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
+  react-native-segmented-control: b92809e9111013dfa266e1168ba366d62898d9a4
   React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb
   React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5
   React-perflogger: 7bb9ba49435ff66b666e7966ee10082508a203e8

diff --git a/example/ios/RNBarsExample.xcodeproj/project.pbxproj b/example/ios/RNBarsExample.xcodeproj/project.pbxproj
@@ -396,7 +396,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -468,7 +471,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

diff --git a/example/ios/RNBarsExample/Info.plist b/example/ios/RNBarsExample/Info.plist
@@ -39,8 +39,6 @@
 	<array>
 		<string>arm64</string>
 	</array>
-	<key>UIStatusBarStyle</key>
-	<string>UIStatusBarStyleDarkContent</string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>

diff --git a/example/package.json b/example/package.json
@@ -12,6 +12,7 @@
     "reinstall": "yarn clean && yarn install"
   },
   "dependencies": {
+    "@react-native-segmented-control/segmented-control": "^2.5.2",
     "@react-navigation/native": "6.1.18",
     "@react-navigation/native-stack": "6.10.1",
     "react": "18.2.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,15 +1,15 @@
+import SegmentedControl from "@react-native-segmented-control/segmented-control";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import * as React from "react";
+import { useState } from "react";
 import {
   Appearance,
   StyleSheet,
-  Switch,
   Text,
   useColorScheme,
   View,
 } from "react-native";
-import { NavigationBar, StatusBar } from "react-native-bars";
+import { NavigationBar, StatusBar, SystemBarStyle } from "react-native-bars";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 const styles = StyleSheet.create({
@@ -19,29 +19,15 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingHorizontal: 16,
   },
+  darkContainer: {
+    backgroundColor: "#1F2937",
+  },
   title: {
     color: "#374151",
     fontSize: 20,
     fontWeight: "700",
   },
-  row: {
-    flexDirection: "row",
-  },
-  tag: {
-    backgroundColor: "#E5E7EB",
-    borderRadius: 4,
-    paddingHorizontal: 8,
-  },
-  tagText: {
-    color: "#374151",
-    fontSize: 16,
-    lineHeight: 32,
-    textAlignVertical: "center",
-  },
-  darkTag: {
-    backgroundColor: "#374151",
-  },
-  darkTagText: {
+  darkTitle: {
     color: "#E5E7EB",
   },
 });
@@ -54,98 +40,72 @@ const Space = ({ size }: { size: number }) => (
   />
 );
 
-const Line = ({
-  title,
-  left,
-  right,
-  value,
-  onValueChange,
-  dark,
-}: {
-  title: string;
-  left: string;
-  right: string;
-  value: boolean;
-  onValueChange: (value: boolean) => void;
-  dark: boolean;
-}) => (
-  <View>
-    <Text style={[styles.title, dark && { color: "#E5E7EB" }]}>{title}</Text>
-    <Space size={16} />
-
-    <View style={styles.row}>
-      <View style={[styles.tag, dark && styles.darkTag]}>
-        <Text style={[styles.tagText, dark && styles.darkTagText]}>{left}</Text>
-      </View>
-
-      <Space size={16} />
-
-      <Switch
-        onValueChange={onValueChange}
-        value={value}
-        thumbColor="#E5E7EB"
-        trackColor={{
-          true: "#9CA3AF",
-          false: "#9CA3AF",
-        }}
-      />
+const Title = ({ text }: { text: string }) => {
+  const dark = useColorScheme() === "dark";
 
+  return (
+    <>
+      <Text style={[styles.title, dark && styles.darkTitle]}>{text}</Text>
       <Space size={16} />
+    </>
+  );
+};
 
-      <View style={[styles.tag, dark && styles.darkTag]}>
-        <Text style={[styles.tagText, dark && styles.darkTagText]}>
-          {right}
-        </Text>
-      </View>
-    </View>
-  </View>
-);
+const BAR_STYLES: Record<number, SystemBarStyle> = {
+  0: "auto",
+  1: "light",
+  2: "dark",
+};
 
 const App = () => {
-  const colorScheme = useColorScheme();
-  const dark = colorScheme === "dark";
+  const dark = useColorScheme() === "dark";
 
-  const [isLightStatus, setIsLightStatus] = React.useState(false);
-  const [isLightNavigation, setIsLightNavigation] = React.useState(false);
+  const [statusBarStyleIndex, setStatusBarStyleIndex] = useState(0);
+  const [navigationBarStyleIndex, setNavigationBarStyleIndex] = useState(0);
 
   return (
-    <SafeAreaView
-      style={[styles.container, dark && { backgroundColor: "#1F2937" }]}
-    >
-      <StatusBar style={isLightStatus ? "light" : "dark"} animated={true} />
-      <NavigationBar style={isLightNavigation ? "light" : "dark"} />
-
-      <Line
-        title="Theme"
-        left="dark"
-        right="light"
-        value={!dark}
-        dark={dark}
-        onValueChange={(light) => {
-          Appearance.setColorScheme(light ? "light" : "dark");
+    <SafeAreaView style={[styles.container, dark && styles.darkContainer]}>
+      <StatusBar
+        style={BAR_STYLES[statusBarStyleIndex] ?? "auto"}
+        animated={true}
+      />
+
+      <NavigationBar style={BAR_STYLES[navigationBarStyleIndex] ?? "auto"} />
+
+      <Title text="Theme" />
+
+      <SegmentedControl
+        values={["light", "dark"]}
+        selectedIndex={dark ? 1 : 0}
+        onChange={({ nativeEvent: { selectedSegmentIndex } }) => {
+          Appearance.setColorScheme(
+            selectedSegmentIndex === 1 ? "dark" : "light",
+          );
         }}
       />
 
       <Space size={48} />
 
-      <Line
-        title="<StatusBar />"
-        left="dark"
-        right="light"
-        value={isLightStatus}
-        dark={dark}
-        onValueChange={setIsLightStatus}
+      <Title text="<StatusBar />" />
+
+      <SegmentedControl
+        values={Object.values(BAR_STYLES)}
+        selectedIndex={statusBarStyleIndex}
+        onChange={({ nativeEvent: { selectedSegmentIndex } }) => {
+          setStatusBarStyleIndex(selectedSegmentIndex);
+        }}
       />
 
       <Space size={32} />
 
-      <Line
-        title="<NavigationBar />"
-        left="dark"
-        right="light"
-        value={isLightNavigation}
-        onValueChange={setIsLightNavigation}
-        dark={dark}
+      <Title text="<NavigationBar />" />
+
+      <SegmentedControl
+        values={Object.values(BAR_STYLES)}
+        selectedIndex={navigationBarStyleIndex}
+        onChange={({ nativeEvent: { selectedSegmentIndex } }) => {
+          setNavigationBarStyleIndex(selectedSegmentIndex);
+        }}
       />
     </SafeAreaView>
   );

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1449,6 +1449,11 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
+"@react-native-segmented-control/segmented-control@^2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@react-native-segmented-control/segmented-control/-/segmented-control-2.5.2.tgz#60a090487afb5105edec58197c6c6d64d5f2fba0"
+  integrity sha512-Rm+i7cI/ztZyYLUXzzfiyoe44m3JxAix82qS2Av/DkPWCR1bgfkxtrm6OZ06p4/2hqp4RvtMftxQiHGr/GDPew==
+
 "@react-native/assets-registry@0.74.85":
   version "0.74.85"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.74.85.tgz#ae903c0c25f4d6a751d53d63245d5612c81edd98"