playgroud

Author: Saadnajmi

packages/rn-tester/js/examples/Playground/RNTesterPlayground.js

@@ -12,21 +12,104 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTesterText from '../../components/RNTesterText';
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, TextInput, View} from 'react-native';
 
 function Playground() {
+  const [events, setEvents] = React.useState<Array<string>>([]);
+
+  const appendEvent = React.useCallback((label: string) => {
+    setEvents(currentEvents => [label, ...currentEvents].slice(0, 12));
+  }, []);
+
   return (
     <View style={styles.container}>
-      <RNTesterText>
-        Edit "RNTesterPlayground.js" to change this file
+      <RNTesterText style={styles.heading}>Local keyboard compat playground</RNTesterText>
+      <RNTesterText style={styles.copy}>
+        Tab into the focusable box or text input and try Enter, Tab, Shift+Enter,
+        and random keys. Only the keys listed in validKeysDown should log.
       </RNTesterText>
+
+      <View
+        enableFocusRing={true}
+        focusable={true}
+        onKeyDown={event => {
+          appendEvent(
+            `View onKeyDown: ${event.nativeEvent.key} shift=${String(event.nativeEvent.shiftKey)}`,
+          );
+        }}
+        style={styles.focusTarget}
+        validKeysDown={['Enter', 'Tab']}
+      >
+        <RNTesterText>Focusable View using validKeysDown=[&quot;Enter&quot;, &quot;Tab&quot;]</RNTesterText>
+      </View>
+
+      <TextInput
+        defaultValue="Focus me and try Enter or Shift+Enter"
+        multiline={true}
+        onKeyDown={event => {
+          appendEvent(
+            `TextInput onKeyDown: ${event.nativeEvent.key} shift=${String(event.nativeEvent.shiftKey)}`,
+          );
+        }}
+        style={styles.input}
+        validKeysDown={['Enter']}
+      />
+
+      <View style={styles.logPanel}>
+        <RNTesterText style={styles.logHeading}>Recent events</RNTesterText>
+        {events.length === 0 ? (
+          <RNTesterText style={styles.logLine}>No matching events yet.</RNTesterText>
+        ) : (
+          events.map((event, index) => (
+            <RNTesterText key={`${event}-${index}`} style={styles.logLine}>
+              {event}
+            </RNTesterText>
+          ))
+        )}
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
+    gap: 12,
+    padding: 16,
+  },
+  heading: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  copy: {
+    lineHeight: 20,
+  },
+  focusTarget: {
+    borderColor: '#888',
+    borderRadius: 8,
+    borderWidth: 1,
+    minHeight: 64,
+    padding: 12,
+  },
+  input: {
+    borderColor: '#888',
+    borderRadius: 8,
+    borderWidth: 1,
+    minHeight: 96,
+    padding: 12,
+  },
+  logPanel: {
+    borderColor: '#ddd',
+    borderRadius: 8,
+    borderWidth: 1,
+    minHeight: 120,
+    padding: 12,
+  },
+  logHeading: {
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  logLine: {
+    marginBottom: 4,
   },
 });