@tactics/toddle-styleguide 4.2.0 → 5.0.0

package/App.tsx

@@ -336,183 +336,313 @@ function App() {
     <ThemeCtx.Provider value={StaffMemberTheme}>
       <NavigationContainer>
         <Stack.Navigator>
-          <Stack.Screen name="home">
+          <Stack.Screen name="home" options={{
+    freezeOnBlur: false,
+  }}>
             {(props) => <HomeScreen {...props} />}
           </Stack.Screen>
-          <Stack.Screen name="avatar">{() => <AvatarPreview />}</Stack.Screen>
-          <Stack.Screen name="amount">{() => <AmountPreview />}</Stack.Screen>
-          <Stack.Screen name="background-gradient">
+          <Stack.Screen name="avatar"options={{
+    freezeOnBlur: false,
+  }}>{() => <AvatarPreview />}</Stack.Screen>
+          <Stack.Screen name="amount"options={{
+    freezeOnBlur: false,
+  }}>{() => <AmountPreview />}</Stack.Screen>
+          <Stack.Screen name="background-gradient" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <BackgroundGradientPreview />}
           </Stack.Screen>
-          <Stack.Screen name="blocked-message">
+          <Stack.Screen name="blocked-message" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <BlockedMessagePreview />}
           </Stack.Screen>
-          <Stack.Screen name="button">{() => <ButtonPreview />}</Stack.Screen>
-          <Stack.Screen name="calendar">
+          <Stack.Screen name="button" options={{
+    freezeOnBlur: false,
+  }}>{() => <ButtonPreview />}</Stack.Screen>
+          <Stack.Screen name="calendar" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CalendarPreview />}
           </Stack.Screen>
-          <Stack.Screen name="calendar-select">
+          <Stack.Screen name="calendar-select" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CalendarSelectPreview />}
           </Stack.Screen>
-          <Stack.Screen name="cancel-link">
+          <Stack.Screen name="cancel-link" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CancelLinkPreview />}
           </Stack.Screen>
-          <Stack.Screen name="checkbox">
+          <Stack.Screen name="checkbox" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CheckboxPreview />}
           </Stack.Screen>
-          <Stack.Screen name="check-switch">
+          <Stack.Screen name="check-switch" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CheckPreview />}
           </Stack.Screen>
-          <Stack.Screen name="child-list-item">
+          <Stack.Screen name="child-list-item" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ChildListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="contact-item">
+          <Stack.Screen name="contact-item" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ContactItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="contact-role">
+          <Stack.Screen name="contact-role" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ContactRolePreview />}
           </Stack.Screen>
-          <Stack.Screen name="context-label">
+          <Stack.Screen name="context-label" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ContextLabelPreview />}
           </Stack.Screen>
-          <Stack.Screen name="count">
+          <Stack.Screen name="count" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <CountPreview />}
           </Stack.Screen>
-          <Stack.Screen name="date-input">
+          <Stack.Screen name="date-input" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <DateInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="default-select">
+          <Stack.Screen name="default-select" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <DefaultSelectPreview />}
           </Stack.Screen>
-          <Stack.Screen name="department-logo">
+          <Stack.Screen name="department-logo" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <DepartmentLogoPreview />}
           </Stack.Screen>
-          <Stack.Screen name="filter-tab">
+          <Stack.Screen name="filter-tab" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <FilterTabPreview />}
           </Stack.Screen>
-          <Stack.Screen name="filter-range">
+          <Stack.Screen name="filter-range" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <FilterRangePreview />}
           </Stack.Screen>
-          <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
-          <Stack.Screen name="headings">
+          <Stack.Screen name="footer" options={{
+    freezeOnBlur: false,
+  }}>{() => <FooterPreview />}</Stack.Screen>
+          <Stack.Screen name="headings" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <HeadingsPreview />}
           </Stack.Screen>
-          <Stack.Screen name="icons default">
+          <Stack.Screen name="icons default" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <IconOutlineDefaultPreview />}
           </Stack.Screen>
-          <Stack.Screen name="icons grey">
+          <Stack.Screen name="icons grey" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <IconOutlineGreyPreview />}
           </Stack.Screen>
-          <Stack.Screen name="icons solid">
+          <Stack.Screen name="icons solid" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <IconSolidPreview />}
           </Stack.Screen>
-          <Stack.Screen name="icons white">
+          <Stack.Screen name="icons white" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <IconOutlineWhitePreview />}
           </Stack.Screen>
-          <Stack.Screen name="image-bubble">
+          <Stack.Screen name="image-bubble" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ImageBubblePreview />}
           </Stack.Screen>
-          <Stack.Screen name="increment-input">
+          <Stack.Screen name="increment-input" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <IncrementInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
-          <Stack.Screen name="journal-entry">
+          <Stack.Screen name="info" options={{
+    freezeOnBlur: false,
+  }}>{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="journal-entry" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <JournalEntryPreview />}
           </Stack.Screen>
-          <Stack.Screen name="language-button">
+          <Stack.Screen name="language-button" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="line">{() => <LinePreview />}</Stack.Screen>
-          <Stack.Screen name="loading-indicator">
+          <Stack.Screen name="line" options={{
+    freezeOnBlur: false,
+  }}>{() => <LinePreview />}</Stack.Screen>
+          <Stack.Screen name="loading-indicator" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>
-          <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
-          <Stack.Screen name="message-input">
+          <Stack.Screen name="logo" options={{
+    freezeOnBlur: false,
+  }}>{() => <LogoPreview />}</Stack.Screen>
+          <Stack.Screen name="message-input" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <MessageInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="modal" options={{headerShown: false}}>
+          <Stack.Screen name="modal" options={{headerShown: false, freezeOnBlur: false}}>
             {() => <ModalPreview />}
           </Stack.Screen>
-          <Stack.Screen name="more-info-button">
+          <Stack.Screen name="more-info-button" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <MoreInfoButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="my-child-list-item">
+          <Stack.Screen name="my-child-list-item" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <MyChildListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="paragraphs">
+          <Stack.Screen name="paragraphs" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ParagraphComponentsPreview />}
           </Stack.Screen>
-          <Stack.Screen name="password-input">
+          <Stack.Screen name="password-input" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <PasswordInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="person-info-card">
+          <Stack.Screen name="person-info-card" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <PersonInfoCardPreview />}
           </Stack.Screen>
-          <Stack.Screen name="pill">{() => <PillPreview />}</Stack.Screen>
-          <Stack.Screen name="popover" options={{headerShown: false}}>
+          <Stack.Screen name="pill" options={{
+    freezeOnBlur: false,
+  }}>{() => <PillPreview />}</Stack.Screen>
+          <Stack.Screen name="popover" options={{headerShown: false, freezeOnBlur:false}}>
             {() => <PopoverPreview />}
           </Stack.Screen>
-          <Stack.Screen name="pressable-icon">
+          <Stack.Screen name="pressable-icon" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <PressableIconPreview />}
           </Stack.Screen>
-          <Stack.Screen name="quick-filter">
+          <Stack.Screen name="quick-filter" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <QuickFilterPreview />}
           </Stack.Screen>
-          <Stack.Screen name="quick-message">
+          <Stack.Screen name="quick-message" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <QuickMessagePreview />}
           </Stack.Screen>
-          <Stack.Screen name="search">{() => <SearchPreview />}</Stack.Screen>
-          <Stack.Screen name="select-link">
+          <Stack.Screen name="search" options={{
+    freezeOnBlur: false,
+  }}>{() => <SearchPreview />}</Stack.Screen>
+          <Stack.Screen name="select-link" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SelectLinkPreview />}
           </Stack.Screen>
-          <Stack.Screen name="select-list-item">
+          <Stack.Screen name="select-list-item" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SelectListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="select-picker">
+          <Stack.Screen name="select-picker" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SelectPickerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="snackbar">
+          <Stack.Screen name="snackbar" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SnackbarPreview />}
           </Stack.Screen>
-          <Stack.Screen name="split-container">
+          <Stack.Screen name="split-container" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SplitContainerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
-          <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
-          <Stack.Screen name="textBubble">
+          <Stack.Screen name="swiper" options={{
+    freezeOnBlur: false,
+  }}>{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="tag" options={{
+    freezeOnBlur: false,
+  }}>{() => <TagPreview />}</Stack.Screen>
+          <Stack.Screen name="textBubble" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TextBubblePreview />}
           </Stack.Screen>
-          <Stack.Screen name="textInputs">
+          <Stack.Screen name="textInputs" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TextInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="time-picker">
+          <Stack.Screen name="time-picker" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TimePickerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="bare-time-picker">
+          <Stack.Screen name="bare-time-picker" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <BareTimePickerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="time-tracker">
+          <Stack.Screen name="time-tracker" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TimeTrackerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="timetable-editor">
+          <Stack.Screen name="timetable-editor" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TimetableEditorPreview />}
           </Stack.Screen>
-          <Stack.Screen name="timeline">
+          <Stack.Screen name="timeline" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <TimeLinePreview />}
           </Stack.Screen>
-          <Stack.Screen name="toddle-datetime">
+          <Stack.Screen name="toddle-datetime" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <ToddleDateTimePreview />}
           </Stack.Screen>
-          <Stack.Screen name="wave">
+          <Stack.Screen name="wave" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <WaveBackgroundPreview />}
           </Stack.Screen>
-          <Stack.Screen name="wide-button">
+          <Stack.Screen name="wide-button" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <WideButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="inline-error">
+          <Stack.Screen name="inline-error" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <InlineErrorPreview />}
           </Stack.Screen>
-          <Stack.Screen name="selectable-list-item">
+          <Stack.Screen name="selectable-list-item" options={{
+    freezeOnBlur: false,
+  }}>
             {() => <SelectableListItemPreview />}
           </Stack.Screen>
         </Stack.Navigator>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -19,11 +19,11 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/config-plugins": "~7.8.0",
-    "@expo/metro-runtime": "~3.1.3",
+    "@expo/config-plugins": "~8.0.0",
+    "@expo/metro-runtime": "~3.2.3",
     "@expo/webpack-config": "~19.0.1",
     "@miblanchard/react-native-slider": "^2.3.1",
-    "@react-native-picker/picker": "2.6.1",
+    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
@@ -33,48 +33,48 @@
     "@testing-library/react-native": "^12.1.2",
     "@types/luxon": "^3.3.0",
     "@types/xdate": "^0.8.32",
-    "expo": "^50.0.0",
-    "expo-font": "~11.10.3",
-    "expo-haptics": "~12.8.1",
-    "expo-linear-gradient": "~12.7.2",
-    "expo-status-bar": "~1.11.1",
+    "expo": "^51.0.0",
+    "expo-font": "~12.0.10",
+    "expo-haptics": "~13.0.1",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-status-bar": "~1.12.1",
     "intl": "^1.2.5",
     "jsc-android": "^250231.0.0",
     "lottie-ios": "4.2.0",
-    "lottie-react-native": "6.5.1",
+    "lottie-react-native": "6.7.0",
     "luxon": "^3.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.6",
+    "react-native": "0.74.5",
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1299.0",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-pager-view": "6.2.3",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-pager-view": "6.3.0",
     "react-native-picker-select": "^8.0.4",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "14.1.0",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-swipe-gestures": "^1.0.5",
-    "react-native-web": "~0.19.6",
+    "react-native-web": "~0.19.10",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-native-wheely": "^0.6.0",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
+    "@babel/core": "^7.24.0",
     "@babel/preset-typescript": "^7.22.5",
     "@types/jest": "^29.5.2",
     "@types/luxon": "^3.3.0",
     "@types/node": "^20.3.1",
-    "@types/react": "~18.2.45",
-    "@types/react-dom": "~18.0.10",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
     "@types/react-test-renderer": "^18.0.0",
     "jest": "^29.5.0",
-    "jest-expo": "~50.0.4",
+    "jest-expo": "~51.0.4",
     "prettier": "2.8.8",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.0"
+    "typescript": "~5.3.3"
   }
 }

package/src/components/organisms/journal-entry/journal-entry.component.tsx

@@ -55,7 +55,9 @@ export const JournalEntry = ({
   ).current;
 
   if (Platform.OS === 'android') {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
+    if (UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
   }
 
   if (loadingNewEntry) {