From 3d7973a3e64bc054f436744c591dc51ee617ffad Mon Sep 17 00:00:00 2001
From: Peter Abbondanzo <abbo@meta.com>
Date: Wed, 28 May 2025 21:29:51 -0700
Subject: [PATCH] Add focus/blur example to RNTester (#51634)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51634

Creates an example in the ViewExample setup for how onBlur/onFocus behave when using keyboard navigation

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D75238317

fbshipit-source-id: e69122ca17727fc7f71e9bb7a09098a2771b098e
---
 .../rn-tester/js/examples/View/ViewExample.js | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

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 (
+    <View
+      accessible={focusable}
+      focusable={focusable}
+      onBlur={() => setFocused(false)}
+      onFocus={() => setFocused(true)}
+      style={[styles.innerBox, focused && styles.focused]}>
+      <RNTesterText style={styles.innerBoxTextColor}>
+        Focusable: {focusable ? 'true' : 'false'}
+      </RNTesterText>
+      <RNTesterText style={styles.innerBoxTextColor}>
+        Focused: {focused ? 'true' : 'false'}
+      </RNTesterText>
+    </View>
+  );
+}
+
+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 (
+    <View
+      onBlur={() => setOuterFocused(false)}
+      onFocus={() => setOuterFocused(true)}
+      style={[styles.outerBox, outerFocused && styles.focused]}>
+      <RNTesterText style={styles.outerBoxTextColor}>
+        Focused: {outerFocused ? 'true' : 'false'}
+      </RNTesterText>
+      <FocusableInnerRow focusable={true} />
+      <FocusableInnerRow focusable={true} />
+      <FocusableInnerRow focusable={false} />
+      <FocusableInnerRow focusable={true} />
+    </View>
+  );
+}
+
 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);