meliorence / meliorence/react-native-snap-carousel
react-native-snap-carousel does not work in the same scope as react-native-swiper for Android
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Is this a bug report, a feature request, or a question?
Bug Report
Have you followed the required steps before opening a bug report?
(Check the step you've followed - put an x character between the square brackets ([]).)
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn't already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Have you made sure that it wasn't a React Native bug?
Yes
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
- Android 8.1.0
- Android 10
Is the bug reproductible in a production environment (not a debug one)?
Yes
Environment
Environments:
- Environment 1
- React: 16.13.1
- React native: 0.63.4
- react-native-snap-carousel: 3.9.1
- Environment 2
- React: 16.9.1
- React native: 0.61.5
- react-native-snap-carousel: 3.9.1
Target Platform:
- Android (8.1)
- Android (10)
Expected Behavior
An optimal operation of the plugin as well as its operation in iOS. (No screenshots attached since it is seen in perfect condition)
Actual Behavior
Well, first of all to give you an overview of the environment, it is a project in react-native, it is used for both Android and iOS, this project is a kind of fitness social network where the house is located in a place of the application with their respective information and a screen where users can make publications, these publications have the particularity that several images can be uploaded in the same publication, this is where react-native-snap-carousel comes in.
These screens are linked by the react-native-swiper plugin, which has similar functionality to react-native-snap-carousel but with screens, at moment of incorporating react-native-snap-carousel to the screen of the posts this does not work thanks to the plugin that already maintained the home screen.
Tests to be carried out in the application:
- Try the latest possible version of your plugin - 3.9.1
- My current environment uses react-native 0.61.5
- Update my version of react-native to 0.63.4
- Try one of the latest versions of react
- Make a production build to avoid the problems that you name in your documentation
- In iOS this was solved thanks to the introduction of
<SafeAreaView>tag
Reproducible Demo
Well, I don't know how to use snack.expo.io, so I created my own example code with the necessary things to replicate my problem, here I post the example in snack.expo.io and the example in my GitHub profile.
I apologize if this doesn't meet the needs of a playable demo, but I really did spend time running this example for you guys, I hope it's enough.
- https://snack.expo.io/@curbelodyn/carousel-issue
- https://github.com/Curbe8/react-native-snap-carousel-issue
Steps to Reproduce
To reproduce the error using the example on GitHub:
- Download the project
- Go to the project folder
- Run
npm i - If you are on Mac OS, you need to paste a file called
local.propiertiesin the android / directory with the following line that identifies your AndroidSDK installationsdk.dir = /Users/admin/Library/Android/sdk - Then
react-native android - Once inside the application you will see a screen with the label "Home" -> Swipe from right to left and it will move to the "Posts" screen. Here you will find several posts with several test images with the plugin in operation, the same does not work due to swipe above in my opinion
I hope that all my writing is helpful and you can understand it correctly, I will be attentive at all times to comments.
I await your responses.
Regards,
Leandro.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked GitHub reproduction and run the listed npm i and Android steps. Compare behavior when react-native-snap-carousel and react-native-swiper are used together on Android, using the supplied React Native environments. Done means the carousel works on the Posts screen while navigation remains functional on the stated Android versions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, javascript, react, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100