From 53dd1dc65cfa729c76eff8980fb064bdb69dac0a Mon Sep 17 00:00:00 2001 From: Kacper Kafara Date: Wed, 11 Jan 2023 14:50:33 +0100 Subject: [PATCH] chore: support for React Native 0.71.0 (#1631) ## Description It seems that autolinking got complete overhaul in 0.71.0 as `android/app/src/main/jni` directory was deleted -> thus it works differently for sure now. Still need to dive into it. **FabricTestExample** * [x] Android * [x] iOS **TestsExample** * https://github.com/software-mansion/react-native-screens/pull/1679 **FabricExample** * https://github.com/software-mansion/react-native-screens/pull/1680 **TODO**: Consider whether to use `com.facebook.react:react-native:+` or `com.facebook.react:react-native` (without `+`) in `android/build.gradle` of the library. AFAIK the former takes highest available version from defined repositories (should be `node_modules`?), the latter uses version injected by React Native Gradle Plugin (but I believe it works since React Native 0.71.0 or 0.70.0 (need to check) -- so version check might be necessary). Decided to leave: ```gradle implementation 'com.facebook.react:react-native:+' ``` in library's `android/build.gradle` due to following reasons: * [Android's readme in RN repo](https://github.com/facebook/react-native/blob/e108e9ebf1e6c52b6eeffeb6c41f842ad95baa0d/android/README.md) * [Road to 0.71.0 post](https://github.com/reactwg/react-native-releases/discussions/41#discussioncomment-4194847) Blocked by: * ~https://github.com/facebook/react-native/pull/35306~ * ~https://github.com/software-mansion/react-native-reanimated/pull/3745~ * ~https://github.com/software-mansion/react-native-gesture-handler/pull/2313~ (decided to fix version on commit) * ~`react-native-safe-area-context` - lacks support for RN71~ (created patch) * ~`@react-native-community/cli-platform-android` requires this patch: https://github.com/kkafar/RNS-tester/pull/2/commits/9edaaa952878fc320ab5f8f199d2b6f5771fcbcd. The patch is already merged, but it is not shipped with `react-native` yet.~ **NOTE**: Example application will handled in separate PR, as there are problems with detox (it does not support 0.71 yet) and we run CI on that app. ## Changes * Updated examples * Updated library's build code ## Test code and steps to reproduce Run example applications ## Checklist - [ ] Ensured that CI passes --- .github/workflows/ios-e2e-test.yml | 2 +- Example/App.tsx | 3 +- Example/src/screens/Animations.tsx | 17 +- Example/src/screens/BottomTabsAndStack.tsx | 3 +- Example/src/screens/Events.tsx | 14 +- Example/src/screens/Gestures.tsx | 6 +- Example/src/screens/HeaderOptions.tsx | 6 +- Example/src/screens/Modals.tsx | 3 +- Example/src/screens/Orientation.tsx | 8 +- Example/src/screens/SearchBar.tsx | 24 +- Example/src/screens/SimpleNativeStack.tsx | 3 +- Example/src/screens/StackPresentation.tsx | 9 +- Example/src/screens/StackReactNavigation4.tsx | 3 +- Example/src/screens/StatusBar.tsx | 8 +- Example/src/shared/Choose.tsx | 6 +- Example/src/shared/Dialog.tsx | 3 +- Example/src/shared/SettingsPicker.tsx | 6 +- Example/src/shared/Toast.tsx | 3 +- FabricExample/.buckconfig | 6 - FabricExample/.flowconfig | 65 - FabricExample/.gitignore | 3 + FabricExample/.ruby-version | 1 + FabricExample/Gemfile | 4 +- FabricExample/_ruby-version | 1 - FabricExample/android/app/_BUCK | 55 - FabricExample/android/app/build.gradle | 274 +- FabricExample/android/app/build_defs.bzl | 19 - .../com/fabricexample/ReactNativeFlipper.java | 5 +- .../android/app/src/main/AndroidManifest.xml | 3 +- .../java/com/fabricexample/MainActivity.java | 39 +- .../com/fabricexample/MainApplication.java | 65 +- .../MainApplicationReactNativeHost.java | 118 - .../components/MainComponentsRegistry.java | 36 - ...ApplicationTurboModuleManagerDelegate.java | 48 - .../android/app/src/main/jni/CMakeLists.txt | 5 - .../jni/MainApplicationModuleProvider.cpp | 32 - .../main/jni/MainApplicationModuleProvider.h | 16 - ...nApplicationTurboModuleManagerDelegate.cpp | 45 - ...ainApplicationTurboModuleManagerDelegate.h | 38 - .../src/main/jni/MainComponentsRegistry.cpp | 65 - .../app/src/main/jni/MainComponentsRegistry.h | 32 - .../android/app/src/main/jni/OnLoad.cpp | 11 - .../com/fabricexample/ReactNativeFlipper.java | 18 + FabricExample/android/build.gradle | 31 +- FabricExample/android/gradle.properties | 4 + FabricExample/android/settings.gradle | 13 +- FabricExample/ios/FabricExample/AppDelegate.h | 6 +- .../ios/FabricExample/AppDelegate.mm | 117 +- FabricExample/ios/Podfile | 15 +- FabricExample/ios/Podfile.lock | 1165 +-- FabricExample/package.json | 28 +- ...react-native-safe-area-context+4.4.1.patch | 21 + FabricExample/tsconfig.json | 3 + FabricExample/yarn.lock | 3968 ++++---- FabricTestExample/.buckconfig | 6 - FabricTestExample/.eslintrc.js | 2 + FabricTestExample/.flowconfig | 67 - FabricTestExample/.gitignore | 3 + FabricTestExample/.ruby-version | 1 + FabricTestExample/Gemfile | 4 +- FabricTestExample/_ruby-version | 1 - FabricTestExample/android/app/_BUCK | 55 - FabricTestExample/android/app/build.gradle | 271 +- FabricTestExample/android/app/build_defs.bzl | 19 - .../fabrictestexample/ReactNativeFlipper.java | 6 +- .../android/app/src/main/AndroidManifest.xml | 3 +- .../com/fabrictestexample/MainActivity.java | 39 +- .../fabrictestexample/MainApplication.java | 65 +- .../MainApplicationReactNativeHost.java | 117 - .../components/MainComponentsRegistry.java | 36 - ...ApplicationTurboModuleManagerDelegate.java | 48 - .../android/app/src/main/jni/CMakeLists.txt | 5 - .../jni/MainApplicationModuleProvider.cpp | 32 - .../main/jni/MainApplicationModuleProvider.h | 16 - ...nApplicationTurboModuleManagerDelegate.cpp | 45 - ...ainApplicationTurboModuleManagerDelegate.h | 38 - .../src/main/jni/MainComponentsRegistry.cpp | 65 - .../app/src/main/jni/MainComponentsRegistry.h | 32 - .../android/app/src/main/jni/OnLoad.cpp | 11 - .../fabrictestexample/ReactNativeFlipper.java | 18 + FabricTestExample/android/build.gradle | 38 +- FabricTestExample/android/gradle.properties | 6 +- FabricTestExample/android/settings.gradle | 7 - .../project.pbxproj | 10 +- .../ios/FabricTestExample/AppDelegate.h | 6 +- .../ios/FabricTestExample/AppDelegate.mm | 117 +- .../ios/FabricTestExample/Info.plist | 4 +- .../ios/FabricTestExample/{main.m => main.mm} | 0 FabricTestExample/ios/Podfile | 16 +- FabricTestExample/ios/Podfile.lock | 1157 +-- FabricTestExample/package.json | 28 +- ...react-native-safe-area-context+4.4.1.patch | 21 + FabricTestExample/tsconfig.json | 3 + FabricTestExample/yarn.lock | 4531 +++++----- TestsExample/.buckconfig | 6 - TestsExample/.flowconfig | 67 - TestsExample/.gitignore | 3 + TestsExample/.ruby-version | 1 + TestsExample/Gemfile | 4 +- TestsExample/_ruby-version | 1 - TestsExample/android/app/_BUCK | 55 - TestsExample/android/app/build.gradle | 270 +- TestsExample/android/app/build_defs.bzl | 19 - .../com/testsexample/ReactNativeFlipper.java | 6 +- .../android/app/src/main/AndroidManifest.xml | 3 +- .../java/com/testsexample/MainActivity.java | 50 +- .../com/testsexample/MainApplication.java | 105 +- .../MainApplicationReactNativeHost.java | 117 - .../components/MainComponentsRegistry.java | 36 - ...ApplicationTurboModuleManagerDelegate.java | 48 - .../android/app/src/main/jni/CMakeLists.txt | 5 - .../jni/MainApplicationModuleProvider.cpp | 32 - .../main/jni/MainApplicationModuleProvider.h | 16 - ...nApplicationTurboModuleManagerDelegate.cpp | 45 - ...ainApplicationTurboModuleManagerDelegate.h | 38 - .../src/main/jni/MainComponentsRegistry.cpp | 65 - .../app/src/main/jni/MainComponentsRegistry.h | 32 - .../android/app/src/main/jni/OnLoad.cpp | 11 - .../com/testsexample/ReactNativeFlipper.java | 18 + TestsExample/android/build.gradle | 36 +- TestsExample/android/gradle.properties | 8 +- TestsExample/android/settings.gradle | 7 - TestsExample/ios/Podfile | 21 +- TestsExample/ios/Podfile.lock | 504 +- TestsExample/ios/TestsExample/AppDelegate.h | 6 +- TestsExample/ios/TestsExample/AppDelegate.mm | 116 +- TestsExample/package.json | 31 +- TestsExample/yarn.lock | 4739 +++++----- android/build.gradle | 6 +- src/createNativeStackNavigator.tsx | 6 +- src/index.native.tsx | 26 +- src/index.tsx | 15 +- src/native-stack/types.tsx | 9 +- src/native-stack/views/HeaderConfig.tsx | 18 +- src/native-stack/views/NativeStackView.tsx | 12 +- .../ReanimatedNativeStackScreen.tsx | 8 +- src/reanimated/ReanimatedScreen.tsx | 2 +- yarn.lock | 7946 +++++++---------- 138 files changed, 12096 insertions(+), 15924 deletions(-) delete mode 100644 FabricExample/.buckconfig delete mode 100644 FabricExample/.flowconfig create mode 100644 FabricExample/.ruby-version delete mode 100644 FabricExample/_ruby-version delete mode 100644 FabricExample/android/app/_BUCK delete mode 100644 FabricExample/android/app/build_defs.bzl delete mode 100644 FabricExample/android/app/src/main/java/com/fabricexample/newarchitecture/MainApplicationReactNativeHost.java delete mode 100644 FabricExample/android/app/src/main/java/com/fabricexample/newarchitecture/components/MainComponentsRegistry.java delete mode 100644 FabricExample/android/app/src/main/java/com/fabricexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java delete mode 100644 FabricExample/android/app/src/main/jni/CMakeLists.txt delete mode 100644 FabricExample/android/app/src/main/jni/MainApplicationModuleProvider.cpp delete mode 100644 FabricExample/android/app/src/main/jni/MainApplicationModuleProvider.h delete mode 100644 FabricExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp delete mode 100644 FabricExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h delete mode 100644 FabricExample/android/app/src/main/jni/MainComponentsRegistry.cpp delete mode 100644 FabricExample/android/app/src/main/jni/MainComponentsRegistry.h delete mode 100644 FabricExample/android/app/src/main/jni/OnLoad.cpp create mode 100644 FabricExample/android/app/src/release/java/com/fabricexample/ReactNativeFlipper.java create mode 100644 FabricExample/patches/react-native-safe-area-context+4.4.1.patch create mode 100644 FabricExample/tsconfig.json delete mode 100644 FabricTestExample/.buckconfig delete mode 100644 FabricTestExample/.flowconfig create mode 100644 FabricTestExample/.ruby-version delete mode 100644 FabricTestExample/_ruby-version delete mode 100644 FabricTestExample/android/app/_BUCK delete mode 100644 FabricTestExample/android/app/build_defs.bzl delete mode 100644 FabricTestExample/android/app/src/main/java/com/fabrictestexample/newarchitecture/MainApplicationReactNativeHost.java delete mode 100644 FabricTestExample/android/app/src/main/java/com/fabrictestexample/newarchitecture/components/MainComponentsRegistry.java delete mode 100644 FabricTestExample/android/app/src/main/java/com/fabrictestexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java delete mode 100644 FabricTestExample/android/app/src/main/jni/CMakeLists.txt delete mode 100644 FabricTestExample/android/app/src/main/jni/MainApplicationModuleProvider.cpp delete mode 100644 FabricTestExample/android/app/src/main/jni/MainApplicationModuleProvider.h delete mode 100644 FabricTestExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp delete mode 100644 FabricTestExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h delete mode 100644 FabricTestExample/android/app/src/main/jni/MainComponentsRegistry.cpp delete mode 100644 FabricTestExample/android/app/src/main/jni/MainComponentsRegistry.h delete mode 100644 FabricTestExample/android/app/src/main/jni/OnLoad.cpp create mode 100644 FabricTestExample/android/app/src/release/java/com/fabrictestexample/ReactNativeFlipper.java rename FabricTestExample/ios/FabricTestExample/{main.m => main.mm} (100%) create mode 100644 FabricTestExample/patches/react-native-safe-area-context+4.4.1.patch create mode 100644 FabricTestExample/tsconfig.json delete mode 100644 TestsExample/.buckconfig delete mode 100644 TestsExample/.flowconfig create mode 100644 TestsExample/.ruby-version delete mode 100644 TestsExample/_ruby-version delete mode 100644 TestsExample/android/app/_BUCK delete mode 100644 TestsExample/android/app/build_defs.bzl delete mode 100644 TestsExample/android/app/src/main/java/com/testsexample/newarchitecture/MainApplicationReactNativeHost.java delete mode 100644 TestsExample/android/app/src/main/java/com/testsexample/newarchitecture/components/MainComponentsRegistry.java delete mode 100644 TestsExample/android/app/src/main/java/com/testsexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java delete mode 100644 TestsExample/android/app/src/main/jni/CMakeLists.txt delete mode 100644 TestsExample/android/app/src/main/jni/MainApplicationModuleProvider.cpp delete mode 100644 TestsExample/android/app/src/main/jni/MainApplicationModuleProvider.h delete mode 100644 TestsExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp delete mode 100644 TestsExample/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h delete mode 100644 TestsExample/android/app/src/main/jni/MainComponentsRegistry.cpp delete mode 100644 TestsExample/android/app/src/main/jni/MainComponentsRegistry.h delete mode 100644 TestsExample/android/app/src/main/jni/OnLoad.cpp create mode 100644 TestsExample/android/app/src/release/java/com/testsexample/ReactNativeFlipper.java diff --git a/.github/workflows/ios-e2e-test.yml b/.github/workflows/ios-e2e-test.yml index 7b4030c..add4459 100644 --- a/.github/workflows/ios-e2e-test.yml +++ b/.github/workflows/ios-e2e-test.yml @@ -15,7 +15,7 @@ on: workflow_dispatch: jobs: test: - runs-on: macos-latest + runs-on: macos-12 timeout-minutes: 40 env: WORKING_DIRECTORY: Example diff --git a/Example/App.tsx b/Example/App.tsx index 0282b2a..99319c8 100644 --- a/Example/App.tsx +++ b/Example/App.tsx @@ -161,7 +161,8 @@ const ExampleApp = (): JSX.Element => ( + }} + > (); const App = (): JSX.Element => { - const [stackAnimation, setStackAnimation] = useState( - 'default' - ); + const [stackAnimation, setStackAnimation] = + useState('default'); return ( + }} + > {({ navigation }) => ( { name="Push" options={{ replaceAnimation: 'push', - }}> + }} + > {({ navigation }) => ( { name="Pop" options={{ replaceAnimation: 'pop', - }}> + }} + > {({ navigation }) => ( { name="Modal" options={{ stackPresentation: 'modal', - }}> + }} + > {({ navigation }) => ( { headerRight: () => ( {letter} ), - }}> + }} + > ); diff --git a/Example/src/screens/Events.tsx b/Example/src/screens/Events.tsx index 7034633..72ee706 100644 --- a/Example/src/screens/Events.tsx +++ b/Example/src/screens/Events.tsx @@ -149,7 +149,8 @@ const ChatsScreen = ({ nativeBackButtonDismissalEnabled: true, headerTopInsetEnabled: false, headerHideBackButton: true, - }}> + }} + > @@ -250,9 +251,8 @@ const Stack = createNativeStackNavigator(); const NestedStack = createNativeStackNavigator(); const App = (): JSX.Element => { - const [stackAnimation, setStackAnimation] = useState( - 'default' - ); + const [stackAnimation, setStackAnimation] = + useState('default'); return ( @@ -260,10 +260,12 @@ const App = (): JSX.Element => { screenOptions={{ direction: I18nManager.isRTL ? 'rtl' : 'ltr', nativeBackButtonDismissalEnabled: true, - }}> + }} + > + options={{ title: 'Events', headerHideBackButton: true }} + > {({ navigation }) => ( { left: startValue, width: endValue - startValue, height: bottomValue - topValue, - }}> + }} + > Swipe here! This view presents where you can currently swipe while using the @@ -171,7 +172,8 @@ const App = (): JSX.Element => ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > { return ( + style={styles.container} + > ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > { - const [screenOrientation, setScreenOrientation] = useState( - 'default' - ); + const [screenOrientation, setScreenOrientation] = + useState('default'); useLayoutEffect(() => { navigation.setOptions({ @@ -79,7 +78,8 @@ const App = (): JSX.Element => ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > { const [placeholder, setPlaceholder] = useState('Search for something...'); const [barTintColor, setBarTintColor] = useState('white'); const [hintTextColor, setHintTextColor] = useState('orange'); - const [headerIconColor, setHeaderIconColor] = useState( - 'orange' - ); - const [shouldShowHintSearchIcon, setShouldShowHintSearchIcon] = useState( - true - ); + const [headerIconColor, setHeaderIconColor] = + useState('orange'); + const [shouldShowHintSearchIcon, setShouldShowHintSearchIcon] = + useState(true); const [hideWhenScrolling, setHideWhenScrolling] = useState(false); const [obscureBackground, setObscureBackground] = useState(false); const [hideNavigationBar, setHideNavigationBar] = useState(false); - const [autoCapitalize, setAutoCapitalize] = useState( - 'sentences' - ); + const [autoCapitalize, setAutoCapitalize] = + useState('sentences'); const [inputType, setInputType] = useState('text'); useLayoutEffect(() => { @@ -115,7 +112,8 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => { + keyboardDismissMode="on-drag" + > { return ( + keyboardDismissMode="on-drag" + > {places .filter( (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1 @@ -247,7 +246,8 @@ const App = (): JSX.Element => ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > ( screenOptions={{ headerHideBackButton: true, direction: I18nManager.isRTL ? 'rtl' : 'ltr', - }}> + }} + > { return ( + testID="stack-presentation-root-scroll-view" + >