DEV Community


TextInput component for ReactNative ^0.54.2

chansuke profile image chansuke ・1 min read


From v0.54.2, a behavior of TextInput has changed a bit.If you use onChangeText with value or 'defaultValue', Japanese(and any other non-alphabetic text) text input is not available by default.
If you want to input the non-alphabetic text, value(or defaultValue) is need to be treated as props.So create an another TextInput component to catch the props value is the one of the solution.

Create the component.

import React, { Component } from 'react';
import { Platform, TextInput } from 'react-native';

class CustomTextInput extends Component {
  shouldComponentUpdate(nextProps) {
    return Platform.OS !== 'ios' || this.props.value === nextProps.value;
  render() {
    return <TextInput {...this.props} />;

export default CustomTextInput;
Enter fullscreen mode Exit fullscreen mode

And send the value as props

    height: 40,
    borderColor: 'gray',
    borderRadius: 5,
    borderWidth: 1,
    backgroundColor: 'white',
    margin: 5
  onChangeText={value => this.setState({ value })}
  placeholder="Enter your name"
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Editor guide