Add example for focus events on Android (#51725)

Summary:
Pull Request resolved: #51725

This change builds upon the focus/blur portion showcased in ViewExample but showcases several more components all in one spot. This can be shared with additional platforms or expanded to include more component examples like Image, but the goal is to target Android and not distract from the primary use cases.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D75747410

fbshipit-source-id: 7d53366d9f32192ca6b3da45dd127836fb6efdf6

Author: Abbondanzo

packages/rn-tester/js/examples/FocusEventsExample/FocusEventsExample.android.js

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+import RNTesterText from '../../components/RNTesterText';
+import {useState} from 'react';
+import {Alert, Pressable, StyleSheet, TextInput, View} from 'react-native';
+
+type SectionProps = {
+  children: React.Node,
+};
+
+const FocusEventSection = ({children}: SectionProps): React.Node => {
+  const [outerFocused, setOuterFocused] = useState(false);
+
+  return (
+    <View
+      onFocus={() => setOuterFocused(true)}
+      onBlur={() => setOuterFocused(false)}>
+      <RNTesterText style={styles.sectionSubtitle}>
+        Section focused: {outerFocused ? 'true' : 'false'}
+      </RNTesterText>
+      {children}
+    </View>
+  );
+};
+
+const ViewExampleInnerRow = ({focusable}: {focusable: boolean}) => {
+  const [focused, setFocused] = useState(false);
+  return (
+    <View
+      focusable={focusable}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      style={[styles.viewInnerRow]}>
+      <RNTesterText style={styles.viewInnerRowTextColor}>
+        Focusable: {focusable ? 'true' : 'false'}
+      </RNTesterText>
+      <RNTesterText style={styles.viewInnerRowTextColor}>
+        Focused: {focused ? 'true' : 'false'}
+      </RNTesterText>
+    </View>
+  );
+};
+
+const ViewExample = () => {
+  return (
+    <FocusEventSection>
+      <ViewExampleInnerRow focusable={true} />
+      <ViewExampleInnerRow focusable={true} />
+      <ViewExampleInnerRow focusable={false} />
+      <ViewExampleInnerRow focusable={true} />
+    </FocusEventSection>
+  );
+};
+
+const PressableExample = () => {
+  const [highlightFocused, setHighlightFocused] = useState(false);
+  const [pressableFocused, setPressableFocused] = useState(false);
+  const [disabledPressableFocused, setDisabledPressableFocused] =
+    useState(false);
+
+  return (
+    <FocusEventSection>
+      <Pressable
+        onPress={() => Alert.alert('Pressable pressed!')}
+        onFocus={() => setPressableFocused(true)}
+        onBlur={() => setPressableFocused(false)}>
+        <RNTesterText>
+          Pressable focused: {pressableFocused ? 'true' : 'false'}
+        </RNTesterText>
+      </Pressable>
+      <Pressable
+        disabled={true}
+        onPress={() => Alert.alert('Disabled Pressable pressed!')}
+        onFocus={() => setDisabledPressableFocused(true)}
+        onBlur={() => setDisabledPressableFocused(false)}>
+        <RNTesterText>
+          Disabled Pressable focused:{' '}
+          {disabledPressableFocused ? 'true' : 'false'}
+        </RNTesterText>
+      </Pressable>
+    </FocusEventSection>
+  );
+};
+
+const TextInputExample = () => {
+  const [input1Focused, setInput1Focused] = useState(false);
+  const [input2Focused, setInput2Focused] = useState(false);
+  const [input3Focused, setInput3Focused] = useState(false);
+
+  return (
+    <FocusEventSection>
+      <TextInput
+        onFocus={() => setInput1Focused(true)}
+        onBlur={() => setInput1Focused(false)}
+        style={[styles.textInput, input1Focused && styles.textInputFocused]}
+        placeholder={`Focused: ${input1Focused ? 'true' : 'false'}`}
+      />
+      <TextInput
+        onFocus={() => setInput2Focused(true)}
+        onBlur={() => setInput2Focused(false)}
+        style={[styles.textInput, input2Focused && styles.textInputFocused]}
+        placeholder={`Focused: ${input2Focused ? 'true' : 'false'}`}
+      />
+      <TextInput
+        onFocus={() => setInput3Focused(true)}
+        onBlur={() => setInput3Focused(false)}
+        style={[styles.textInput, input3Focused && styles.textInputFocused]}
+        placeholder={`Not editable focused: ${input3Focused ? 'true' : 'false'}`}
+        editable={false}
+      />
+    </FocusEventSection>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    rowGap: 16,
+  },
+  sectionSubtitle: {
+    paddingBottom: 8,
+  },
+  sectionTitle: {
+    paddingBottom: 2,
+    fontSize: 20,
+  },
+  sectionWrapperFocused: {
+    borderColor: 'blue',
+  },
+  textFocused: {
+    backgroundColor: 'lightblue',
+  },
+  textLink: {color: 'blue'},
+  textInput: {
+    borderColor: 'rgba(40, 40, 40, 0.3)',
+    borderRadius: 4,
+    borderWidth: 1,
+    marginTop: 4,
+  },
+  textInputFocused: {
+    borderColor: 'blue',
+  },
+  viewInnerRow: {
+    backgroundColor: '#424B54',
+    borderRadius: 8,
+    borderColor: 'transparent',
+    borderWidth: 2,
+    height: 50,
+    marginTop: 4,
+    padding: 4,
+    width: '100%',
+  },
+  viewInnerRowTextColor: {
+    color: 'white',
+  },
+});
+
+export default {
+  title: 'Focus Events',
+  description: 'Examples that show how Focus events can be used.',
+  examples: [
+    {
+      title: 'View Example',
+      render: function (): React.Node {
+        return <ViewExample />;
+      },
+    },
+    {
+      title: 'TextInput Example',
+      render: function (): React.Node {
+        return <TextInputExample />;
+      },
+    },
+    {
+      title: 'Pressable Example',
+      render: function (): React.Node {
+        return <PressableExample />;
+      },
+    },
+  ],
+};

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -225,6 +225,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     module: require('../examples/DisplayContents/DisplayContentsExample')
       .default,
   },
+  {
+    key: 'FocusEventsExample',
+    module: require('../examples/FocusEventsExample/FocusEventsExample')
+      .default,
+  },
   {
     key: 'InvalidPropsExample',
     module: require('../examples/InvalidProps/InvalidPropsExample'),