From 8b9c5c040a7f29c95000be4b3a4741bbcfa3b41c Mon Sep 17 00:00:00 2001 From: Liangyu Date: Wed, 1 Apr 2020 17:03:21 +0800 Subject: [PATCH] support rn0.62, up to 0.7.4 --- components/AlbumView/AlbumSheet.js | 3 + components/AlbumView/AlbumView.js | 2 +- components/Button/Button.js | 26 +-- components/Checkbox/Checkbox.js | 27 +-- components/Input/Input.js | 4 +- components/ListRow/SwipeActionButton.js | 4 +- components/ListRow/SwipeTouchableOpacity.js | 19 +- components/ListRow/TouchableOpacity.js | 188 ++++++++++++++++++ .../NavigationBar/NavigationBackButton.js | 2 +- components/NavigationBar/NavigationBar.js | 4 +- components/NavigationBar/NavigationButton.js | 4 +- components/Overlay/OverlayPopView.js | 10 + components/Overlay/OverlayPullView.js | 2 + components/Overlay/OverlayView.js | 2 + components/Overlay/TopView.js | 32 +-- components/SegmentedBar/SegmentedBar.js | 4 +- components/TransformView/TransformView.js | 5 + components/Wheel/Wheel.js | 12 +- icons/back.png | Bin 0 -> 20437 bytes package.json | 2 +- 20 files changed, 274 insertions(+), 78 deletions(-) create mode 100644 components/ListRow/TouchableOpacity.js create mode 100644 icons/back.png diff --git a/components/AlbumView/AlbumSheet.js b/components/AlbumView/AlbumSheet.js index 5e89667..f53d3eb 100644 --- a/components/AlbumView/AlbumSheet.js +++ b/components/AlbumView/AlbumSheet.js @@ -189,11 +189,13 @@ export default class AlbumSheet extends TransformView { toValue: valueX, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }), Animated.timing(translateY, { toValue: valueY, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }), ]).start(); } else { @@ -219,6 +221,7 @@ export default class AlbumSheet extends TransformView { toValue: toValue, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }).start(); } else { translateX.setValue(toValue); diff --git a/components/AlbumView/AlbumView.js b/components/AlbumView/AlbumView.js index ed5313e..f778ccb 100644 --- a/components/AlbumView/AlbumView.js +++ b/components/AlbumView/AlbumView.js @@ -83,7 +83,7 @@ export default class AlbumView extends Component { if (this.animateActions.length === 0) return; Animated.parallel(this.animateActions.map((item, index) => - Animated.spring(item.variable, {toValue: item.toValue, friction: 9}) + Animated.spring(item.variable, {toValue: item.toValue, friction: 9, useNativeDriver: false}) )).start(e => { this.props.onChange && this.props.onChange(newIndex, index); }); diff --git a/components/Button/Button.js b/components/Button/Button.js index e674f1e..4cc7f7f 100644 --- a/components/Button/Button.js +++ b/components/Button/Button.js @@ -8,10 +8,9 @@ import {StyleSheet, Text, TouchableOpacity} from 'react-native'; import Theme from 'teaset/themes/Theme'; -export default class Button extends TouchableOpacity { +export default class Button extends Component { static propTypes = { - ...TouchableOpacity.propTypes, type: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'link']), size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']), title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]), @@ -19,20 +18,16 @@ export default class Button extends TouchableOpacity { }; static defaultProps = { - ...TouchableOpacity.defaultProps, type: 'default', size: 'md', }; - componentDidUpdate(prevProps) { - if (prevProps.disabled != this.props.disabled) { - let opacity = Theme.btnDisabledOpacity; - if (!this.props.disabled) { - let fs = StyleSheet.flatten(this.props.style); - opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1; - } - this.state.anim.setValue(opacity); - } + measureInWindow(callback) { + this.refs.touchableOpacity && this.refs.touchableOpacity.measureInWindow(callback); + } + + measure(callback) { + this.refs.touchableOpacity && this.refs.touchableOpacity.measure(callback); } buildStyle() { @@ -104,7 +99,6 @@ export default class Button extends TouchableOpacity { if (disabled) { style.opacity = Theme.btnDisabledOpacity; } - this.state.anim._value = style.opacity === undefined ? 1 : style.opacity; return style; } @@ -140,9 +134,11 @@ export default class Button extends TouchableOpacity { } render() { - let {style, type, size, title, titleStyle, children, ...others} = this.props; + let {style, type, size, title, titleStyle, disabled, activeOpacity, children, ...others} = this.props; + style = this.buildStyle(); + if (disabled) activeOpacity = style.opacity; return ( - + {this.renderTitle()} ); diff --git a/components/Checkbox/Checkbox.js b/components/Checkbox/Checkbox.js index 8e84bb5..07d20a9 100644 --- a/components/Checkbox/Checkbox.js +++ b/components/Checkbox/Checkbox.js @@ -8,10 +8,9 @@ import {StyleSheet, Text, Image, TouchableOpacity} from 'react-native'; import Theme from 'teaset/themes/Theme'; -export default class Checkbox extends TouchableOpacity { +export default class Checkbox extends Component { static propTypes = { - ...TouchableOpacity.propTypes, checked: PropTypes.bool, defaultChecked: PropTypes.bool, size: PropTypes.oneOf(['lg', 'md', 'sm']), @@ -25,7 +24,6 @@ export default class Checkbox extends TouchableOpacity { }; static defaultProps = { - ...TouchableOpacity.defaultProps, defaultChecked: false, size: 'md', checkedIcon: require('../../icons/checked.png'), @@ -35,9 +33,10 @@ export default class Checkbox extends TouchableOpacity { constructor(props) { super(props); - this.state = Object.assign(this.state, { + this.state = { + ...this.state, checked: props.checked === true || props.checked === false ? props.checked : props.defaultChecked, - }); + }; } componentDidUpdate(prevProps) { @@ -47,14 +46,6 @@ export default class Checkbox extends TouchableOpacity { this.setState({checked}); } } - if (disabled !== prevProps.disabled) { - let opacity = Theme.cbDisabledOpacity; - if (!disabled) { - let fs = StyleSheet.flatten(this.props.style); - opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1; - } - this.state.anim.setValue(opacity); - } } buildStyle() { @@ -70,7 +61,6 @@ export default class Checkbox extends TouchableOpacity { if (disabled) { style.opacity = Theme.cbDisabledOpacity; } - this.state.anim._value = style.opacity === undefined ? 1 : style.opacity; return style; } @@ -139,11 +129,14 @@ export default class Checkbox extends TouchableOpacity { } render() { - let {style, children, checked, defaultChecked, size, title, titleStyle, checkedIcon, checkedIconStyle, uncheckedIcon, uncheckedIconStyle, onChange, onPress, ...others} = this.props; - + let {style, children, checked, defaultChecked, size, title, titleStyle, checkedIcon, checkedIconStyle, uncheckedIcon, uncheckedIconStyle, disabled, activeOpacity, onChange, onPress, ...others} = this.props; + style = this.buildStyle(); + if (disabled) activeOpacity = style.opacity; return ( { this.setState({checked: !checked}); onChange && onChange(!checked); diff --git a/components/Input/Input.js b/components/Input/Input.js index ed760b6..6381a1f 100644 --- a/components/Input/Input.js +++ b/components/Input/Input.js @@ -8,16 +8,14 @@ import {StyleSheet, TextInput} from 'react-native'; import Theme from 'teaset/themes/Theme'; -export default class Input extends TextInput { +export default class Input extends Component { static propTypes = { - ...TextInput.propTypes, size: PropTypes.oneOf(['lg', 'md', 'sm']), disabled: PropTypes.bool, }; static defaultProps = { - ...TextInput.defaultProps, size: 'md', disabled: false, underlineColorAndroid: 'rgba(0, 0, 0, 0)', diff --git a/components/ListRow/SwipeActionButton.js b/components/ListRow/SwipeActionButton.js index ffc94c3..9be3617 100644 --- a/components/ListRow/SwipeActionButton.js +++ b/components/ListRow/SwipeActionButton.js @@ -8,17 +8,15 @@ import {View, Text, TouchableOpacity} from 'react-native'; import Theme from 'teaset/themes/Theme'; -export default class SwipeActionButton extends TouchableOpacity { +export default class SwipeActionButton extends Component { static propTypes = { - ...TouchableOpacity.propTypes, type: PropTypes.oneOf(['default', 'danger']), title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]), titleStyle: Text.propTypes.style, }; static defaultProps = { - ...TouchableOpacity.defaultProps, type: 'default', }; diff --git a/components/ListRow/SwipeTouchableOpacity.js b/components/ListRow/SwipeTouchableOpacity.js index 2bcd100..fdd0a16 100644 --- a/components/ListRow/SwipeTouchableOpacity.js +++ b/components/ListRow/SwipeTouchableOpacity.js @@ -4,21 +4,21 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {StyleSheet, View, Text, TouchableOpacity, Animated} from 'react-native'; +import {StyleSheet, View, Text, Animated} from 'react-native'; import Theme from 'teaset/themes/Theme'; +import TouchableOpacity from './TouchableOpacity'; + export default class SwipeTouchableOpacity extends TouchableOpacity { static propTypes = { - ...TouchableOpacity.propTypes, swipeable: PropTypes.bool, swipeWidth: PropTypes.number, onSwipeStsChange: PropTypes.func, //(swipeSts), - none, - moving, - closing, - opening, - opened }; static defaultProps = { - ...TouchableOpacity.defaultProps, swipeable: true, swipeWidth: 100, }; @@ -29,9 +29,10 @@ export default class SwipeTouchableOpacity extends TouchableOpacity { this.translateX = 0; this.prevTouches = []; this.replaceSuperFunction(); - Object.assign(this.state, { + this.state = { + ...this.state, translateX: new Animated.Value(0), - }); + }; } get swipeSts() { @@ -46,24 +47,24 @@ export default class SwipeTouchableOpacity extends TouchableOpacity { replaceSuperFunction() { let touchableHandleResponderMove = this.touchableHandleResponderMove; this.touchableHandleResponderMove = (e) => { - touchableHandleResponderMove(e); + touchableHandleResponderMove.call(this, e); this.swiping(e); } let touchableHandleActivePressOut = this.touchableHandleActivePressOut; this.touchableHandleActivePressOut = (e) => { this.swipeOver(); - touchableHandleActivePressOut(e); + touchableHandleActivePressOut.call(this, e); } let touchableHandlePress = this.touchableHandlePress; this.touchableHandlePress = (e) => { - if (!this.checkPress()) touchableHandlePress(e); + if (!this.checkPress()) touchableHandlePress.call(this, e); } let touchableHandleLongPress = this.touchableHandleLongPress; this.touchableHandleLongPress = (e) => { - if (!this.checkPress()) touchableHandleLongPress(e); + if (!this.checkPress()) touchableHandleLongPress.call(this, e); } } diff --git a/components/ListRow/TouchableOpacity.js b/components/ListRow/TouchableOpacity.js new file mode 100644 index 0000000..8fc32cf --- /dev/null +++ b/components/ListRow/TouchableOpacity.js @@ -0,0 +1,188 @@ +// TouchableOpacity.js + +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; + +import {Platform, TouchableWithoutFeedback, Animated, ViewPropTypes} from 'react-native'; +import Easing from 'react-native/Libraries/Animated/src/Easing'; +import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle'; + +if (Platform.constants.reactNativeVersion.major === 0 && Platform.constants.reactNativeVersion.minor < 62) { + console.error('this teaset edition need react native 0.62.0 or above, please use teaset@0.7.1 in earlier version of react native'); +} + +export default class TouchableOpacity extends Component { + + static propTypes = { + ...TouchableWithoutFeedback.propTypes, + activeOpacity: PropTypes.number, + style: ViewPropTypes.style, + }; + + static defaultProps = { + activeOpacity: 0.2, + }; + + constructor(props) { + super(props); + this.state = { + anim: new Animated.Value(this._getChildStyleOpacityWithDefault()), + pressability: null, + }; + } + + componentDidMount() { + import('react-native/Libraries/Pressability/Pressability.js') + .then(Pressability => this.initPressability(Pressability.default)) + .catch(error => console.error(error)); + } + + componentDidUpdate(prevProps, prevState) { + if (this.props.disabled !== prevProps.disabled) { + this._opacityInactive(250); + } + } + + componentWillUnmount(): void { + this.state.pressability && this.state.pressability.reset(); + } + + initPressability(Pressability) { + let pressability = new Pressability({ + getHitSlop: () => this.props.hitSlop, + getLongPressDelayMS: () => { + if (this.props.delayLongPress != null) { + const maybeNumber = this.props.delayLongPress; + if (typeof maybeNumber === 'number') { + return maybeNumber; + } + } + return 500; + }, + getPressDelayMS: () => this.props.delayPressIn, + getPressOutDelayMS: () => this.props.delayPressOut, + getPressRectOffset: () => this.props.pressRetentionOffset, + onBlur: event => { + if (this.props.onBlur != null) { + this.props.onBlur(event); + } + }, + onFocus: event => { + if (this.props.onFocus != null) { + this.props.onFocus(event); + } + }, + onLongPress: event => this.touchableHandleLongPress(event), + onPress: event => this.touchableHandlePress(event), + onPressIn: event => { + this._opacityActive( + event.dispatchConfig.registrationName === 'onResponderGrant' + ? 0 + : 150, + ); + if (this.props.onPressIn != null) { + this.props.onPressIn(event); + } + }, + onPressOut: event => this.touchableHandleActivePressOut(event), + onPressMove: event => this.touchableHandleResponderMove(event), + onResponderTerminationRequest: () => + !this.props.rejectResponderTermination, + onStartShouldSetResponder: () => !this.props.disabled, + }); + this.setState({pressability}); + } + + measureInWindow(callback) { + this.refs.animatedView && this.refs.animatedView.measureInWindow(callback); + } + + measure(callback) { + this.refs.animatedView && this.refs.animatedView.measure(callback); + } + + touchableHandleResponderMove(event) { + } + + touchableHandleActivePressOut(event) { + this._opacityInactive(250); + if (this.props.onPressOut != null) { + this.props.onPressOut(event); + } + } + + touchableHandlePress(event) { + if (this.props.onPress != null) { + this.props.onPress(event); + } + } + + touchableHandleLongPress(event) { + if (this.props.onLongPress != null) { + this.props.onLongPress(event); + } + } + + /** + * Animate the touchable to a new opacity. + */ + _setOpacityTo(toValue, duration) { + Animated.timing(this.state.anim, { + toValue, + duration, + easing: Easing.inOut(Easing.quad), + useNativeDriver: true, + }).start(); + } + + _opacityActive(duration) { + this._setOpacityTo(this.props.activeOpacity ?? 0.2, duration); + } + + _opacityInactive(duration) { + this._setOpacityTo(this._getChildStyleOpacityWithDefault(), duration); + } + + _getChildStyleOpacityWithDefault() { + const opacity = flattenStyle(this.props.style)?.opacity; + return typeof opacity === 'number' ? opacity : 1; + } + + render() { + const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} = this.state.pressability ? this.state.pressability.getEventHandlers() : {}; + return ( + + {this.props.children} + + ); + } + +} diff --git a/components/NavigationBar/NavigationBackButton.js b/components/NavigationBar/NavigationBackButton.js index 77d5a53..f0b4d2c 100644 --- a/components/NavigationBar/NavigationBackButton.js +++ b/components/NavigationBar/NavigationBackButton.js @@ -21,7 +21,7 @@ export default class NavigationBackButton extends NavigationButton { static defaultProps = { ...NavigationButton.defaultProps, - icon: {uri: backIcon}, + icon: require('../../icons/back.png'), //{uri: backIcon}, rn 0.62 bug, see https://github.com/facebook/react-native/issues/28454#issuecomment-606298713 }; buildStyle() { diff --git a/components/NavigationBar/NavigationBar.js b/components/NavigationBar/NavigationBar.js index 9bec411..2b81cda 100644 --- a/components/NavigationBar/NavigationBar.js +++ b/components/NavigationBar/NavigationBar.js @@ -109,8 +109,8 @@ export default class NavigationBar extends Component { if (barTop._value != barTopValue || barOpacity._value != barOpacityValue) { if (animated) { Animated.parallel([ - Animated.spring(barTop, {toValue: barTopValue, friction: 9}), - Animated.spring(barOpacity, {toValue: barOpacityValue, friction: 9}), + Animated.spring(barTop, {toValue: barTopValue, friction: 9, useNativeDriver: false,}), + Animated.spring(barOpacity, {toValue: barOpacityValue, friction: 9, useNativeDriver: false,}), ]).start(); } else { barTop.setValue(barTopValue); diff --git a/components/NavigationBar/NavigationButton.js b/components/NavigationBar/NavigationButton.js index 9e3e963..2a4b53a 100644 --- a/components/NavigationBar/NavigationButton.js +++ b/components/NavigationBar/NavigationButton.js @@ -6,14 +6,12 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {TouchableOpacity} from 'react-native'; -export default class NavigationButton extends TouchableOpacity { +export default class NavigationButton extends Component { static propTypes = { - ...TouchableOpacity.propTypes, }; static defaultProps = { - ...TouchableOpacity.defaultProps, hitSlop: {top: 12, bottom: 12, left: 8, right: 8}, }; diff --git a/components/Overlay/OverlayPopView.js b/components/Overlay/OverlayPopView.js index eba6368..7a816a8 100644 --- a/components/Overlay/OverlayPopView.js +++ b/components/Overlay/OverlayPopView.js @@ -48,22 +48,27 @@ export default class OverlayPopView extends OverlayView { Animated.timing(this.state.opacity, { toValue: 1, duration, + useNativeDriver: false, }), Animated.timing(this.state.translateX, { toValue: 0, duration, + useNativeDriver: false, }), Animated.timing(this.state.translateY, { toValue: 0, duration, + useNativeDriver: false, }), Animated.timing(this.state.scaleX, { toValue: 1, duration, + useNativeDriver: false, }), Animated.timing(this.state.scaleY, { toValue: 1, duration, + useNativeDriver: false, }), ]); return animates; @@ -77,22 +82,27 @@ export default class OverlayPopView extends OverlayView { Animated.timing(this.state.opacity, { toValue: 0, duration, + useNativeDriver: false, }), Animated.timing(this.state.translateX, { toValue: ft.translateX, duration, + useNativeDriver: false, }), Animated.timing(this.state.translateY, { toValue: ft.translateY, duration, + useNativeDriver: false, }), Animated.timing(this.state.scaleX, { toValue: ft.scaleX, duration, + useNativeDriver: false, }), Animated.timing(this.state.scaleY, { toValue: ft.scaleY, duration, + useNativeDriver: false, }), ]); return animates; diff --git a/components/Overlay/OverlayPullView.js b/components/Overlay/OverlayPullView.js index e26b28a..6c3aef3 100644 --- a/components/Overlay/OverlayPullView.js +++ b/components/Overlay/OverlayPullView.js @@ -49,6 +49,7 @@ export default class OverlayPullView extends OverlayView { Animated.spring(this.state.marginValue, { toValue: 0, friction: 9, + useNativeDriver: false, }) ); return animates; @@ -60,6 +61,7 @@ export default class OverlayPullView extends OverlayView { Animated.spring(this.state.marginValue, { toValue: this.marginSize, friction: 9, + useNativeDriver: false, }) ); return animates; diff --git a/components/Overlay/OverlayView.js b/components/Overlay/OverlayView.js index 01b9fd0..e323144 100644 --- a/components/Overlay/OverlayView.js +++ b/components/Overlay/OverlayView.js @@ -81,6 +81,7 @@ export default class OverlayView extends Component { Animated.timing(this.state.overlayOpacity, { toValue: this.overlayOpacity, duration, + useNativeDriver: false, }) ]; return animates; @@ -92,6 +93,7 @@ export default class OverlayView extends Component { Animated.timing(this.state.overlayOpacity, { toValue: 0, duration, + useNativeDriver: false, }) ]; return animates; diff --git a/components/Overlay/TopView.js b/components/Overlay/TopView.js index 7c29829..eb18d05 100644 --- a/components/Overlay/TopView.js +++ b/components/Overlay/TopView.js @@ -148,19 +148,19 @@ export default class TopView extends Component { }); if (animated) { let animates = [ - Animated.spring(translateX, {toValue: tx, friction: 9}), - Animated.spring(translateY, {toValue: ty, friction: 9}), - Animated.spring(scaleX, {toValue: sx, friction: 9}), - Animated.spring(scaleY, {toValue: sy, friction: 9}), + Animated.spring(translateX, {toValue: tx, friction: 9, useNativeDriver: false}), + Animated.spring(translateY, {toValue: ty, friction: 9, useNativeDriver: false}), + Animated.spring(scaleX, {toValue: sx, friction: 9, useNativeDriver: false}), + Animated.spring(scaleY, {toValue: sy, friction: 9, useNativeDriver: false}), ]; animatesOnly ? animatesOnly(animates) : Animated.parallel(animates).start(); } else { if (animatesOnly) { let animates = [ - Animated.timing(translateX, {toValue: tx, duration: 1}), - Animated.timing(translateY, {toValue: ty, duration: 1}), - Animated.timing(scaleX, {toValue: sx, duration: 1}), - Animated.timing(scaleY, {toValue: sy, duration: 1}), + Animated.timing(translateX, {toValue: tx, duration: 1, useNativeDriver: false}), + Animated.timing(translateY, {toValue: ty, duration: 1, useNativeDriver: false}), + Animated.timing(scaleX, {toValue: sx, duration: 1, useNativeDriver: false}), + Animated.timing(scaleY, {toValue: sy, duration: 1, useNativeDriver: false}), ]; animatesOnly(animates); } else { @@ -178,19 +178,19 @@ export default class TopView extends Component { let {animated, animatesOnly} = e; if (animated) { let animates = [ - Animated.spring(translateX, {toValue: 0, friction: 9}), - Animated.spring(translateY, {toValue: 0, friction: 9}), - Animated.spring(scaleX, {toValue: 1, friction: 9}), - Animated.spring(scaleY, {toValue: 1, friction: 9}), + Animated.spring(translateX, {toValue: 0, friction: 9, useNativeDriver: false}), + Animated.spring(translateY, {toValue: 0, friction: 9, useNativeDriver: false}), + Animated.spring(scaleX, {toValue: 1, friction: 9, useNativeDriver: false}), + Animated.spring(scaleY, {toValue: 1, friction: 9, useNativeDriver: false}), ]; animatesOnly ? animatesOnly(animates) : Animated.parallel(animates).start(); } else { if (animatesOnly) { let animates = [ - Animated.timing(translateX, {toValue: 0, duration: 1}), - Animated.timing(translateY, {toValue: 0, duration: 1}), - Animated.timing(scaleX, {toValue: 1, duration: 1}), - Animated.timing(scaleY, {toValue: 1, duration: 1}), + Animated.timing(translateX, {toValue: 0, duration: 1, useNativeDriver: false}), + Animated.timing(translateY, {toValue: 0, duration: 1, useNativeDriver: false}), + Animated.timing(scaleX, {toValue: 1, duration: 1, useNativeDriver: false}), + Animated.timing(scaleY, {toValue: 1, duration: 1, useNativeDriver: false}), ]; animatesOnly(animates); } else { diff --git a/components/SegmentedBar/SegmentedBar.js b/components/SegmentedBar/SegmentedBar.js index a452efc..e9a942e 100644 --- a/components/SegmentedBar/SegmentedBar.js +++ b/components/SegmentedBar/SegmentedBar.js @@ -139,8 +139,8 @@ export default class SegmentedBar extends Component { this._saveIndicatorWidthValue = indicatorWidthValue; if (this.props.animated) { Animated.parallel([ - Animated.spring(this._indicatorX, {toValue: indicatorXValue, friction: 9}), - Animated.spring(this._indicatorWidth, {toValue: indicatorWidthValue, friction: 9}), + Animated.spring(this._indicatorX, {toValue: indicatorXValue, friction: 9, useNativeDriver: false}), + Animated.spring(this._indicatorWidth, {toValue: indicatorWidthValue, friction: 9, useNativeDriver: false}), ]).start(); } else { this._indicatorX.setValue(indicatorXValue); diff --git a/components/TransformView/TransformView.js b/components/TransformView/TransformView.js index 2c6c584..5315d3d 100644 --- a/components/TransformView/TransformView.js +++ b/components/TransformView/TransformView.js @@ -261,6 +261,7 @@ export default class TransformView extends Component { toValue: newX, easing: Easing.elastic(0), duration: 100, + useNativeDriver: false, }) ); inertiaY && animates.push( @@ -268,6 +269,7 @@ export default class TransformView extends Component { toValue: newY, easing: Easing.elastic(0), duration: 100, + useNativeDriver: false, }) ); let canInertialMove = !onWillInertialMove || onWillInertialMove(translateX._value, translateY._value, newX, newY); @@ -321,6 +323,7 @@ export default class TransformView extends Component { toValue: newX, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }) ); newY !== null && animates.push( @@ -328,6 +331,7 @@ export default class TransformView extends Component { toValue: newY, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }) ); newScale !== null && animates.push( @@ -335,6 +339,7 @@ export default class TransformView extends Component { toValue: newScale, easing: Easing.elastic(0), duration: 200, + useNativeDriver: false, }) ); if (animates.length > 0) { diff --git a/components/Wheel/Wheel.js b/components/Wheel/Wheel.js index fc87054..1c2b6b8 100644 --- a/components/Wheel/Wheel.js +++ b/components/Wheel/Wheel.js @@ -58,11 +58,10 @@ export default class Wheel extends Component { } } - componentWillReceiveProps(nextProps) { - if (nextProps.index || nextProps.index === 0) { - this.index = nextProps.index; - this.currentPosition.setValue(nextProps.index * this.holeHeight); - } + componentDidUpdate(prevProps) { + if (this.props.index || this.props.index === 0) { + this.currentPosition.setValue(this.props.index * this.holeHeight); + } } createPanResponder() { @@ -139,6 +138,7 @@ export default class Wheel extends Component { Animated.spring(this.currentPosition, { toValue: toValue, friction: 9, + useNativeDriver: false, }).start(() => { this.currentPosition.setValue(toValue); this.props.onChange && this.props.onChange(newIndex); @@ -151,6 +151,7 @@ export default class Wheel extends Component { Animated.spring(this.currentPosition, { toValue: toValue, friction: 9, + useNativeDriver: false, }).start(() => { this.currentPosition.setValue(toValue); this.props.onChange && this.props.onChange(this.index); @@ -248,6 +249,7 @@ export default class Wheel extends Component { render() { let {style, children, items, itemStyle, holeStyle, maskStyle, holeLine, index, defaultIndex, onChange, onLayout, ...others} = this.props; + if (index || index === 0) this.index = index; this.lastRenderIndex = this.index; return ( *I@pcdGG)K_0~$(3JH6kz0bMd*=L`9Zq~ZH?3Y-o zC~GSN0H9)RW$plfqQq~-QSe`?_RARfLy2$YE(Cxv6U1*hASP}S04UqC%*^cV*YHF< z;Tj$vVQprH;0t(678?Qp|B84=KevbuO~TnkVfwi{B*b;Inea_?sb%WGKGj6kT>=il-gnFj!E3IYB>q6-VV z<<9c}d4T^!e}?+q7vHyL*w1nW5c`1|qvTryxC#Ce9kT4XsR(%e?-nX zxnTEeI7|89%#na^s9U(I@oFGA+I0Ry06~@q%%)8!P(auy9L1Dm*QBiCZ%?<919I{s z3!;86!B0$&e5CF7zOClv^q05T7fnH}IciL$T4Y>Qtlk8x1_hhKu>hdmS$y*wd0}`% zeeH{SW&^wRV_xDn?=~KiHvL`ow;OxqM*wO|idrjH)zy_M@bAi9@X7X0Sq@aV0Bfo{ zJ@A!EN0%u-3hdkyK<+l4mT=7ep5fFf%45c~%=A2#iFvh$_8tF%SFpGC@d(I)WA%BD^mfO*w_wDZXOGnw5y8(YV z>^Gl&Kk}t|(0kv0q%zi-4 zi+~I00Dy?>&M@P7azH`U@mBzFqjA!TQwOzd?kEC)`O(dDFPMxTdvjuH&bYXnQ*Y#G z$%CWJjmOT&F;p`hRU14-`PigGCX=0VsO2NBUQp0JIzHxw+LfDFvPwgZ`ijlXe63Nd zCnemPbYq9o2$Oq?6Ts=zknx_O<;X%st?1AZNYILKAow_hdtwfC#XEUog zoOAzqt>UHNR7BMNv~bmMy8~VKZ`YDkt47EzC) zO1v9KH#IbE{pdGVWrxbvyH=jFCwos`KRJ0)+GKRJ&B>8}Mn&Iq!j$23qP-5Q9_Bf_ z&HXfYgU0>`>XFn)m&l;VhSN^YLg$4~0#1){I^(Q*W~IxnR533LX3$!t9Hdu1d;U^>xb^y2_;;+ZP?(VU^@WPrEaD-*nA8IOv_5X{o?Pp?SXd zVO!7Tmpb3r_>Sz-@kOtY9p5M$Vb!FS@xWQTN?T8^CL-O1b|f%%bj+HW&TuKwAc6nj0k>g-d_<7W?z@;097vel2(x$kk? zsMX|STZh}rbq`;~C&wn=`ViiLUg^8iePvhXG`q`jvl2=%oO_kI%WE?8*RQ71jG!-t zO$xL-H2EWeM|NhN%tBThW$6W#21N&r?oQ}h@Fo9i*yrpQ0q-^6Eg895?xtLwT;^u& z&6gFt6?8{Lk2o=!IC9^}>!Z+PX&RebbOW9{Fq{m2a53;%XGeA z9?r6vRysa(N0DN+S`hDKr%lttYlY@oVlv;Mx=9cFg z?Rq7YZ(zsZ<7#7^4vFaJ>Z%g|(5i1L%unz$bSJupZy;|!tR8h~Vck}QsXcmF3pSd4S+m1#k3 z*2TQ^d1}$qbx%>0gK-Drk{nc6hpx;k!=%klvt!Pi7ok!cP|taw6S4C_N3C9`@I$2r zd%I0>(iMku_Tw~d(5L44FQ2sBKiw+RYT09aHS^o+PQ5W(G&f|1U$9TVaJf9)-~C+; zGTY+1rrsV$EkAv%heHO#pVd~fF@H_|r9)rsU%ELszh4_r^*+>LYsrZdX7jeV5+YL$ z-p}Wr`?%~6x&|1@aBf{2^<=rrrny>?t5W%?r_O!8uqeI$rR$PaPd2m%a4IUEFHU>V z(rndyyqTNY;huedapqc+Cy#ctshrh$x35lT6=(5t(Xqg_?V$x%3LX?F5J6(g@`u+_ zE8ib8Nct2QzsV!t*Cj zo`q?9>SScs2R%!-^s~!L2wQ(*{pe2?t<7siJa*Oj?CeWQ90!Aa)2yicy4YY|MQlrq z-&Ovyx#Mn`)ZP58`s9Z7uk0I-72dA8T~HmpDXm?x*(zXO2{qd%6_vy}YIH2KwQ+A! z{M40GEwj?T2eo2f(S7a`!(0=N#?Ll-*IBzI;#D#uIU#<@LZipgRRJ9~-O=72OFc5Z z%!(2gYKh+3q^;_>|KWKd0?#H9RN! zXxqG?xb@FXU)JV45te-})Au+MklA|YjZPYO*0U+;Gc(#h`+jQC@>70mQ{@pD=6}9B ztK#eH(O*`4DIWx_XHw2n@9N#v zy-^ro^zLN$*}}?=t?8{9)ps*>qi1&;f3yEk{Dpou`H@`*tzpBrZgj`C4_z}$j^F{n zw4CMSCUUd2q0)IAeUQQPg!KJ6e7Fn+0KtqwyFN4o@Xus019M z?}el(!`}=A3?|jVd{JL_@P9_gH6jt8ibnhS`RV)N^?3p>G?qf4pfNZ!4u^tUpo9Tj z5$KQN3iW!O^!qV~gmeLmFJkey2(e$#ljkEcLL$W-4ZQlUi^Cu2h%4-42UA4*gM2hr zAA=swh(RB);rj^KJws#A(GVNrKwOa!w!;o<2P3t$9WWiXI}T@9OQFcZ7ruf%BEwn= zodWm}+5r;sd<1mJ!WSNi-f)8#iX5OpxPQSF+|mK{VLX0ENM$FeE1|hKj{fam0BTG8Kav;-t6bPd;qnMZ^F_;16DKWG5_+ zN;IJ2$V0vS(Dr9PJO+yy@Rz&{wjAPvL8mf#0uCsmu{fX?gywU-4AFzaAuW5Nmuk%w zia;(MvNor|0(};XK_${X4KNr31C%G3L`E?n0v$yG@mLg|#AML6?8RYgJJejl zwK)u?$;L&0C1A#;}Ad&GP7Dq%e2_P1Q#X>|B#S=q9fkYCVZy+L>j3xDO zhdUbLOrj$@0bGuALH3X~;%i~RoiXWTCZ0fMq6|Pf1x3IUDDYJ=uqZN?f;V82=p-VO z+26%5ZX~+0VhQ263m6iQa8&jrJ4a~UkJ5exo7I!F_@F=tiPy9dvVTzzWVwMPCbsFx z4OEaWPIolAIM5-6A^HdD;IIZP`^;F9)A`pB^!guS{_8&c)<9fo3#HdpPpe-$5%QQK zKTrUfc)=0!SJrT^*B{M(c5jFlZx3wN|H4EFLEnFG8Zblz{`qxQCQ7h68zvYQ|&p1hzZ|M8g}RhZ7I+IjDwz zptA4%eTpV@urx(jTbLPODR7~W(}yVx+iqAt{dKkpd~Ohz!@?nh6i1jiLQFxgAEo^Y zxH=pDG{D5sF?gH-JXZufvv;mMAqEabHlX0iWD*183BsoV=>^`eT!VNFnSiCkuCbJV z>iX{;DTW(o@92LdGnBhDu7=_>G!;Igz~yq!enx|*OhPtfx_WeO;-d!Jr{^d^!eQVS z8Y}+WXF62_tb3*K4KDcJ8hYU7nnc78O}ziH z?}JzLA9E?`NY;rY6DblIE-7#%RWe+XOr%I;xTL_5RLO8jGLa&Y;gSMJQYFJB$wZ1o zhD!<@NtFzjBoiqT87?VsBvmq8l1!vXWVocjkyOcWNivZlk>Qd8M^YujCCNmJM21TW z97&Z7mn0J@5*aQja3obST#`(rNMyLAz>!qRa7i+eB9Y;e0!LCM!zIZ?ibRG>3LHt5 z43{JmDH0hjDR3lJGF*~Oq)24Aq`;9>$#6+Bks^`dk^)CkCBr4jM2bX)O9~uGl?<08 z6DblIE-7#%RWe+XOr%I;xTL_5RLO8jGLa&Y;gSMJQYFJB$wZ1oDlX;0$5lXF_!$*` z@WUuvKcruWA7p``TRGSQK;TRO2;K?+o!{ZlCIIlk0Kn_j@N?G=1ArFqz^c4O03bij z+T6s+zvA&zyAa!@lYq8r;`GVZ*1JZIId+geLuZq3Osb7L2wFT{R_-u6CX!*mV7WX< zozDcZXQq!S*s^Fh?!oN6y9j0VRn++BkGmpB)eC%@pDgeRN-H#~_RF&KC<_b-oTBm8 zb9`FGN})!vng3p@(eK5@&6xe0y$wV5J`cXHzW3OvM%%-4bLgk2%PxmCq7LillwDtT z*{+e}?;L!-We}epB>K6*|d&!L`@}A^$4zwxA#y4@|Y?}Q}}+% z>ddaCk1Q{QZ{Ae%c`;8*ZXwG@n zC^FJU=S0j&(b6z-4F0X;s&#g;^L5HPXXnn`G_rkJ`;pV90~h&GOGTItpHJ&mr#U-c zEnT~JT*t@To_h@QzFb&OU10Q9qphKQl4kr1o@Sd?`4sK=nlk0jW3TO4^xNl1WQYIO zmSe?AK^O16e-65e2yv+QO{(QOQ&o~L9=y5m)oNIhTQv5Y#?GXq7qhdVwpOy{)Mt;4 zvKVa^al1ozd_~Q*@k&gJUG}^y@sOWBHSomgrW1{gF6~WqjqOdFTSgG*{*MCn1N@rZ z<#fZUo;~Oau~Yv1)ugGszAP=z#F$i;wqTCubFN>(CI#TgwH;>Kiy1}Y=c8C#EHOW4 Ix_ZmM0N!!#TL1t6 literal 0 HcmV?d00001 diff --git a/package.json b/package.json index 65247f1..6076cbf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "teaset", - "version": "0.7.1", + "version": "0.7.4", "description": "A UI library for react native.", "main": "index.js", "scripts": {