fix: ripple should be applied when borderless == false

facebook · Apr 4, 2020 · 33d16d0 · 33d16d0
1 parent caa7829
commit 33d16d0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 27 deletions.
diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -47,13 +47,12 @@ export default function useAndroidRippleForView(
   |}>,
 |}> {
   const {color, borderless, radius} = rippleConfig ?? {};
-  const normalizedBorderless = borderless === true;
 
   return useMemo(() => {
     if (
       Platform.OS === 'android' &&
       Platform.Version >= 21 &&
-      (color != null || normalizedBorderless || radius != null)
+      (color != null || borderless != null || radius != null)
     ) {
       const processedColor = processColor(color);
       invariant(
@@ -67,7 +66,7 @@ export default function useAndroidRippleForView(
           nativeBackgroundAndroid: {
             type: 'RippleAndroid',
             color: processedColor,
-            borderless: normalizedBorderless,
+            borderless: borderless === true,
             rippleRadius: radius,
           },
         },
@@ -101,5 +100,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, normalizedBorderless, radius, viewRef]);
+  }, [color, borderless, radius, viewRef]);
 }
diff --git a/RNTester/js/examples/Pressable/PressableExample.js b/RNTester/js/examples/Pressable/PressableExample.js
@@ -378,40 +378,50 @@ exports.examples = [
   },
   {
     title: 'Pressable with custom Ripple',
-    description: ("Pressable can specify ripple's radius and borderless params": string),
+    description: ("Pressable can specify ripple's radius, color and borderless params": string),
     platform: 'android',
     render: function(): React.Node {
       const nativeFeedbackButton = {
         textAlign: 'center',
         margin: 10,
       };
       return (
-        <View
-          style={[
-            styles.row,
-            {justifyContent: 'space-around', alignItems: 'center'},
-          ]}>
-          <Pressable
-            android_ripple={{color: 'orange', borderless: true, radius: 30}}>
-            <View>
-              <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 30
-              </Text>
-            </View>
-          </Pressable>
+        <View>
+          <View
+            style={[
+              styles.row,
+              {justifyContent: 'space-around', alignItems: 'center'},
+            ]}>
+            <Pressable
+              android_ripple={{color: 'orange', borderless: true, radius: 30}}>
+              <View>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 30
+                </Text>
+              </View>
+            </Pressable>
 
-          <Pressable android_ripple={{borderless: true, radius: 150}}>
-            <View>
-              <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 150
-              </Text>
-            </View>
-          </Pressable>
+            <Pressable android_ripple={{borderless: true, radius: 150}}>
+              <View>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 150
+                </Text>
+              </View>
+            </Pressable>
+
+            <Pressable android_ripple={{borderless: false, radius: 70}}>
+              <View style={styles.block}>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 70, with border
+                </Text>
+              </View>
+            </Pressable>
+          </View>
 
-          <Pressable android_ripple={{borderless: false, radius: 70}}>
+          <Pressable android_ripple={{borderless: false}}>
             <View style={styles.block}>
               <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 70, with border
+                with border, default color and radius
               </Text>
             </View>
           </Pressable>