feat: support 'editable' prop on TextInput (#517)

* test: Add tests for non-editable TextInput

* feat: use editable prop to check for event handling

Author: pplytas

src/__tests__/fireEvent.test.js

@@ -193,6 +193,46 @@ test('should not fire on disabled Pressable', () => {
   expect(handlePress).not.toHaveBeenCalled();
 });
 
+test('should not fire on non-editable TextInput', () => {
+  const placeholder = 'Test placeholder';
+  const onChangeTextMock = jest.fn();
+  const NEW_TEXT = 'New text';
+
+  const { getByPlaceholderText } = render(
+    <View>
+      <TextInput
+        editable={false}
+        placeholder={placeholder}
+        onChangeText={onChangeTextMock}
+      />
+    </View>
+  );
+
+  fireEvent.changeText(getByPlaceholderText(placeholder), NEW_TEXT);
+  expect(onChangeTextMock).not.toHaveBeenCalled();
+});
+
+test('should not fire on non-editable TextInput with nested Text', () => {
+  const placeholder = 'Test placeholder';
+  const onChangeTextMock = jest.fn();
+  const NEW_TEXT = 'New text';
+
+  const { getByPlaceholderText } = render(
+    <View>
+      <TextInput
+        editable={false}
+        placeholder={placeholder}
+        onChangeText={onChangeTextMock}
+      >
+        <Text>Test text</Text>
+      </TextInput>
+    </View>
+  );
+
+  fireEvent.changeText(getByPlaceholderText(placeholder), NEW_TEXT);
+  expect(onChangeTextMock).not.toHaveBeenCalled();
+});
+
 test('should pass event up on disabled TouchableOpacity', () => {
   const handleInnerPress = jest.fn();
   const handleOuterPress = jest.fn();

src/fireEvent.js

@@ -2,6 +2,12 @@
 import act from './act';
 import { ErrorWithStack } from './helpers/errors';
 
+const isTextInputComponent = (element: ReactTestInstance) => {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  const { TextInput } = require('react-native');
+  return element.type === TextInput;
+};
+
 const findEventHandler = (
   element: ReactTestInstance,
   eventName: string,
@@ -14,8 +20,11 @@ const findEventHandler = (
 
   const isHostComponent = typeof element.type === 'string';
   const hostElement = isHostComponent ? element : nearestHostDescendent;
-  const isEventEnabled =
-    hostElement?.props.onStartShouldSetResponder?.() !== false;
+
+  const isEventEnabled = isTextInputComponent(element)
+    ? element.props.editable !== false
+    : hostElement?.props.onStartShouldSetResponder?.() !== false;
+
   if (handler && isEventEnabled) return handler;
 
   // Do not bubble event to the root element