leecade / leecade/react-native-swiper

Non contained swiper in android modal

Open
#1,099 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

Which OS ?

Android

Version

Which versions are you using:

  • react-native-swiper v1.5.14
  • react-native v0.60.5
Expected behaviour

Contained swiper in modal

Actual behaviour

It extends at the end of the screen, not the width of the container

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.
-Create modal with a width minor to the window
-nest this swiper in a current view and this one in android will occupies all the width of the screen

Steps to reproduce

1.Make a modal
2.Wrap the swiper in these modal
3.Swipe and it

Code
<View style={{ width: '100%', height: '60%', flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'space-around'}}>
            <Swiper style={{width: "100%"}} showsButtons={false} activeDotColor={"#7FD05D"}>
              <View style={{width: "100%", justifyContent: 'center', alignItems: 'center',}}>
                <Text style={styles.text}>Hello Swiper</Text>
              </View>
              <View style={{width: "100%", justifyContent: 'center', alignItems: 'center',}}>
                <Text style={styles.text}>Beautiful</Text>
              </View>
            </Swiper>
          </View>
Gif

fix

Extra comment:

On iphone it works correctly

Contributor guide

No contributing guide indexed for this repository

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 by reproducing the provided example on Android with a narrower modal and the listed react-native-swiper and React Native versions. Inspect the Swiper layout behavior inside the modal and compare it with iOS. Done means the swiper stays within the modal width while preserving the existing iOS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.