Comments (15)
Okay, so this is horrendously ugly on multiple fronts, but depending on how many times you need to do this… This does work for me… I'm basically just measuring the parent container after it renders (plus a timeout), then just hard-coding it anyway. It's really not great. Forgive the ES6/7 notation, but it should be reasonably straightforward. Let me know if not. Or if you have a better solution.
export default class ItemSwiper extends React.Component {
constructor(props) {
super(props)
this.state = { width: null, height: null }
}
componentDidMount() {
setTimeout(this.measureSwiper)
}
storeSwiperLayout = (ox, oy, width, height, px, py) => this.setState({ width: width, height: height })
measureSwiper = () => this.refs.sillyWrapper.measure(this.storeSwiperLayout);
renderSwiper = () => {
if( this.state.width > 0 ) {
return (
<Swiper style={styles.swiper} width={this.state.width} height={this.state.height}>
{ this.props.items.map(i => this.renderItem(i)) }
</Swiper>
)
}
}
render() {
return (
<View style={styles.sillyWrapper} ref="sillyWrapper">
{ this.renderSwiper() }
</View>
)
}
}
from react-native-swiper.
I'm facing same issue
from react-native-swiper.
Also had to add:
componentWillReceiveProps(props) {
if( props.width ) this.setState({ width: props.width || width })
if( props.height ) this.setState({ height: props.height || height })
},
to the swiper module so that changes have an effect. Could just extend Swiper to add these.
from react-native-swiper.
I just changed the container style position: 'relative' to flex: 1 in index.js and Voila!
from react-native-swiper.
@nickmaxwell10 Haha, that's wayyyyy simpler! Oof. A month into RN now and some things that were so difficult have become so much easier than I was making them…
from react-native-swiper.
@rreusser yeah flex:1
works fine, RN have a flex-like layout system easy to fit container
from react-native-swiper.
I have the same issue, Could you please post a where flex:1 has to be set..?
from react-native-swiper.
Same problem here
from react-native-swiper.
Any workarounds on this ?
from react-native-swiper.
@rafaelcorreiapoli Haven't looked at this in a long time so not sure exactly if/what the flex/positioning fix is, but honestly my approach was to rewrite the part I needed, which was really just the page indicator: https://github.com/rreusser/react-native-paged-scroll-view It's definitely not perfect, but that was my workaround.
from react-native-swiper.
@rreusser Nice! thanks, I will try it out
from react-native-swiper.
@rafaelcorreiapoli Disclaimer: @leecade's swiper actually works very well, but the flex issue and adding/removing items dynamically and styling things differently meant it was more straightforward to implemented the restricted subset of functionality. So am suggesting mine as just another alternative depending on your needs, but not to take away from this repo. 😄 Also, it seems like I might have a small race condition going on, so I can't guarantee my approach is 100% perfect, but it worked great in production for us. Not working with RN much at the moment, but don't hesitate to let me know if you have issues with it. Good luck!
from react-native-swiper.
Hi,
There is another approach.
In the index.js I add onLayout event for the component View and then I can set state width and height.
setSize(){
const w = Dimensions.get('window').width
const h = Dimensions.get('window').height
this.setState({width:w, height:h})
}
render() {
..
return(
<View style={[styles.container, {
width: state.width,
height: state.height
}]}
onLayout={this.setSize.bind(this)}
>
..
)
This works for me :)
from react-native-swiper.
Similar to kbrk's approach, I use the following workaround.
In my code that uses the Swiper, I have the following. Seems to work perfectly for me.
constructor(props){
super(props);
this.state = {
width: 0,
height: 0
};
}
setSize(event){
const w = event.nativeEvent.layout.width;
const h = event.nativeEvent.layout.height;
this.setState({width:w, height:h});
}
render() {
return (
<View style={{flex:1}}>
<View style={{flex:0}}>
... Some content on the header
</View>
<View style={{flex:1}} onLayout={this.setSize.bind(this)}>
<Swiper
height={this.state.height}
width={this.state.width}
...
>
... Some content
</Swiper>
</View>
</View>
);
}
from react-native-swiper.
@joehui - Your solution worked for me. Thanks
from react-native-swiper.
Related Issues (20)
- Data is not displayed correctly when the data is changed
- Is this still maintained? Or EOL? HOT 5
- how to prevent user to not come on first screen after the last swipe?
- how to detect swipe left or right HOT 1
- ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types HOT 4
- how to swipe to next screen when user press the button HOT 1
- 好像停更了?
- flicker in the area of <Swiper> Component when swiping on the latest version of react-native HOT 4
- Position: aboslute won't make button clickable
- In the case of iPhone, touch is not available when using Flatlist items.
- Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types' HOT 1
- OnIndexChanged
- Just don't use this lib. HOT 3
- [All-iPhone-Device] Two photos are displayed in one picture in the Swiper HOT 1
- Add animation to update pagination dot while swiping HOT 2
- Warning: Failed prop type: The prop `children` is marked as required in `_default`, but its value is `undefined`.
- index value will be out of reange after updating the UseState
- How can we make screen transitions by touching dots? How can I add a background to the dots?
- How to adjust spacing of pagination dots ?
- onIndexChanged getting wrong value
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-swiper.