This repository was archived by the owner on Nov 16, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
This repository was archived by the owner on Nov 16, 2025. It is now read-only.
ios InputText not english input bug #9
Copy link
Copy link
Open
Description
My React Native version is 0.33
and it seems this bug was fixed in 0.54, but i have not checked.
facebook/react-native#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

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.
Metadata
Metadata
Assignees
Labels
No labels
