RN-FORMS

React Native - onChange() Event

May 16, 2025

 In React Native, the onChange event is commonly used with input components like TextInput to track changes in their value as the user types.

However, unlike React for web, in React Native, the more common and preferred way to handle text input changes is by using the onChangeText prop rather than onChange.

  import React, { useState } from 'react';
  import { View, TextInput, Text } from 'react-native';

  const MyComponent = () => {
    const [text, setText] = useState('');

    return (
      <View>
        <TextInput
          placeholder="Type something"
          value={text}
          onChangeText={setText}
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        />
        <Text>You typed: {text}</Text>
      </View>
    );
  };

  export default MyComponent;