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);