leecade / leecade/react-native-swiper
Problems inside of react navigation
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
I just implemented react-native-swiper in my project, where I'm using @react-navigation/drawer": "^5.3.2".
the structure is pretty simple:
App.js
<NavigationContainer ref={navigationRef}>
<Stack.Navigator
headerMode="none"
animationEnabled={false}
options={{animationEnabled: false}}>
<Stack.Screen name="Home" component={DrawerNavigation} />
</NavigationContainer>
DrawerNavigation.js
<Drawer.Navigator
drawerType="slide"
drawerContent={props => <DrawerContent {...props} />}
drawerPosition="right"
drawerStyle={styles.container}>
<Drawer.Screen name="Home" component={TabNavigation} />
</Drawer.Navigator>
and inside of tab, the first screen is this:
<Swiper autoplay style={styles.wrapper}>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
This works only if I wrap Slider with <View style={{position: 'absolute'}}>
Any ideas Why?
Version
Which versions are you using:
- react-native-swiper v6.6.0
- react-native v0.61.5
Contributor guide
No contributing guide indexed for this repository
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 by reproducing the layout in App.js and DrawerNavigation.js with react-native-swiper v6.6.0, React Native 0.61.5, and @react-navigation/drawer 5.3.2. Compare the swiper inside the reported navigation structure with and without the absolute-position wrapper. Done means the rendering problem is characterized and the swiper works without that workaround in the stated setup.
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
- 32/100