forked from leecade/react-native-swiper
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[leecadegh-36] Use flex for resizing and get dimensions from onLayout
- Loading branch information
Showing
2 changed files
with
39 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,29 +2,28 @@ | |
* react-native-swiper | ||
* @author leecade<[email protected]> | ||
*/ | ||
import React, { Component, ViewPropTypes } from 'react' | ||
import React, { Component } from 'react' | ||
import PropTypes from 'prop-types' | ||
import { | ||
Text, | ||
View, | ||
ViewPropTypes, | ||
ScrollView, | ||
Dimensions, | ||
TouchableOpacity, | ||
ViewPagerAndroid, | ||
Platform, | ||
ActivityIndicator | ||
} from 'react-native' | ||
|
||
const { width, height } = Dimensions.get('window') | ||
|
||
/** | ||
* Default styles | ||
* @type {StyleSheetPropType} | ||
*/ | ||
const styles = { | ||
container: { | ||
backgroundColor: 'transparent', | ||
position: 'relative' | ||
position: 'relative', | ||
flex: 1 | ||
}, | ||
|
||
wrapper: { | ||
|
@@ -102,6 +101,7 @@ export default class extends Component { | |
horizontal: PropTypes.bool, | ||
children: PropTypes.node.isRequired, | ||
style: ViewPropTypes.style, | ||
contentStyle: ViewPropTypes.style, | ||
pagingEnabled: PropTypes.bool, | ||
showsHorizontalScrollIndicator: PropTypes.bool, | ||
showsVerticalScrollIndicator: PropTypes.bool, | ||
|
@@ -155,7 +155,7 @@ export default class extends Component { | |
* Init states | ||
* @return {object} states | ||
*/ | ||
state = this.initState(this.props, true) | ||
state = this.initState(this.props) | ||
|
||
/** | ||
* autoplay timer | ||
|
@@ -165,10 +165,8 @@ export default class extends Component { | |
loopJumpTimer = null | ||
|
||
componentWillReceiveProps (nextProps) { | ||
const sizeChanged = (nextProps.width || width) !== this.state.width || | ||
(nextProps.height || height) !== this.state.height | ||
if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer) | ||
this.setState(this.initState(nextProps, sizeChanged)) | ||
this.setState(this.initState(nextProps)) | ||
} | ||
|
||
componentDidMount () { | ||
|
@@ -180,9 +178,9 @@ export default class extends Component { | |
this.loopJumpTimer && clearTimeout(this.loopJumpTimer) | ||
} | ||
|
||
initState (props, setOffsetInState) { | ||
initState (props) { | ||
// set the current state | ||
const state = this.state || {} | ||
const state = this.state || { width: 0, height: 0, offset: { x: 0, y: 0 } } | ||
|
||
const initState = { | ||
autoplayEnd: false, | ||
|
@@ -199,32 +197,11 @@ export default class extends Component { | |
// retain the index | ||
initState.index = state.index | ||
} else { | ||
// reset the index | ||
setOffsetInState = true // if the index is reset, go ahead and update the offset in state | ||
initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0 | ||
} | ||
|
||
// Default: horizontal | ||
initState.dir = props.horizontal === false ? 'y' : 'x' | ||
initState.width = props.width || width | ||
initState.height = props.height || height | ||
newInternals.offset = {} | ||
|
||
if (initState.total > 1) { | ||
let setup = initState.index | ||
if (props.loop) { | ||
setup++ | ||
} | ||
newInternals.offset[initState.dir] = initState.dir === 'y' | ||
? initState.height * setup | ||
: initState.width * setup | ||
} | ||
|
||
// only update the offset in state if needed, updating offset while swiping | ||
// causes some bad jumping / stuttering | ||
if (setOffsetInState) { | ||
initState.offset = newInternals.offset | ||
} | ||
|
||
this.internals = newInternals | ||
return initState | ||
|
@@ -235,6 +212,29 @@ export default class extends Component { | |
return Object.assign({}, this.state, this.internals) | ||
} | ||
|
||
setDimensions = (event) => { | ||
const { width, height } = event.nativeEvent.layout | ||
const offset = this.internals.offset = {} | ||
const state = { width, height } | ||
|
||
if (this.state.total > 1) { | ||
let setup = this.state.index | ||
if (this.props.loop) { | ||
setup++ | ||
} | ||
offset[this.state.dir] = this.state.dir === 'y' | ||
? height * setup | ||
: width * setup | ||
} | ||
|
||
// only update the offset in state if needed, updating offset while swiping | ||
// causes some bad jumping / stuttering | ||
if (width !== this.state.width || height !== this.state.height) { | ||
state.offset = offset | ||
} | ||
this.setState(state) | ||
} | ||
|
||
loopJump = () => { | ||
if (!this.state.loopJump) return | ||
const i = this.state.index + (this.props.loop ? 1 : 0) | ||
|
@@ -551,7 +551,7 @@ export default class extends Component { | |
<ScrollView ref='scrollView' | ||
{...this.props} | ||
{...this.scrollViewPropOverrides()} | ||
contentContainerStyle={[styles.wrapper, this.props.style]} | ||
contentContainerStyle={[styles.wrapper, this.props.contentStyle]} | ||
contentOffset={this.state.offset} | ||
onScrollBeginDrag={this.onScrollBegin} | ||
onMomentumScrollEnd={this.onScrollEnd} | ||
|
@@ -626,10 +626,7 @@ export default class extends Component { | |
} | ||
|
||
return ( | ||
<View style={[styles.container, { | ||
width: state.width, | ||
height: state.height | ||
}]}> | ||
<View style={[styles.container, this.props.style]} onLayout={this.setDimensions}> | ||
{this.renderScrollView(pages)} | ||
{props.showsPagination && (props.renderPagination | ||
? this.props.renderPagination(state.index, state.total, this) | ||
|
e8173fe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@timmywil Great work! Did this fix the orientation issue for you? I'm wondering if this will work out-of-the-box or if I might have to wire up some code to get landscape working. Thanks!
e8173fe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@SSTPIERRE2 It worked for me. I haven't tested any cases other than mine, tho.
e8173fe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@timmywil anything extra to setup when calling Swiper? Like setting up a componentWillReceiveProps and setting height and width or something. I'm testing on a fresh RN init'd app, with only a fresh swiper rendered.
e8173fe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, I removed that as it stopped working when I upgraded react-native. You shouldn't have to do anything, but let me know.