DEV Community

loading...

TextInput component for ReactNative ^0.54.2

chansuke profile image chansuke ・1 min read

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)

pic
Editor guide