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 (
-      <TouchableOpacity style={this.buildStyle()} {...others}>
+      <TouchableOpacity style={style} disabled={disabled} activeOpacity={activeOpacity} {...others} ref='touchableOpacity'>
         {this.renderTitle()}
       </TouchableOpacity>
     );
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 (
       <TouchableOpacity
-        style={this.buildStyle()}
+        style={style}
+        disabled={disabled}
+        activeOpacity={activeOpacity}
         onPress={e => {
           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 (
+      <Animated.View
+        accessible={this.props.accessible !== false}
+        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityHint={this.props.accessibilityHint}
+        accessibilityRole={this.props.accessibilityRole}
+        accessibilityState={this.props.accessibilityState}
+        accessibilityActions={this.props.accessibilityActions}
+        onAccessibilityAction={this.props.onAccessibilityAction}
+        accessibilityValue={this.props.accessibilityValue}
+        importantForAccessibility={this.props.importantForAccessibility}
+        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
+        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
+        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        style={[this.props.style, {opacity: this.state.anim}]}
+        nativeID={this.props.nativeID}
+        testID={this.props.testID}
+        onLayout={this.props.onLayout}
+        nextFocusDown={this.props.nextFocusDown}
+        nextFocusForward={this.props.nextFocusForward}
+        nextFocusLeft={this.props.nextFocusLeft}
+        nextFocusRight={this.props.nextFocusRight}
+        nextFocusUp={this.props.nextFocusUp}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
+        hitSlop={this.props.hitSlop}
+        focusable={
+          this.props.focusable !== false && this.props.onPress !== undefined
+        }
+        ref='animatedView'
+        {...eventHandlersWithoutBlurAndFocus}>
+        {this.props.children}
+      </Animated.View>
+    );
+  }
+
+}
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 (
       <View
diff --git a/icons/back.png b/icons/back.png
new file mode 100644
index 0000000..fef0252
Binary files /dev/null and b/icons/back.png differ
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": {