DEV Community


Posted on

TextInput component for ReactNative ^0.54.2


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

Top comments (0)