chore: add TextInput event propagation scenario

Author: mdjastrzebski

experiments-app/src/Experiments/TextInputEventPropagation.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+const handlePressIn = buildEventLogger('pressIn');
+const handlePressOut = buildEventLogger('pressOut');
+const handleFocus = buildEventLogger('focus');
+const handleBlur = buildEventLogger('blur');
+const handleChange = buildEventLogger('change');
+const handleSubmitEditing = buildEventLogger('submitEditing');
+
+const handlePressablePress = buildEventLogger('Pressable.press');
+
+export function TextInputEventPropagation() {
+  const [value, setValue] = React.useState('');
+
+  const handleChangeText = (value: string) => {
+    setValue(value);
+    console.log(`Event: changeText`, value);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Pressable onPress={handlePressablePress}>
+        <TextInput
+          style={styles.textInput}
+          value={value}
+          editable={true}
+          onChangeText={handleChangeText}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onSubmitEditing={handleSubmitEditing}
+        />
+      </Pressable>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  textInput: {
+    backgroundColor: 'white',
+    margin: 20,
+    padding: 8,
+    fontSize: 18,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});

experiments-app/src/Experiments/TextInputEvents.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
-import { buildEventLogger } from './helpers';
+import { buildEventLogger } from '../utils/helpers';
 
 const handlePressIn = buildEventLogger('pressIn');
 const handlePressOut = buildEventLogger('pressOut');
 const handleFocus = buildEventLogger('focus');
 const handleBlur = buildEventLogger('blur');
 const handleChange = buildEventLogger('change');
+const handleSubmitEditing = buildEventLogger('submitEditing');
 
 export function TextInputEvents() {
-  const [value, setValue] = React.useState('Regular TextInput');
+  const [value, setValue] = React.useState('');
 
   const handleChangeText = (value: string) => {
     setValue(value);
@@ -21,13 +22,14 @@ export function TextInputEvents() {
       <TextInput
         style={styles.textInput}
         value={value}
+        editable={true}
         onChangeText={handleChangeText}
-        editable={false}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={handleChange}
+        onSubmitEditing={handleSubmitEditing}
       />
     </SafeAreaView>
   );

experiments-app/src/experiments.ts

@@ -1,4 +1,5 @@
-import { TextInputEvents } from './Experiments/TextInputEvents';
+import { TextInputEventPropagation } from './experiments/TextInputEventPropagation';
+import { TextInputEvents } from './experiments/TextInputEvents';
 
 export type Experiment = (typeof experiments)[number];
 
@@ -8,4 +9,9 @@ export const experiments = [
     title: 'TextInput Events',
     component: TextInputEvents,
   },
+  {
+    key: 'textInputEventPropagation',
+    title: 'TextInput Event Propagation',
+    component: TextInputEventPropagation,
+  },
 ];