From 802db004ae70608c31df79cbc710ee77adf3ec3f Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Thu, 10 Dec 2020 02:04:28 +0100 Subject: [PATCH] chore: upgrade dependencies --- example/metro.config.js | 9 - example/package.json | 51 +- example/src/Screens/MaterialBottomTabs.tsx | 4 +- example/src/index.tsx | 3 +- package.json | 18 +- packages/bottom-tabs/package.json | 16 +- .../src/views/ResourceSavingScene.tsx | 10 +- packages/core/package.json | 10 +- packages/core/src/BaseNavigationContainer.tsx | 6 +- packages/devtools/package.json | 8 +- packages/drawer/package.json | 18 +- packages/drawer/src/views/DrawerItem.tsx | 4 - packages/drawer/src/views/DrawerView.tsx | 4 +- packages/drawer/src/views/GestureHandler.tsx | 8 +- packages/drawer/src/views/Header.tsx | 2 - .../drawer/src/views/ResourceSavingScene.tsx | 10 +- .../drawer/src/views/TouchableItem.ios.tsx | 5 +- packages/material-bottom-tabs/package.json | 10 +- .../src/views/MaterialBottomTabView.tsx | 67 +- packages/material-top-tabs/package.json | 10 +- packages/native/package.json | 10 +- packages/routers/package.json | 8 +- packages/stack/package.json | 18 +- packages/stack/src/views/BorderlessButton.tsx | 5 +- packages/stack/src/views/GestureHandler.tsx | 4 +- .../src/views/Header/HeaderBackButton.tsx | 2 - .../src/views/Header/HeaderContainer.tsx | 7 +- .../stack/src/views/Header/HeaderTitle.tsx | 1 + packages/stack/src/views/KeyboardManager.tsx | 18 +- packages/stack/src/views/Screens.tsx | 38 +- packages/stack/src/views/Stack/CardStack.tsx | 2 +- .../stack/src/views/TouchableItem.ios.tsx | 5 +- yarn.lock | 4756 ++++++++--------- 33 files changed, 2527 insertions(+), 2620 deletions(-) diff --git a/example/metro.config.js b/example/metro.config.js index 3ed8a1ec..1c57784c 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -80,13 +80,4 @@ module.exports = { }; }, }, - - transformer: { - getTransformOptions: () => ({ - transform: { - experimentalImportSupport: false, - inlineRequires: true, - }, - }), - }, }; diff --git a/example/package.json b/example/package.json index 2f66de56..d2ecde6c 100644 --- a/example/package.json +++ b/example/package.json @@ -13,51 +13,50 @@ "test": "jest" }, "dependencies": { - "@expo/vector-icons": "^10.0.0", - "@react-native-async-storage/async-storage": "^1.13.1", + "@expo/vector-icons": "^12.0.0", "@react-native-masked-view/masked-view": "0.2.0", "color": "^3.1.3", - "expo": "^39.0.0", - "expo-asset": "~8.2.0", - "expo-blur": "~8.2.0", - "expo-linking": "^1.0.4", - "expo-updates": "~0.3.5", + "expo": "^40.0.0", + "expo-asset": "~8.2.1", + "expo-blur": "~8.2.2", + "expo-linking": "~2.0.0", + "expo-updates": "~0.4.1", "koa": "^2.13.0", - "react": "~16.13.1", - "react-dom": "~16.13.1", - "react-native": "~0.63.2", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz", "react-native-appearance": "~0.3.3", - "react-native-gesture-handler": "~1.7.0", - "react-native-paper": "^4.2.0", + "react-native-gesture-handler": "~1.8.0", + "react-native-paper": "^4.5.0", "react-native-reanimated": "~1.13.0", - "react-native-safe-area-context": "3.1.4", - "react-native-screens": "~2.10.1", + "react-native-safe-area-context": "3.1.9", + "react-native-screens": "~2.15.0", "react-native-tab-view": "^2.15.2", "react-native-vector-icons": "^7.0.0", - "react-native-web": "^0.13.16" + "react-native-web": "~0.13.12" }, "devDependencies": { - "@babel/node": "^7.12.1", - "@expo/webpack-config": "^0.12.40", - "@types/cheerio": "^0.22.22", + "@babel/node": "^7.12.10", + "@expo/webpack-config": "~0.12.51", + "@types/cheerio": "^0.22.23", "@types/jest-dev-server": "^4.2.0", "@types/koa": "^2.11.6", "@types/node-fetch": "^2.5.7", - "@types/react": "~16.9.53", - "@types/react-dom": "^16.9.8", - "@types/react-native": "~0.63.30", - "babel-loader": "^8.1.0", + "@types/react": "~16.9.35", + "@types/react-dom": "~16.9.8", + "@types/react-native": "~0.62.0", + "babel-loader": "^8.2.2", "babel-plugin-module-resolver": "^4.0.0", - "babel-preset-expo": "^8.3.0", + "babel-preset-expo": "8.3.0", "cheerio": "^1.0.0-rc.3", - "expo-cli": "^3.28.2", - "jest": "^26.6.1", + "expo-cli": "^4.0.17", + "jest": "^26.6.3", "jest-dev-server": "^4.4.0", "mock-require-assets": "^0.0.1", "node-fetch": "^2.6.1", "nodemon": "^2.0.6", "playwright": "^0.14.0", "serve": "^11.3.0", - "typescript": "^4.1.2" + "typescript": "~4.1.3" } } diff --git a/example/src/Screens/MaterialBottomTabs.tsx b/example/src/Screens/MaterialBottomTabs.tsx index 110ddd8b..c8d676e5 100644 --- a/example/src/Screens/MaterialBottomTabs.tsx +++ b/example/src/Screens/MaterialBottomTabs.tsx @@ -14,9 +14,7 @@ type MaterialBottomTabParams = { Chat: undefined; }; -const MaterialBottomTabs = createMaterialBottomTabNavigator< - MaterialBottomTabParams ->(); +const MaterialBottomTabs = createMaterialBottomTabNavigator(); export default function MaterialBottomTabsScreen() { return ( diff --git a/example/src/index.tsx b/example/src/index.tsx index ca401403..08d4aa64 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + AsyncStorage, ScrollView, Platform, StatusBar, @@ -7,6 +8,7 @@ import { Dimensions, ScaledSize, Linking, + // @ts-expect-error: we need to use older version of types for now LogBox, } from 'react-native'; import { enableScreens } from 'react-native-screens'; @@ -34,7 +36,6 @@ import { HeaderStyleInterpolators, } from '@react-navigation/stack'; import { useReduxDevToolsExtension } from '@react-navigation/devtools'; -import AsyncStorage from '@react-native-async-storage/async-storage'; import { restartApp } from './Restart'; import LinkingPrefixes from './LinkingPrefixes'; diff --git a/package.json b/package.json index 8546caa1..e918dbee 100644 --- a/package.json +++ b/package.json @@ -27,18 +27,18 @@ }, "devDependencies": { "@commitlint/config-conventional": "^11.0.0", - "@types/jest": "^26.0.15", - "babel-jest": "^26.6.1", - "codecov": "^3.8.0", + "@types/jest": "^26.0.19", + "babel-jest": "^26.6.3", + "codecov": "^3.8.1", "commitlint": "^11.0.0", - "eslint": "^7.12.0", + "eslint": "^7.15.0", "eslint-config-satya164": "^3.1.8", - "husky": "^4.3.0", - "jest": "^26.6.1", + "husky": "^4.3.6", + "jest": "^26.6.3", "lerna": "^3.22.1", - "metro-react-native-babel-preset": "^0.63.0", - "prettier": "^2.1.2", - "typescript": "^4.1.2" + "metro-react-native-babel-preset": "^0.64.0", + "prettier": "^2.2.1", + "typescript": "^4.1.3" }, "resolutions": { "react": "~16.13.1", diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json index 323b147f..c2164d31 100644 --- a/packages/bottom-tabs/package.json +++ b/packages/bottom-tabs/package.json @@ -40,27 +40,27 @@ "color": "^3.1.3" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@react-navigation/native": "^5.8.9", "@testing-library/react-native": "^7.1.0", "@types/color": "^3.0.1", "@types/react": "^16.9.53", - "@types/react-native": "^0.63.30", + "@types/react-native": "~0.62.0", "del-cli": "^3.0.1", "react": "~16.13.1", "react-native": "~0.63.2", - "react-native-safe-area-context": "3.1.4", - "react-native-screens": "~2.10.1", - "typescript": "^4.1.2" + "react-native-builder-bob": "^0.17.1", + "react-native-safe-area-context": "3.1.9", + "react-native-screens": "~2.15.0", + "typescript": "^4.1.3" }, "peerDependencies": { "@react-navigation/native": "^5.0.5", "react": "*", "react-native": "*", - "react-native-safe-area-context": ">= 0.6.0", - "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0" + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 2.15.0" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/bottom-tabs/src/views/ResourceSavingScene.tsx b/packages/bottom-tabs/src/views/ResourceSavingScene.tsx index 64cd1f21..f0de226d 100644 --- a/packages/bottom-tabs/src/views/ResourceSavingScene.tsx +++ b/packages/bottom-tabs/src/views/ResourceSavingScene.tsx @@ -23,15 +23,9 @@ export default class ResourceSavingScene extends React.Component { const { isVisible, ...rest } = this.props; if (shouldUseActivityState) { - return ( - // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required - - ); + return ; } else { - return ( - // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required - - ); + return ; } } diff --git a/packages/core/package.json b/packages/core/package.json index 65eb915f..519dd9ae 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -38,24 +38,24 @@ "dependencies": { "@react-navigation/routers": "^5.6.2", "escape-string-regexp": "^4.0.0", - "nanoid": "^3.1.15", - "query-string": "^6.13.6", + "nanoid": "^3.1.20", + "query-string": "^6.13.7", "react-is": "^16.13.0" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@testing-library/react-native": "^7.1.0", "@types/react": "^16.9.53", "@types/react-is": "^16.7.1", "del-cli": "^3.0.1", "react": "~16.13.1", + "react-native-builder-bob": "^0.17.1", "react-test-renderer": "~16.13.1", - "typescript": "^4.1.2" + "typescript": "^4.1.3" }, "peerDependencies": { "react": "*" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/core/src/BaseNavigationContainer.tsx b/packages/core/src/BaseNavigationContainer.tsx index 913bf935..7c90eedf 100644 --- a/packages/core/src/BaseNavigationContainer.tsx +++ b/packages/core/src/BaseNavigationContainer.tsx @@ -198,9 +198,9 @@ const BaseNavigationContainer = React.forwardRef( const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({}); React.useImperativeHandle(ref, () => ({ - ...(Object.keys(CommonActions) as (keyof typeof CommonActions)[]).reduce< - any - >((acc, name) => { + ...(Object.keys( + CommonActions + ) as (keyof typeof CommonActions)[]).reduce((acc, name) => { acc[name] = (...args: any[]) => dispatch( CommonActions[name]( diff --git a/packages/devtools/package.json b/packages/devtools/package.json index 865d5c08..e74c9dcb 100644 --- a/packages/devtools/package.json +++ b/packages/devtools/package.json @@ -38,21 +38,21 @@ }, "dependencies": { "@react-navigation/core": "^5.14.3", - "deep-equal": "^2.0.4" + "deep-equal": "^2.0.5" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@testing-library/react-native": "^7.1.0", "@types/deep-equal": "^1.0.1", "@types/react": "^16.9.53", "del-cli": "^3.0.1", "react": "~16.13.1", - "typescript": "^4.1.2" + "react-native-builder-bob": "^0.17.1", + "typescript": "^4.1.3" }, "peerDependencies": { "react": "*" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/drawer/package.json b/packages/drawer/package.json index 7c12fbc5..a1ff2c3d 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -45,19 +45,19 @@ "color": "^3.1.3" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@react-navigation/native": "^5.8.9", "@testing-library/react-native": "^7.1.0", "@types/react": "^16.9.53", - "@types/react-native": "^0.63.30", + "@types/react-native": "~0.62.0", "del-cli": "^3.0.1", "react": "~16.13.1", "react-native": "~0.63.2", - "react-native-gesture-handler": "~1.7.0", + "react-native-builder-bob": "^0.17.1", + "react-native-gesture-handler": "~1.8.0", "react-native-reanimated": "~1.13.0", - "react-native-safe-area-context": "3.1.4", - "react-native-screens": "~2.10.1", - "typescript": "^4.1.2" + "react-native-safe-area-context": "3.1.9", + "react-native-screens": "~2.15.0", + "typescript": "^4.1.3" }, "peerDependencies": { "@react-navigation/native": "^5.0.5", @@ -65,10 +65,10 @@ "react-native": "*", "react-native-gesture-handler": ">= 1.0.0", "react-native-reanimated": ">= 1.0.0", - "react-native-safe-area-context": ">= 0.6.0", - "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0" + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 2.15.0" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx index a7fbaf95..b2be44a9 100644 --- a/packages/drawer/src/views/DrawerItem.tsx +++ b/packages/drawer/src/views/DrawerItem.tsx @@ -153,12 +153,8 @@ export default function DrawerItem(props: Props) { delayPressIn={0} onPress={onPress} style={[styles.wrapper, { borderRadius }]} - accessibilityTraits={focused ? ['button', 'selected'] : 'button'} - accessibilityComponentType="button" accessibilityRole="button" accessibilityState={{ selected: focused }} - // @ts-expect-error: keep for compatibility with older React Native versions - accessibilityStates={focused ? ['selected'] : []} to={to} > diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx index b01be79a..870ae086 100644 --- a/packages/drawer/src/views/DrawerView.tsx +++ b/packages/drawer/src/views/DrawerView.tsx @@ -185,9 +185,7 @@ function DrawerViewBase({ {header({ layout: dimensions, route: descriptor.route, - navigation: descriptor.navigation as DrawerNavigationProp< - ParamListBase - >, + navigation: descriptor.navigation as DrawerNavigationProp, options: descriptor.options, })} diff --git a/packages/drawer/src/views/GestureHandler.tsx b/packages/drawer/src/views/GestureHandler.tsx index a3829752..a36046ce 100644 --- a/packages/drawer/src/views/GestureHandler.tsx +++ b/packages/drawer/src/views/GestureHandler.tsx @@ -9,13 +9,9 @@ const Dummy: any = ({ children }: { children: React.ReactNode }) => ( <>{children} ); -export const PanGestureHandler = Dummy as React.ComponentType< - PanGestureHandlerProperties ->; +export const PanGestureHandler = Dummy as React.ComponentType; -export const TapGestureHandler = Dummy as React.ComponentType< - TapGestureHandlerProperties ->; +export const TapGestureHandler = Dummy as React.ComponentType; export const GestureHandlerRootView = View; diff --git a/packages/drawer/src/views/Header.tsx b/packages/drawer/src/views/Header.tsx index e07c179d..3d4b33f1 100644 --- a/packages/drawer/src/views/Header.tsx +++ b/packages/drawer/src/views/Header.tsx @@ -70,9 +70,7 @@ export default function HeaderSegment({ navigation.dispatch(DrawerActions.toggleDrawer())} style={styles.touchable} diff --git a/packages/drawer/src/views/ResourceSavingScene.tsx b/packages/drawer/src/views/ResourceSavingScene.tsx index 9d4e2f6a..7c51645f 100644 --- a/packages/drawer/src/views/ResourceSavingScene.tsx +++ b/packages/drawer/src/views/ResourceSavingScene.tsx @@ -23,15 +23,9 @@ export default class ResourceSavingScene extends React.Component { const { isVisible, ...rest } = this.props; if (shouldUseActivityState) { - return ( - // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required - - ); + return ; } else { - return ( - // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required - - ); + return ; } } diff --git a/packages/drawer/src/views/TouchableItem.ios.tsx b/packages/drawer/src/views/TouchableItem.ios.tsx index 9823971f..ef6142f9 100644 --- a/packages/drawer/src/views/TouchableItem.ios.tsx +++ b/packages/drawer/src/views/TouchableItem.ios.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Animated, Platform } from 'react-native'; -import { BaseButton } from 'react-native-gesture-handler'; +import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler'; const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); -type Props = React.ComponentProps & { +type Props = BaseButtonProperties & { activeOpacity: number; }; @@ -38,6 +38,7 @@ export default class TouchableItem extends React.Component { const { children, style, enabled, ...rest } = this.props; return ( + // @ts-expect-error: error seems like false positive = 3.0.0", "react-native-vector-icons": ">= 6.0.0" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx index ff8d996a..45300f13 100644 --- a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx +++ b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyleSheet, Platform } from 'react-native'; +import { Text, StyleSheet, Platform } from 'react-native'; import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper'; import { NavigationHelpersContext, @@ -28,44 +28,51 @@ type Scene = { route: { key: string } }; // Optionally require vector-icons referenced from react-native-paper: // https://github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14 -let MaterialCommunityIcons: any; +let MaterialCommunityIcons: React.ComponentType< + React.ComponentProps< + typeof import('react-native-vector-icons/MaterialCommunityIcons').default + > +>; try { // Optionally require vector-icons MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons') .default; } catch (e) { - // @ts-expect-error - if (global.__expo?.Icon?.MaterialCommunityIcons) { - // Snack doesn't properly bundle vector icons from sub-path - // Use icons from the __expo global if available - // @ts-expect-error - MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons; - } else { - let isErrorLogged = false; + let isErrorLogged = false; - // Fallback component for icons - MaterialCommunityIcons = () => { - if (!isErrorLogged) { - if ( - !/(Cannot find module|Module not found|Cannot resolve module)/.test( - e.message - ) - ) { - console.error(e); - } - - console.warn( - `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons' could not be loaded.`, - `To remove this warning, try installing 'react-native-vector-icons' or use another method.` - ); - - isErrorLogged = true; + // Fallback component for icons + MaterialCommunityIcons = ({ + name, + color, + size, + selectionColor: _0, + onLayout: _1, + ...rest + }) => { + if (!isErrorLogged) { + if ( + !/(Cannot find module|Module not found|Cannot resolve module)/.test( + e.message + ) + ) { + console.error(e); } - return null; - }; - } + console.warn( + `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`, + `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://reactnavigation.org/docs/material-bottom-tab-navigator/#tabbaricon.` + ); + + isErrorLogged = true; + } + + return ( + + □ + + ); + }; } function MaterialBottomTabViewInner({ diff --git a/packages/material-top-tabs/package.json b/packages/material-top-tabs/package.json index 73b40569..8209a3cf 100644 --- a/packages/material-top-tabs/package.json +++ b/packages/material-top-tabs/package.json @@ -45,18 +45,18 @@ "color": "^3.1.3" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@react-navigation/native": "^5.8.9", "@testing-library/react-native": "^7.1.0", "@types/react": "^16.9.53", - "@types/react-native": "^0.63.30", + "@types/react-native": "~0.62.0", "del-cli": "^3.0.1", "react": "~16.13.1", "react-native": "~0.63.2", - "react-native-gesture-handler": "~1.7.0", + "react-native-builder-bob": "^0.17.1", + "react-native-gesture-handler": "~1.8.0", "react-native-reanimated": "~1.13.0", "react-native-tab-view": "^2.15.2", - "typescript": "^4.1.2" + "typescript": "^4.1.3" }, "peerDependencies": { "@react-navigation/native": "^5.0.5", @@ -66,7 +66,7 @@ "react-native-reanimated": ">= 1.0.0", "react-native-tab-view": ">= 2.0.0" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/native/package.json b/packages/native/package.json index cd7928d6..a79baa71 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -40,25 +40,25 @@ "dependencies": { "@react-navigation/core": "^5.14.3", "escape-string-regexp": "^4.0.0", - "nanoid": "^3.1.15" + "nanoid": "^3.1.20" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@testing-library/react-native": "^7.1.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", - "@types/react-native": "^0.63.30", + "@types/react-native": "~0.62.0", "del-cli": "^3.0.1", "react": "~16.13.1", "react-dom": "^16.13.1", "react-native": "~0.63.2", - "typescript": "^4.1.2" + "react-native-builder-bob": "^0.17.1", + "typescript": "^4.1.3" }, "peerDependencies": { "react": "*", "react-native": "*" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/routers/package.json b/packages/routers/package.json index 50bf4dce..fdacdaa3 100644 --- a/packages/routers/package.json +++ b/packages/routers/package.json @@ -37,14 +37,14 @@ "clean": "del lib" }, "dependencies": { - "nanoid": "^3.1.15" + "nanoid": "^3.1.20" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "del-cli": "^3.0.1", - "typescript": "^4.1.2" + "react-native-builder-bob": "^0.17.1", + "typescript": "^4.1.3" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/stack/package.json b/packages/stack/package.json index 437fa01e..faab42f6 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -45,30 +45,30 @@ "react-native-iphone-x-helper": "^1.3.0" }, "devDependencies": { - "@react-native-community/bob": "^0.16.2", "@react-native-masked-view/masked-view": "^0.2.0", "@react-navigation/native": "^5.8.9", "@testing-library/react-native": "^7.1.0", "@types/color": "^3.0.1", "@types/react": "^16.9.53", - "@types/react-native": "^0.63.30", + "@types/react-native": "~0.62.0", "del-cli": "^3.0.1", "react": "~16.13.1", "react-native": "~0.63.2", - "react-native-gesture-handler": "~1.7.0", - "react-native-safe-area-context": "3.1.4", - "react-native-screens": "~2.10.1", - "typescript": "^4.1.2" + "react-native-builder-bob": "^0.17.1", + "react-native-gesture-handler": "~1.8.0", + "react-native-safe-area-context": "3.1.9", + "react-native-screens": "~2.15.0", + "typescript": "^4.1.3" }, "peerDependencies": { "@react-navigation/native": "^5.0.5", "react": "*", "react-native": "*", "react-native-gesture-handler": ">= 1.0.0", - "react-native-safe-area-context": ">= 0.6.0", - "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0" + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 2.15.0" }, - "@react-native-community/bob": { + "react-native-builder-bob": { "source": "src", "output": "lib", "targets": [ diff --git a/packages/stack/src/views/BorderlessButton.tsx b/packages/stack/src/views/BorderlessButton.tsx index e269dfb3..c64be4fc 100644 --- a/packages/stack/src/views/BorderlessButton.tsx +++ b/packages/stack/src/views/BorderlessButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Animated, Platform } from 'react-native'; -import { BaseButton } from 'react-native-gesture-handler'; +import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler'; const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); -type Props = React.ComponentProps & { +type Props = BaseButtonProperties & { activeOpacity: number; }; @@ -39,6 +39,7 @@ export default class BorderlessButton extends React.Component { const { children, style, enabled, ...rest } = this.props; return ( + // @ts-expect-error: error seems like false positive ( <>{children} ); -export const PanGestureHandler = Dummy as React.ComponentType< - PanGestureHandlerProperties ->; +export const PanGestureHandler = Dummy as React.ComponentType; export const GestureHandlerRootView = View; diff --git a/packages/stack/src/views/Header/HeaderBackButton.tsx b/packages/stack/src/views/Header/HeaderBackButton.tsx index 877c7931..ef0e3a85 100644 --- a/packages/stack/src/views/Header/HeaderBackButton.tsx +++ b/packages/stack/src/views/Header/HeaderBackButton.tsx @@ -154,9 +154,7 @@ export default function HeaderBackButton({ disabled={disabled} accessible accessibilityRole="button" - accessibilityComponentType="button" accessibilityLabel={accessibilityLabel} - accessibilityTraits="button" testID="header-back" delayPressIn={0} onPress={disabled ? undefined : handlePress} diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx index d174f187..b2b7e07b 100644 --- a/packages/stack/src/views/Header/HeaderContainer.tsx +++ b/packages/stack/src/views/Header/HeaderContainer.tsx @@ -38,7 +38,7 @@ export type Props = { }) => void; styleInterpolator: StackHeaderStyleInterpolator; gestureDirection: GestureDirection; - style?: StyleProp; + style?: Animated.WithAnimatedValue>; }; export default function HeaderContainer({ @@ -106,9 +106,8 @@ export default function HeaderContainer({ progress: scene.progress, options: scene.descriptor.options, route: scene.descriptor.route, - navigation: scene.descriptor.navigation as StackNavigationProp< - ParamListBase - >, + navigation: scene.descriptor + .navigation as StackNavigationProp, styleInterpolator: mode === 'float' ? isHeaderStatic diff --git a/packages/stack/src/views/Header/HeaderTitle.tsx b/packages/stack/src/views/Header/HeaderTitle.tsx index abaa66d2..13a6b0c6 100644 --- a/packages/stack/src/views/Header/HeaderTitle.tsx +++ b/packages/stack/src/views/Header/HeaderTitle.tsx @@ -19,6 +19,7 @@ export default function HeaderTitle({ tintColor, style, ...rest }: Props) { const { colors } = useTheme(); return ( + // @ts-expect-error: animated components seem to have incorrect type { this.clearKeyboardTimeout(); // @ts-expect-error: blurTextInput accepts both number and ref, but types say only ref - const input: InputRef = TextInput.State.currentlyFocusedInput - ? TextInput.State.currentlyFocusedInput() - : TextInput.State.currentlyFocusedField(); + const input: InputRef = TextInput.State.currentlyFocusedField(); // When a page change begins, blur the currently focused input - TextInput.State.blurTextInput(input); + input?.blur(); // Store the id of this input so we can refocus it if change was cancelled this.previouslyFocusedTextInput = input; @@ -67,11 +65,9 @@ export default class KeyboardManager extends React.Component { } else { const input = this.previouslyFocusedTextInput; - if (input) { - // Dismiss the keyboard only if an input was a focused before - // This makes sure we don't dismiss input on going back and focusing an input - TextInput.State.blurTextInput(input); - } + // Dismiss the keyboard only if an input was a focused before + // This makes sure we don't dismiss input on going back and focusing an input + input?.blur(); } // Cleanup the ID on successful page change @@ -98,11 +94,11 @@ export default class KeyboardManager extends React.Component { // Subtracting timestamps makes us sure the delay is executed only when needed. if (Date.now() - this.startTimestamp < 100) { this.keyboardTimeout = setTimeout(() => { - TextInput.State.focusTextInput(input); + input?.focus(); this.previouslyFocusedTextInput = undefined; }, 100); } else { - TextInput.State.focusTextInput(input); + input?.focus(); this.previouslyFocusedTextInput = undefined; } } diff --git a/packages/stack/src/views/Screens.tsx b/packages/stack/src/views/Screens.tsx index dc251340..ebcc1f4d 100644 --- a/packages/stack/src/views/Screens.tsx +++ b/packages/stack/src/views/Screens.tsx @@ -9,32 +9,6 @@ try { // Ignore } -// The web implementation in react-native-screens seems buggy. -// The view doesn't become visible after coming back in some cases. -// So we use our custom implementation. -class WebScreen extends React.Component< - ViewProps & { - active: number; - children: React.ReactNode; - } -> { - render() { - const { active, style, ...rest } = this.props; - - return ( -