diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
index 7c313cbf185..7c06a2b830b 100644
--- a/packages/rn-tester/js/examples/Touchable/TouchableExample.js
+++ b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
@@ -479,6 +479,105 @@ const remoteImage = {
uri: 'https://www.facebook.com/favicon.ico',
};
+const TouchableHighlightUnderlayMethods = () => {
+ const [underlayVisible, setUnderlayVisible] = useState(
+ 'Underlay not visible',
+ );
+
+ const hiddenUnderlay = () => {
+ setUnderlayVisible('Press to make underlay visible');
+ };
+
+ const shownUnderlay = () => {
+ setUnderlayVisible('Underlay visible');
+ };
+ return (
+ {
+ console.log('TouchableHighlight underlay shown!');
+ }}>
+ {underlayVisible}
+
+ );
+};
+
+const TouchableTouchSoundDisabled = () => {
+ const [soundEnabled, setSoundEnabled] = useState(false);
+ const toggleTouchableSound = () => {
+ soundEnabled ? setSoundEnabled(false) : setSoundEnabled(true);
+ };
+ return (
+ <>
+ {Platform.OS === 'android' ? (
+ <>
+ console.log('touchSoundDisabled pressed!')}>
+
+ Touchables make a sound on Android, which can be turned off.
+
+
+
+
+ {soundEnabled
+ ? 'Disable Touchable Sound'
+ : 'Enable Touchable Sound'}
+
+
+ >
+ ) : null}
+ >
+ );
+};
+
+function TouchableOnFocus>() {
+ const ref = useRef | {focus: Function}>(null);
+ const [isFocused, setIsFocused] = useState(false);
+ const [focusStatus, setFocusStatus] = useState(
+ 'This touchable is not focused.',
+ );
+ const [isBlurred, setIsBlurred] = useState(
+ 'This item still has focus, onBlur is not called',
+ );
+
+ const toggleFocus = () => {
+ isFocused
+ ? setFocusStatus('This touchable is focused')
+ : setIsFocused('This touchable is not focused') &&
+ setIsBlurred('This item has lost focus, onBlur called');
+ };
+ const focusTouchable = () => {
+ if (ref.current) {
+ ref.current.focus();
+ }
+ };
+
+ return (
+
+
+ {focusStatus}
+ {'\n'}
+ {isBlurred}
+
+
+ );
+}
+
const styles = StyleSheet.create({
row: {
justifyContent: 'center',
@@ -603,6 +702,24 @@ exports.examples = [
);
},
},
+ {
+ title: 'TouchableHighlight Underlay Visibility',
+ render: function(): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Touchable Touch Sound',
+ render: function(): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Touchable onFocus',
+ render: function(): React.Node {
+ return ;
+ },
+ },
{
title: ' with highlight',
render: function(): React.Element {