diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index 3014fb1d040..cbddb935dc3 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -14,6 +14,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes'; import RNTesterText from '../../components/RNTesterText'; import * as React from 'react'; +import {useState} from 'react'; import { Platform, PlatformColor, @@ -699,6 +700,74 @@ function BoxSizingExample(): React.Node { ); } +function FocusableInnerRow({focusable}: {focusable: boolean}) { + const styles = StyleSheet.create({ + focused: { + borderColor: 'blue', + borderWidth: 2, + }, + innerBox: { + backgroundColor: 'red', + width: '100%', + height: 50, + borderColor: 'transparent', + borderWidth: 2, + }, + innerBoxTextColor: { + color: 'white', + }, + }); + const [focused, setFocused] = useState(false); + return ( + setFocused(false)} + onFocus={() => setFocused(true)} + style={[styles.innerBox, focused && styles.focused]}> + + Focusable: {focusable ? 'true' : 'false'} + + + Focused: {focused ? 'true' : 'false'} + + + ); +} + +function FocusBlurExample(): React.Node { + const styles = StyleSheet.create({ + focused: { + borderColor: 'blue', + borderWidth: 2, + }, + outerBox: { + backgroundColor: 'green', + borderColor: 'transparent', + borderWidth: 2, + padding: 10, + }, + outerBoxTextColor: { + color: 'white', + }, + }); + const [outerFocused, setOuterFocused] = useState(false); + return ( + setOuterFocused(false)} + onFocus={() => setOuterFocused(true)} + style={[styles.outerBox, outerFocused && styles.focused]}> + + Focused: {outerFocused ? 'true' : 'false'} + + + + + + + ); +} + export default ({ title: 'View', documentationURL: 'https://reactnative.dev/docs/view', @@ -1363,5 +1432,10 @@ export default ({ name: 'box-sizing', render: BoxSizingExample, }, + { + title: 'Focus/Blur', + name: 'focus-blur', + render: FocusBlurExample, + }, ], }: RNTesterModule);