DEV Community

chansuke
chansuke

Posted on

TextInput component for ReactNative ^0.54.2

zuckerburg

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

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

Discussion (0)