higher order component / state sharing example

example1.tsx

interface IComponentAProps {
	fromB: string;
	onChange: (t: string) => void;
}

class ComponentA extends Component<IComponentAProps, void> {

	render() {
		return (
			<View>
				<Text>{this.props.fromB}</Text>
				<TextInput onChangeText={this.props.onChange} />
			</View>
		)
	}
}

interface IComponentBProps {
	fromA: string;
	onChange: (t: string) => void;
}

class ComponentB extends Component<IComponentBProps, void> {

	render() {
		return (
			<View>
				<Text>{this.props.fromA}</Text>
				<TextInput onChangeText={this.props.onChange} />
			</View>
		)
	}
}

class CWrapper extends Component {
	constructor(props) {
		super(props);
		this.state = {
			aString: '',
			bString: '',
		}
	}
	
	render() {
		return (
			<View>
				<ComponentA onChange={(aChange: string) => this.setState({ aString: aChange })} fromB={this.state.bString} />
				<ComponentB onChange={(bChange: string) => this.setState({ bString: bChange })} fromA={this.state.aString} />
			</View>
		)
	}
}