I have already created a web app and I need to convert it into a react-native-ios app. I have created a TextInput widget for the web app which does more than what the react-native TextInput componemt.
How could I overwrite core functionality of TextInput such as the onchange method.
How could I add extra functionality to the TextInput.
The web app's TextInput widget is written in JavaScript. I want to avoid objective-C, if at all possible.
Thanks.
If I understand correctly, there is nothing react-native specific you would need to do here. You just use standard react techniques for adding functionality to existing components. So you can create a component which wraps TextInput, which allows you to pass thought any prop TextInput accepts. And you can just as well provide additional props to your component for other requirements.
import * as React from 'react';
import {
TextInput
} from 'react-native';
class CustomInput extends React.Component {
constructor(props) {
this.state = {text: 'default text'}
}
render(): JSX.Element {
return (
<TextInput
{...this.props} // pass through props
value={this.state.text}
onChangeText={this.onChangeText} // update value as usual
onChange={this.props.doSomethingSpecial} // call custom prop function for custom behaviour
/>
);
}
onChangeText = (text) => {
this.setState({text});
}
}
export default CustomInput;
