meliorence / meliorence/react-native-snap-carousel

react-native-snap-carousel does not work in the same scope as react-native-swiper for Android

Open
#825 1 comment 0 reactions 0 assignees View on GitHub

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 ([]).)

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.

Steps to Reproduce

To reproduce the error using the example on GitHub:

  1. Download the project
  2. Go to the project folder
  3. Run npm i
  4. If you are on Mac OS, you need to paste a file called local.propierties in the android / directory with the following line that identifies your AndroidSDK installationsdk.dir = /Users/admin/Library/Android/sdk
  5. Then react-native android
  6. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.