added unistyles lib, update chip component

better-rail · Jan 19, 2025 · cae4baa · cae4baa
1 parent 1b4ab0b
commit cae4baa
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 19 deletions.
diff --git a/app/components/chip/chip.tsx b/app/components/chip/chip.tsx
@@ -1,31 +1,37 @@
-import { TouchableOpacity, ViewStyle } from "react-native"
+import { TouchableOpacity, type ViewStyle } from "react-native"
 import { color, fontScale, spacing } from "../../theme"
+import { StyleSheet } from "react-native-unistyles"
 
-const CHIP_WRAPPER: ViewStyle = {
-  paddingHorizontal: spacing[3] * fontScale,
-  paddingVertical: spacing[0] + 1 * fontScale,
-  flexDirection: "row",
-  alignItems: "center",
-  borderRadius: 30,
-}
-
-const COLORS = {
+const CHIP_VARIANTS = {
   success: color.success,
   primary: color.primary,
-}
+  transparent: "transparent",
+} as const
 
 interface ChipProps {
   children: React.ReactNode
-  color: keyof typeof COLORS
+  variant: keyof typeof CHIP_VARIANTS
   onPress: () => void
   icon?: React.ReactNode
   style?: ViewStyle
 }
 
-export function Chip({ children, color, onPress, style }: ChipProps) {
+export function Chip({ children, variant, onPress, style }: ChipProps) {
   return (
-    <TouchableOpacity style={[CHIP_WRAPPER, { backgroundColor: COLORS[color] }, style]} onPress={onPress}>
+    <TouchableOpacity style={[stylesheet.chipWrapper(variant), style]} onPress={onPress}>
       {children}
     </TouchableOpacity>
   )
 }
+
+const stylesheet = StyleSheet.create({
+  chipWrapper: (variant: keyof typeof CHIP_VARIANTS) => ({
+    paddingHorizontal: spacing[3] * fontScale,
+    paddingVertical: spacing[0] + 1 * fontScale,
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 30,
+    borderWidth: 1,
+    borderColor: variant === "transparent" ? color.separator : undefined,
+  }),
+})
diff --git a/app/screens/planner/planner-screen-header.tsx b/app/screens/planner/planner-screen-header.tsx
@@ -90,7 +90,7 @@ export const PlannerScreenHeader = observer(function PlannerScreenHeader() {
         <View style={{ flexDirection: "row", gap: spacing[2] }}>
           {ride.route && (
             <Chip
-              color="success"
+              variant="success"
               onPress={() => {
                 // @ts-expect-error
                 navigation.navigate("activeRideStack", {
@@ -107,7 +107,7 @@ export const PlannerScreenHeader = observer(function PlannerScreenHeader() {
           )}
 
           {/* {displayNewBadge && !showUrgentBar && ( */}
-          <Chip color="primary" onPress={() => navigation.navigate("liveAnnouncementStack")}>
+          <Chip variant="primary" onPress={() => navigation.navigate("liveAnnouncementStack")}>
             <Image source={SPARKLES_ICON} style={{ height: 16, width: 16, marginEnd: spacing[2], tintColor: "white" }} />
             <Text style={{ color: "white", fontWeight: "500" }} tx="common.new" />
           </Chip>

diff --git a/app/screens/route-list/components/station-hours-sheet.tsx b/app/screens/route-list/components/station-hours-sheet.tsx
@@ -2,7 +2,7 @@ import { forwardRef } from "react"
 import { View, type ViewStyle } from "react-native"
 import type BottomSheet from "@gorhom/bottom-sheet"
 import { BottomSheetView } from "@gorhom/bottom-sheet"
-import { Text } from "../../../components"
+import { Chip, Text } from "../../../components"
 import { BottomSheetModal } from "../../../components/sheets/bottom-sheet-modal"
 import { color, spacing } from "../../../theme"
 import { observer } from "mobx-react-lite"
@@ -32,8 +32,11 @@ export const StationHoursSheet = observer(
     })
 
     return (
-      <BottomSheetModal ref={ref}>
+      <BottomSheetModal snapPoints={["50%"]} ref={ref}>
         <BottomSheetView style={WRAPPER}>
+          <Chip variant="transparent" onPress={() => {}}>
+            <Text>hi</Text>
+          </Chip>
           {isLoading ? (
             <Text>טוען...</Text>
           ) : (

diff --git a/app/screens/route-list/route-list-screen.tsx b/app/screens/route-list/route-list-screen.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from "react"
+import React, { useEffect, useMemo, useRef } from "react"
 import { View, ActivityIndicator, ViewStyle, Dimensions } from "react-native"
 import Animated from "react-native-reanimated"
 import { FlashList } from "@shopify/flash-list"
@@ -27,6 +27,12 @@ export const RouteListScreen = observer(function RouteListScreen({ navigation, r
 
   const stationHoursSheetRef = useRef<BottomSheet>(null)
 
+  useEffect(() => {
+    setTimeout(() => {
+      stationHoursSheetRef.current?.expand()
+    }, 1000)
+  }, [route.params.originId])
+
   const { isInternetReachable } = useNetInfo()
   const trains = useQuery(
     ["origin", originId, "destination", destinationId, "time", routePlan.date.getDate()],

diff --git a/babel.config.js b/babel.config.js
@@ -11,6 +11,7 @@ module.exports = {
       },
     ],
     ["@babel/plugin-proposal-optional-catch-binding"],
+    ["react-native-unistyles/plugin"],
     "react-native-reanimated/plugin",
   ],
 }
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1429,6 +1429,29 @@ PODS:
     - nanopb/encode (= 3.30910.0)
   - nanopb/decode (3.30910.0)
   - nanopb/encode (3.30910.0)
+  - NitroModules (0.21.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - PromisesObjC (2.4.0)
   - PromisesSwift (2.4.0):
     - PromisesObjC (= 2.4.0)
@@ -3502,6 +3525,30 @@ PODS:
   - SocketRocket (0.7.1)
   - SPAlert (4.2.0)
   - SPIndicator (1.6.4)
+  - Unistyles (3.0.0-beta.4):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - NitroModules
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsinspector
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererconsistency
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -3516,6 +3563,7 @@ DEPENDENCIES:
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - NitroModules (from `../node_modules/react-native-nitro-modules`)
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
@@ -3609,6 +3657,7 @@ DEPENDENCIES:
   - RNShare (from `../node_modules/react-native-share`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNWatch (from `../node_modules/react-native-watch-connectivity`)
+  - Unistyles (from `../node_modules/react-native-unistyles`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -3673,6 +3722,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2024-11-12-RNv0.76.2-5b4aa20c719830dcf5684832b89a6edb95ac3d64
+  NitroModules:
+    :path: "../node_modules/react-native-nitro-modules"
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
@@ -3855,6 +3906,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-svg"
   RNWatch:
     :path: "../node_modules/react-native-watch-connectivity"
+  Unistyles:
+    :path: "../node_modules/react-native-unistyles"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -3899,6 +3952,7 @@ SPEC CHECKSUMS:
   hermes-engine: 1949ca944b195a8bde7cbf6316b9068e19cf53c6
   leveldb-library: cc8b8f8e013647a295ad3f8cd2ddf49a6f19be19
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
+  NitroModules: 1c86e01cc0c812e4b7a732e4ba754875a023f3c8
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
   RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
@@ -3996,6 +4050,7 @@ SPEC CHECKSUMS:
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SPAlert: 735da1f16a887e294719217572ce1f936d8c8782
   SPIndicator: 93e0a4fb23de51294ac48e874c0f081a5e293e4f
+  Unistyles: 18a9eccc1fd15881444f7c511f11fd5f853624a5
   Yoga: c597d2c0803c51f27569fb69f05eeb76646c0074
 
 PODFILE CHECKSUM: 68ac86e02d21e8cb06b5a00ec7c1b09bf6404115

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "react-native-date-picker": "4.2.10",
     "react-native-default-preference": "^1.4.4",
     "react-native-device-info": "10.6.0",
+    "react-native-edge-to-edge": "^1.4.0",
     "react-native-gesture-handler": "^2.22.0",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-iap": "^12.15.4",
@@ -84,6 +85,7 @@
     "react-native-material-tabs": "^4.2.0",
     "react-native-modal": "13.0.1",
     "react-native-modal-datetime-picker": "9.2.1",
+    "react-native-nitro-modules": "^0.21.0",
     "react-native-prompt-android": "^1.1.0",
     "react-native-push-notification": "^8.1.1",
     "react-native-quick-actions-shortcuts": "1.0.2",
@@ -94,6 +96,7 @@
     "react-native-share": "^11.0.3",
     "react-native-svg": "^15.11.1",
     "react-native-touchable-scale": "2.2.0",
+    "react-native-unistyles": "^3.0.0-beta.4",
     "react-native-video": "^6.5.0",
     "react-native-watch-connectivity": "1.1.0",
     "react-query": "3.39.3",

diff --git a/yarn.lock b/yarn.lock
@@ -11794,6 +11794,11 @@ react-native-device-info@10.6.0:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-10.6.0.tgz#51f1b2ec98abc32747149b0a5b7fb662b44d50e4"
   integrity sha512-/MmINdojWdw2/9rwYpH/dX+1gFP0o78p8yYPjwxiPhoySSL2rZaNi+Mq9VwC+zFi/yQmJUvHntkKSw2KUc7rFw==
 
+react-native-edge-to-edge@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-edge-to-edge/-/react-native-edge-to-edge-1.4.0.tgz#1c99145ac118b7f5d0374cc1c00fc3cb745a2410"
+  integrity sha512-+KyXEBsDhCz9jARPsrrdpCSXxw43j99LfHBDns34qYhYp6feI9GeLIUYytlKusO5duXIHD0BIx7IqBp0J5JduQ==
+
 react-native-flipper@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.34.0.tgz#7df1f38ba5d97a9321125fe0fccbe47d99e6fa1d"
@@ -11870,6 +11875,11 @@ react-native-modal@13.0.1:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
+react-native-nitro-modules@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/react-native-nitro-modules/-/react-native-nitro-modules-0.21.0.tgz#e59e095b6124247ca220d5b6cb58375bc9dfac28"
+  integrity sha512-7OQsFiApHnBmTmZj5Ge6A1FZb63v3BjI4p2Y0s6zff35Tq9LJemjB2tHdv5F/0tbjHBV4AYcZf5DMop3NdzOog==
+
 react-native-prompt-android@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-native-prompt-android/-/react-native-prompt-android-1.1.0.tgz#3c5168029075cb9f72549fd5f92403372fb234e9"
@@ -11942,6 +11952,11 @@ react-native-touchable-scale@2.2.0:
     deprecated-react-native-prop-types "^2.3.0"
     prop-types "^15.6.0"
 
+react-native-unistyles@^3.0.0-beta.4:
+  version "3.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/react-native-unistyles/-/react-native-unistyles-3.0.0-beta.4.tgz#ae542a43e243eba2cf87dbecaa35a7134dfde31e"
+  integrity sha512-epCDTHQwoeC2aEfHIWoJFCqCItNe29hv9Cru6nHBRGeQHpbxEZDlbaCS2ntVjxNDhgmoet0uS75qMFPmraxvzw==
+
 react-native-video@^6.5.0:
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-6.9.1.tgz#e83bfcd608e381adf5e02295c07a943ff64eaaa1"