diff --git a/.eslintrc.js b/.eslintrc.js index d5770403..3e610bd5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - extends: '@react-native-community', + extends: '@react-native', globals: { expect: true, element: true, diff --git a/.github/workflows/android.yml b/.github/workflows/android.yml index d442f104..b7127b9f 100644 --- a/.github/workflows/android.yml +++ b/.github/workflows/android.yml @@ -55,21 +55,62 @@ jobs: ~/.gradle/wrapper key: gradle-${{ runner.os }}-${{ hashFiles('**/*.gradle*') }}-${{ hashFiles('**/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('**/buildSrc/**/*.kt') }} + - name: AVD cache + uses: actions/cache@v3 + id: avd-cache + with: + path: | + ~/.android/avd/* + ~/.android/adb* + key: avd-cache + - name: Install Maestro CLI - run: export MAESTRO_VERSION=1.21.3; curl -Ls "https://get.maestro.mobile.dev" | bash + run: export MAESTRO_VERSION=1.31.0; curl -Ls "https://get.maestro.mobile.dev" | bash - name: Add Maestro to path run: echo "${HOME}/.maestro/bin" >> $GITHUB_PATH + - name: create AVD and generate snapshot for caching + if: steps.avd-cache.outputs.cache-hit != 'true' + uses: reactivecircus/android-emulator-runner@v2 + with: + api-level: 29 + force-avd-creation: false + emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none + disable-animations: false + cores: 2 + ram-size: 4096M + profile: Nexus 6 + script: echo "Generated AVD snapshot for caching." + - name: Run Android Emulator and app uses: reactivecircus/android-emulator-runner@v2 with: api-level: 29 - arch: x86_64 - target: google_apis force-avd-creation: false emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none - disable-animations: true + disable-animations: false + cores: 2 + ram-size: 4096M + profile: Nexus 6 script: | yarn run-example-android yarn test:e2e:android + + - name: Upload report + if: always() + uses: actions/upload-artifact@v3 + with: + name: E2E Report + path: | + ${{ github.workspace }}/*.mp4 + ${{ github.workspace }}/*.png + ${{ github.workspace }}/report*.xml + ~/.maestro/tests/**/* + + - name: Store tests result + uses: actions/upload-artifact@v3 + with: + name: e2e_android_report + path: | + report.xml diff --git a/.gitignore b/.gitignore index 138a6fac..644a9566 100644 --- a/.gitignore +++ b/.gitignore @@ -64,13 +64,15 @@ test-butler-app.apk example/vendor #Example -fabricexample/ios/Pods -fabricexample/vendor -fabricexample/android/app/.cxx +example/ios/Pods +example/vendor .lefthookrc lefthook.yml # Temporary files created by Metro to check the health of the file watcher .metro-health-check* + +# testing +/coverage .cxx diff --git a/README.md b/README.md index 014b449a..2719bd0a 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ This component allows the user to swipe left and right through pages of data. Un ## Versions | 4.x | 5.x and above | -| ---------- | ----------- | +| ---------- | ------------- | | iOS | iOS support | | ViewPager1 | ViewPager2 | @@ -34,29 +34,6 @@ In version **6.x** support for `transitionStyle` property has been dropped. More `yarn add react-native-pager-view` -## New architecture setup (Fabric) - -This library supports new architecture! We have two example folders one for each architecture. If you are using this library in your own project there some extra steps needed. -### iOS -Install pods with this flag inside `ios` folder: -```sh -RCT_NEW_ARCH_ENABLED=1 bundle exec pod install -``` -(Inside of `fabricexample` the `RCT_NEW_ARCH_ENABLED` is already set to true by default inside `Podfile`) - -### Android -Set `newArchEnabled` to `true` inside `android/gradle.properties` (this flag is already set to true in `fabricexample`) and then run: -```sh -yarn android -``` - -If you have issues with running android build you can try to generate codegen before the build using this command: - -```sh -cd android && ./gradlew generateCodegenArtifactsFromSchema -``` - - ## Linking ### >= 0.60 @@ -172,8 +149,8 @@ For advanced usage please take a look into our [example project](https://github. | `orientation: Orientation` | Set `horizontal` or `vertical` scrolling orientation (it does **not** work dynamically) | both | | `overScrollMode: OverScollMode` | Used to override default value of overScroll mode. Can be `auto`, `always` or `never`. Defaults to `auto` | Android | | `offscreenPageLimit: number` | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | Android | -| `overdrag: boolean` | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to `false` | iOS | -| `layoutDirection: ('ltr' / 'rtl' / 'locale')` | Specifies layout direction. Use `ltr` or `rtl` to set explicitly or `locale` to deduce from the default language script of a locale. Defaults to `locale` | both | +| `overdrag: boolean` | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to `false` | iOS | +| `layoutDirection: ('ltr' / 'rtl' / 'locale')` | Specifies layout direction. Use `ltr` or `rtl` to set explicitly or `locale` to deduce from the default language script of a locale. Defaults to `locale` | both | | Method | Description | Platform | | ------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: | @@ -205,7 +182,7 @@ requestAnimationFrame(() => refPagerView.current?.setPage(index)); ### iOS -| horizontal | vertical | +| horizontal | vertical | | :------------------------------------------------------------------: | :--------------------------------------------------------------------: | | ViewPager | ViewPager | @@ -220,37 +197,38 @@ To attach reanimated handler with `onPageScroll` follow the below steps. ```jsx // 1. Define the handler function usePageScrollHandler(handlers, dependencies) { - const {context, doDependenciesDiffer} = useHandler(handlers, dependencies); + const { context, doDependenciesDiffer } = useHandler(handlers, dependencies); const subscribeForEvents = ['onPageScroll']; return useEvent( - event => { + (event) => { 'worklet'; - const {onPageScroll} = handlers; + const { onPageScroll } = handlers; if (onPageScroll && event.eventName.endsWith('onPageScroll')) { onPageScroll(event, context); } }, subscribeForEvents, - doDependenciesDiffer, + doDependenciesDiffer ); } - + // 2. Attach the event handler -import PagerView from "react-native-pager-view"; -import Animated from "react-native-reanimated"; +import PagerView from 'react-native-pager-view'; +import Animated from 'react-native-reanimated'; const AnimatedPagerView = Animated.createAnimatedComponent(PagerView); const pageScrollHandler = usePageScrollHandler({ - onPageScroll: e => { - 'worklet'; - offset.value = e.offset; - console.log(e.offset, e.position); - }, + onPageScroll: (e) => { + 'worklet'; + offset.value = e.offset; + console.log(e.offset, e.position); + }, }); - +; ``` + ## License MIT diff --git a/example/.node-version b/example/.node-version deleted file mode 100644 index 3c032078..00000000 --- a/example/.node-version +++ /dev/null @@ -1 +0,0 @@ -18 diff --git a/example/Gemfile b/example/Gemfile index feee0df0..51df2487 100644 --- a/example/Gemfile +++ b/example/Gemfile @@ -1,5 +1,5 @@ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version -ruby '>= 2.6.10' -gem 'cocoapods', '>= 1.11.3' +ruby ">= 2.6.10" +gem 'cocoapods', '~> 1.12' diff --git a/example/Gemfile.lock b/example/Gemfile.lock index 013bc0fb..fd4c5d4c 100644 --- a/example/Gemfile.lock +++ b/example/Gemfile.lock @@ -1,30 +1,29 @@ GEM remote: https://rubygems.org/ specs: - CFPropertyList (3.0.5) + CFPropertyList (3.0.6) rexml - activesupport (6.1.7.6) + activesupport (7.0.7.2) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (>= 1.6, < 2) minitest (>= 5.1) tzinfo (~> 2.0) - zeitwerk (~> 2.3) - addressable (2.8.1) + addressable (2.8.5) public_suffix (>= 2.0.2, < 6.0) algoliasearch (1.27.5) httpclient (~> 2.8, >= 2.8.3) json (>= 1.5.1) atomos (0.1.3) claide (1.1.0) - cocoapods (1.11.3) + cocoapods (1.12.1) addressable (~> 2.8) claide (>= 1.0.2, < 2.0) - cocoapods-core (= 1.11.3) + cocoapods-core (= 1.12.1) cocoapods-deintegrate (>= 1.0.3, < 2.0) - cocoapods-downloader (>= 1.4.0, < 2.0) + cocoapods-downloader (>= 1.6.0, < 2.0) cocoapods-plugins (>= 1.0.0, < 2.0) cocoapods-search (>= 1.0.0, < 2.0) - cocoapods-trunk (>= 1.4.0, < 2.0) + cocoapods-trunk (>= 1.6.0, < 2.0) cocoapods-try (>= 1.1.0, < 2.0) colored2 (~> 3.1) escape (~> 0.0.4) @@ -32,10 +31,10 @@ GEM gh_inspector (~> 1.0) molinillo (~> 0.8.0) nap (~> 1.0) - ruby-macho (>= 1.0, < 3.0) + ruby-macho (>= 2.3.0, < 3.0) xcodeproj (>= 1.21.0, < 2.0) - cocoapods-core (1.11.3) - activesupport (>= 5.0, < 7) + cocoapods-core (1.12.1) + activesupport (>= 5.0, < 8) addressable (~> 2.8) algoliasearch (~> 1.0) concurrent-ruby (~> 1.1) @@ -56,7 +55,7 @@ GEM colored2 (3.1.2) concurrent-ruby (1.2.2) escape (0.0.4) - ethon (0.15.0) + ethon (0.16.0) ffi (>= 1.15.0) ffi (1.15.5) fourflusher (2.3.1) @@ -65,14 +64,14 @@ GEM httpclient (2.8.3) i18n (1.14.1) concurrent-ruby (~> 1.0) - json (2.6.2) + json (2.6.3) minitest (5.19.0) molinillo (0.8.0) nanaimo (0.3.0) nap (1.1.0) netrc (0.11.0) public_suffix (4.0.7) - rexml (3.2.5) + rexml (3.2.6) ruby-macho (2.5.1) typhoeus (1.4.0) ethon (>= 0.9.0) @@ -85,13 +84,12 @@ GEM colored2 (~> 3.1) nanaimo (~> 0.3.0) rexml (~> 3.2.4) - zeitwerk (2.6.11) PLATFORMS ruby DEPENDENCIES - cocoapods (>= 1.11.3) + cocoapods (~> 1.12) RUBY VERSION ruby 2.7.5p203 diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index c59aef53..400d88ee 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -153,6 +153,9 @@ dependencies { implementation("com.facebook.react:react-android") implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") + implementation 'androidx.appcompat:appcompat:1.6.1' + implementation 'com.google.android.material:material:1.4.+' + implementation 'androidx.constraintlayout:constraintlayout:2.1.4' debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml index 4122f36a..06c61d4e 100644 --- a/example/android/app/src/main/AndroidManifest.xml +++ b/example/android/app/src/main/AndroidManifest.xml @@ -1,25 +1,28 @@ + - - - - - - + android:roundIcon="@mipmap/ic_launcher_round" + android:theme="@style/AppTheme"> + + + + + + + - + + \ No newline at end of file diff --git a/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java b/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java index 1a2683de..71e2bf96 100644 --- a/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java +++ b/example/android/app/src/main/java/com/pagerviewexample/MainActivity.java @@ -1,10 +1,5 @@ package com.pagerviewexample; -import com.facebook.react.ReactActivity; -import com.facebook.react.ReactActivityDelegate; -import com.facebook.react.ReactRootView; - - import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; @@ -32,9 +27,6 @@ protected ReactActivityDelegate createReactActivityDelegate() { this, getMainComponentName(), // If you opted-in for the New Architecture, we enable the Fabric Renderer. - DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled - // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). - DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled - ); + DefaultNewArchitectureEntryPoint.getFabricEnabled()); } } diff --git a/example/android/app/src/main/res/layout/activity_main.xml b/example/android/app/src/main/res/layout/activity_main.xml new file mode 100644 index 00000000..e26ac0d2 --- /dev/null +++ b/example/android/app/src/main/res/layout/activity_main.xml @@ -0,0 +1,28 @@ + + + +