ios InputText not english input bug

[charlzyx]

My React Native version is 0.33 and it seems this bug was fixed in 0.54, but i have not checked. https://github.com/facebook/react-native/issues/18403

Here is My Component

<Comp>
      <BlackPortal name="wow">
        <TextInput
          style={{ backgroundColor: 'gray', borderWidth: 2, borderColor: 'blue', height: 80, flex: 1 }}
          onChangeText={this.onChangeText}
          value={this.state.value}
        />
      </BlackPortal>
</Comp>

and AppRoot

<AppRoot>
   <Comp />
   <WhitePortal name="wow"></WhitePortal>
</AppRoot>

and there is a bug in not-english Keyboards, while mine is Chinese (Simplified) -Pinyin look at

and i also try Korean

the same bug, only in English , it can be worked well

Actually, i found this bug, because i have written an Portal very likely with your's, here is an simply code

import { View } from 'react-native';
import React, { Component } from 'react';
import mitt from 'mitt';

let uuid = 0;
const mitter = mitt();


const sendPortal = (uuidReactChildren) => {
  mitter.emit('portal_on_change', uuidReactChildren);
};

const rmPortal = (uuid) => {
  mitter.emit('portal_rm', uuid);
};



export default class Portal extends Component {
  constructor(props) {
    super(props);
    this.uuid = uuid++;
  }
  componentDidMount() {
    sendPortal({ children: this.props.children, uuid: this.uuid });
  }
  componentWillUpdate(nextProps) {
    sendPortal({ children: nextProps.children, uuid: this.uuid });
  }
  componentWillUnmount() {
    rmPortal(this.uuid);
  }
  render() {
    return null;
  }
}

const styleHelper = (isNull) => {
  if (isNull) {
    return {
      position: 'absolute',
      height: 0,
      width: 0,
    };
  }

  return {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
  };
};

export class PortalOut extends Component { // eslint-disable-line
  constructor(props) {
    super(props);
    this.state = {
      portals: [
        // {
        //   uuid: 'string',
        //   children: 'ReactChildren',
        // },
      ],
    };

    mitter.on('portal_on_change', (uuidReactChildren) => {
      const portals = this.state.portals;
      const uuid = uuidReactChildren.uuid;
      const reactChildren = uuidReactChildren.children;

      if (portals.some(protal => protal.uuid === uuid)) {
        portals.forEach((protal) => {
          if (protal.uuid === uuid) {
            protal.children = reactChildren;
          }
        });
        this.setState({ portals });
      } else {
        portals.push(uuidReactChildren);
        this.setState({ portals });
      }
    });
    mitter.on('portal_rm', (uuid) => {
      const portals = this.state.portals;
      const foundIndex = portals.findIndex(portal => portal.uuid === uuid);
      portals.splice(foundIndex, 1);
      this.setState({ portals });
    });
  }

  render() {
    const isNull = this.state.portals.filter(portal => !!portal.children).length === 0;
    return (React.createElement(View,
      { style: styleHelper(isNull) },
      this.state.portals.map(item => item.children)
    ));
  }
}

I cannot found how to resolve it. Hope you can found something and tell me. Really Hope.