leecade / leecade/react-native-swiper
childrens are not centered properly
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<Swiper showsPagination={false}>
<View style={{flex: 1, backgroundColor: '#4885ed', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Lorem</Text></View>
<View style={{flex: 1, backgroundColor: '#db3236', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Lorem</Text></View>
<View style={{flex: 1, backgroundColor: '#f4c20d', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Lorem</Text></View>
<View style={{flex: 1, backgroundColor: '#3cba54', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Lorem</Text></View>
</Swiper>
</View>
<View style={{flex: 1}}>
<Swiper showsPagination={false}>
<View style={{flex: 1, backgroundColor: '#3cba54', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Ipsum</Text></View>
<View style={{flex: 1, backgroundColor: '#f4c20d', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Ipsum</Text></View>
<View style={{flex: 1, backgroundColor: '#db3236', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Ipsum</Text></View>
<View style={{flex: 1, backgroundColor: '#4885ed', alignItems: 'center', justifyContent: 'center'}}><Text style={{fontSize: 48, color: '#fff'}}>Ipsum</Text></View>
</Swiper>
</View>
</View>
running this example causes <Text> to be in the bottom of the screen instead of being justified in the center, this seems to be related to the library itself, the flexing is proper, any suggestions?
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 with the nested reproduction in the issue and inspect how its child views receive layout dimensions. Reproduce the bottom-aligned text behavior, then verify that the example's children are centered vertically and horizontally without breaking the two stacked swipers.
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
- 45/100