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 {