add ripple radius example

facebook · Feb 14, 2020 · 7cd895d · 7cd895d
1 parent 5de2ce0
commit 7cd895d
Showing 1 changed file with 57 additions and 22 deletions.
diff --git a/RNTester/js/examples/Touchable/TouchableExample.js b/RNTester/js/examples/Touchable/TouchableExample.js
@@ -401,35 +401,63 @@ class TouchableDisabled extends React.Component<{...}> {
         </TouchableWithoutFeedback>
 
         {Platform.OS === 'android' && (
-          <TouchableNativeFeedback
-            onPress={() => console.log('custom TNF has been clicked')}
-            background={TouchableNativeFeedback.SelectableBackground()}>
-            <View style={[styles.row, styles.block]}>
-              <Text style={[styles.button, styles.nativeFeedbackButton]}>
-                Enabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
-        )}
+          <>
+            <TouchableNativeFeedback
+              onPress={() => console.log('custom TNF has been clicked')}
+              background={TouchableNativeFeedback.SelectableBackground()}>
+              <View style={[styles.row, styles.block]}>
+                <Text style={[styles.button, styles.nativeFeedbackButton]}>
+                  Enabled TouchableNativeFeedback
+                </Text>
+              </View>
+            </TouchableNativeFeedback>
 
-        {Platform.OS === 'android' && (
-          <TouchableNativeFeedback
-            disabled={true}
-            onPress={() => console.log('custom TNF has been clicked')}
-            background={TouchableNativeFeedback.SelectableBackground()}>
-            <View style={[styles.row, styles.block]}>
-              <Text
-                style={[styles.disabledButton, styles.nativeFeedbackButton]}>
-                Disabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
+            <TouchableNativeFeedback
+              disabled={true}
+              onPress={() => console.log('custom TNF has been clicked')}
+              background={TouchableNativeFeedback.SelectableBackground()}>
+              <View style={[styles.row, styles.block]}>
+                <Text
+                  style={[styles.disabledButton, styles.nativeFeedbackButton]}>
+                  Disabled TouchableNativeFeedback
+                </Text>
+              </View>
+            </TouchableNativeFeedback>
+          </>
         )}
       </View>
     );
   }
 }
 
+function CustomRippleRadius() {
+  if (Platform.OS !== 'android') {
+    return null;
+  }
+  return (
+    <View style={[styles.row, styles.block, {justifyContent: 'space-around'}]}>
+      <TouchableNativeFeedback
+        onPress={() => console.log('custom TNF has been clicked')}
+        background={TouchableNativeFeedback.Ripple('orange', true, 30)}>
+        <View>
+          <Text style={[styles.button, styles.nativeFeedbackButton]}>
+            radius 30
+          </Text>
+        </View>
+      </TouchableNativeFeedback>
+      <TouchableNativeFeedback
+        onPress={() => console.log('custom TNF has been clicked')}
+        background={TouchableNativeFeedback.SelectableBackgroundBorderless(50)}>
+        <View>
+          <Text style={[styles.button, styles.nativeFeedbackButton]}>
+            radius 50
+          </Text>
+        </View>
+      </TouchableNativeFeedback>
+    </View>
+  );
+}
+
 const remoteImage = {
   uri: 'https://www.facebook.com/favicon.ico',
 };
@@ -611,4 +639,11 @@ exports.examples = [
       return <TouchableDisabled />;
     },
   },
+  {
+    title: 'Custom Ripple Radius (Android-only)',
+    description: ('Ripple radius on TouchableNativeFeedback can be controlled': string),
+    render: function(): React.Element<any> {
+      return <CustomRippleRadius />;
+    },
+  },
 ];