Skip to content

add docs for attaching onPageScroll handler with reanimated #491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Jan 4, 2022
Merged

add docs for attaching onPageScroll handler with reanimated #491

merged 3 commits into from
Jan 4, 2022

Conversation

intergalacticspacehighway
Copy link
Contributor

Summary

This PR adds a document section to integrate reanimated event handler with onPageScroll. Ideally it would be more convenient to export a hook useAnimatedPageScrollHandler but it'll add dependency on reanimated. I think creating a separate package for this hook can also be convenient!

Test Plan

  • I have created a gist which can be tested in RN example app which has reanimated installed and configured. The callback receives offset and position events.
  • Also this repo (App.js) includes the working example which can be referred.
  • I am not really sure if there are any more cases.

What's required for testing (prerequisites)?

  • react-native-pager-view and react-native-reanimated

What are the steps to reproduce (after prerequisites)?

  • Run the app and try swiping pages. It should log the event or try updating values created using useSharedValue.

Compatibility

OS Implemented
iOS ✅
Android ✅

Checklist

  • I have tested this on a device and a simulator
  • I added the documentation in README.md
  • I updated the typed files (TS and Flow)

Thanks for the great library 🙏

troZee
troZee requested changes Jan 3, 2022
View reviewed changes
Copy link
Collaborator

@troZee troZee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @intergalacticspacehighway
Thank you for providing a doc improvements to the Pager. Could you add this snippet to the example folder ? It would be nice to have it inside the library example.

Once you done it, I will merge it

@intergalacticspacehighway
Copy link
Contributor Author

@troZee Done. Tested the example on android and iOS.

Screen.Recording.2022-01-04.at.1.06.10.PM.mov

intergalacticspacehighway
intergalacticspacehighway commented Jan 4, 2022
View reviewed changes
example/package.json
"react-native-animated-pagination-dots": "^0.1.51",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-reanimated": "^2.3.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think reanimated was being used in the example so this should not cause any issues!

intergalacticspacehighway
intergalacticspacehighway commented Jan 4, 2022
View reviewed changes
example/android/app/src/main/java/com/example/reactnativepagerview/MainApplication.java
import java.util.List;
import com.reactnativepagerview.PagerViewPackage;
import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes are from reanimated installation steps

@troZee troZee merged commit eb9ecff into callstack:master Jan 4, 2022
chuece added a commit to chuece/react-native-pager-view that referenced this pull request Sep 1, 2022
@chuece @intergalacticspacehighway
@vonovak @doug-lessen @dependabot @danilobuerger @jixt @RishatShamsutdinov @numandev1 @hirbod @hrupesh @lxp-git @andreialecu @LeviWilliams @mateusz-ramski @luislukas
Fix ios (#1)
20159f0 
* Update ReactNativePageView.m

* chore: add docs for attaching onPageScroll handler with reanimated (callstack#491)

* add docs for attaching handler with reanimated

* feat: add reanimated onpagescroll example

* feat: add reanimated onpagescroll example

* chore(docs): fix typos (callstack#497)

* fix(ios): Crash when rapidly switching pages callstack#510

* Release 5.4.10

* chore(deps): bump nanoid from 3.1.22 to 3.2.0 in /example (callstack#506)

Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.22 to 3.2.0.
- [Release notes](https://github.com/ai/nanoid/releases)
- [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md)
- [Commits](ai/nanoid@3.1.22...3.2.0)

---
updated-dependencies:
- dependency-name: nanoid
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump trim-off-newlines from 1.0.1 to 1.0.3 (callstack#513)

Bumps [trim-off-newlines](https://github.com/stevemao/trim-off-newlines) from 1.0.1 to 1.0.3.
- [Release notes](https://github.com/stevemao/trim-off-newlines/releases)
- [Commits](stevemao/trim-off-newlines@v1.0.1...v1.0.3)

---
updated-dependencies:
- dependency-name: trim-off-newlines
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump tmpl from 1.0.4 to 1.0.5 in /example (callstack#452)

Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5.
- [Release notes](https://github.com/daaku/nodejs-tmpl/releases)
- [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5)

---
updated-dependencies:
- dependency-name: tmpl
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump tmpl from 1.0.4 to 1.0.5 (callstack#451)

Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5.
- [Release notes](https://github.com/daaku/nodejs-tmpl/releases)
- [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5)

---
updated-dependencies:
- dependency-name: tmpl
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump semver-regex from 3.1.2 to 3.1.3 (callstack#449)

Bumps [semver-regex](https://github.com/sindresorhus/semver-regex) from 3.1.2 to 3.1.3.
- [Release notes](https://github.com/sindresorhus/semver-regex/releases)
- [Commits](https://github.com/sindresorhus/semver-regex/commits)

---
updated-dependencies:
- dependency-name: semver-regex
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(ios): wrong variable usage that causes crash related to callstack#458 (callstack#502)

Introduced in callstack#455 this should have been `i` instead of `index` all along.

* bump example

* Release 5.4.11

* chore(deps): bump plist from 3.0.1 to 3.0.4 (callstack#525)

Bumps [plist](https://github.com/TooTallNate/node-plist) from 3.0.1 to 3.0.4.
- [Release notes](https://github.com/TooTallNate/node-plist/releases)
- [Changelog](https://github.com/TooTallNate/plist.js/blob/master/History.md)
- [Commits](https://github.com/TooTallNate/node-plist/commits)

---
updated-dependencies:
- dependency-name: plist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump plist from 3.0.2 to 3.0.4 in /example (callstack#526)

Bumps [plist](https://github.com/TooTallNate/node-plist) from 3.0.2 to 3.0.4.
- [Release notes](https://github.com/TooTallNate/node-plist/releases)
- [Changelog](https://github.com/TooTallNate/plist.js/blob/master/History.md)
- [Commits](https://github.com/TooTallNate/node-plist/commits)

---
updated-dependencies:
- dependency-name: plist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(ios): rapid taps on the navigation tabs (callstack#529)

* bump example

* Release 5.4.12

* fix(android): initialPage for dynamic content

* Release 5.4.13

* Revert "fix(ios): rapid taps on the navigation tabs (callstack#529)"

This reverts commit 27e8003.

* fix(ios): switching between the pages for rapid tabs

* Release 5.4.14

* fix(ios): crash with `NSInternalInconsistencyException` on iOS (callstack#530)

* Release 5.4.15

* chore(docs): fix PagerView import (callstack#533)

* chore: fix android example

* chore: add native stack navigator

* fix lint

* chore: update pods

* fix(ios): set delaysContentTouches to YES (callstack#563)

* Release 5.4.16

* fix(ios): NSInternalInconsistencyException crash (callstack#564)

Added additional checks to scroll without animation if already an animation is in progress to fix `NSInternalInconsistencyException` crash in iOS

* Release 5.4.17

* fix(android): scrapped or attached views may not be recycled callstack#173 (callstack#552)

* Release 5.4.18

* fix(ios): disable pager scroll gesture on swipe to go back (callstack#500)

* fix: disable pager scroll gesture on swipe to go back

* fix: navigation controller nil

* Release 5.4.19

* fix(ios): pager sometimes does not fill full height (callstack#565)

Fixes callstack#523
Fixes callstack#543

See callstack#518 (comment) for more info.

* Release 5.4.21

* fix(android): only remove child if it exists (callstack#560)

* Release 5.4.22

* fix(ios): keyboard auto dismisses (callstack#567)

Fixes callstack#566

* Release 5.4.23

* fix(ios): restore animated param check (callstack#569)

* chore: bump example

* Release 5.4.24

* fix(ios): incorrect pager height (callstack#580)

Co-authored-by: Andrei Alecu <andreialecu@users.noreply.github.com>

* Release 5.4.25

* fix(android): assign an id to host view (callstack#585) (callstack#587)

Co-authored-by: Nishan <nishanbende@gmail.com>
Co-authored-by: Vojtech Novak <vonovak@gmail.com>
Co-authored-by: doug-lessen <85892917+doug-lessen@users.noreply.github.com>
Co-authored-by: Piotr Trocki <piotr@trocki.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Danilo Bürger <info@danilobuerger.de>
Co-authored-by: Jan-Rixt Van Hoye <jixt@burntide.eu>
Co-authored-by: Rishat Shamsutdinov <rishat.sh91@gmail.com>
Co-authored-by: Numan <36044436+nomi9995@users.noreply.github.com>
Co-authored-by: Hirbod <504909+hirbod@users.noreply.github.com>
Co-authored-by: Rupesh Chaudhari <30570616+hrupesh@users.noreply.github.com>
Co-authored-by: lxp <a845326948@gmail.com>
Co-authored-by: Andrei Alecu <aandrei03@gmail.com>
Co-authored-by: Levi W <32551245+LeviWilliams@users.noreply.github.com>
Co-authored-by: mateusz-ramski <65708055+mateusz-ramski@users.noreply.github.com>
Co-authored-by: Andrei Alecu <andreialecu@users.noreply.github.com>
Co-authored-by: Luis Fernandez <luislukas@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@troZee troZee Awaiting requested review from troZee

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@intergalacticspacehighway @troZee