fix: fix TouchableItem opacity on press on iOS

react-navigation · Jul 28, 2020 · 40e2dba · 40e2dba
1 parent b0cafb3
commit 40e2dba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 34 deletions.
diff --git a/packages/drawer/src/views/TouchableItem.ios.tsx b/packages/drawer/src/views/TouchableItem.ios.tsx
@@ -10,27 +10,26 @@ type Props = React.ComponentProps<typeof BaseButton> & {
 
 const useNativeDriver = Platform.OS !== 'web';
 
-export default class BorderlessButton extends React.Component<Props> {
+export default class TouchableItem extends React.Component<Props> {
   static defaultProps = {
     activeOpacity: 0.3,
     borderless: true,
+    enabled: true,
   };
 
   private opacity = new Animated.Value(1);
 
   private handleActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      Animated.spring(this.opacity, {
-        stiffness: 1000,
-        damping: 500,
-        mass: 3,
-        overshootClamping: true,
-        restDisplacementThreshold: 0.01,
-        restSpeedThreshold: 0.01,
-        toValue: active ? this.props.activeOpacity : 1,
-        useNativeDriver,
-      }).start();
-    }
+    Animated.spring(this.opacity, {
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: true,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+      toValue: active ? this.props.activeOpacity : 1,
+      useNativeDriver,
+    }).start();
 
     this.props.onActiveStateChange?.(active);
   };
@@ -43,10 +42,7 @@ export default class BorderlessButton extends React.Component<Props> {
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}
-        style={[
-          style,
-          Platform.OS === 'ios' && enabled && { opacity: this.opacity },
-        ]}
+        style={[style, enabled && { opacity: this.opacity }]}
       >
         {children}
       </AnimatedBaseButton>

diff --git a/packages/stack/src/views/TouchableItem.ios.tsx b/packages/stack/src/views/TouchableItem.ios.tsx
@@ -10,27 +10,26 @@ type Props = React.ComponentProps<typeof BaseButton> & {
 
 const useNativeDriver = Platform.OS !== 'web';
 
-export default class BorderlessButton extends React.Component<Props> {
+export default class TouchableItem extends React.Component<Props> {
   static defaultProps = {
     activeOpacity: 0.3,
     borderless: true,
+    enabled: true,
   };
 
   private opacity = new Animated.Value(1);
 
   private handleActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      Animated.spring(this.opacity, {
-        stiffness: 1000,
-        damping: 500,
-        mass: 3,
-        overshootClamping: true,
-        restDisplacementThreshold: 0.01,
-        restSpeedThreshold: 0.01,
-        toValue: active ? this.props.activeOpacity : 1,
-        useNativeDriver,
-      }).start();
-    }
+    Animated.spring(this.opacity, {
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: true,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+      toValue: active ? this.props.activeOpacity : 1,
+      useNativeDriver,
+    }).start();
 
     this.props.onActiveStateChange?.(active);
   };
@@ -43,10 +42,7 @@ export default class BorderlessButton extends React.Component<Props> {
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}
-        style={[
-          style,
-          Platform.OS === 'ios' && enabled && { opacity: this.opacity },
-        ]}
+        style={[style, enabled && { opacity: this.opacity }]}
       >
         {children}
       </AnimatedBaseButton>