Converting a react redux block to react native - reactjs

Question

I am new to react native,I have a block of code for a form in react, need to convert this into react native elements using the same let variable AddTodo
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}>
<input ref={node => {
input = node
}} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
Can anyone help me here? This is the source code

Answer 1

Here is simple code for react-native, that convert from your react code.
You can find more about react-native here.
in html we use for group other element so for react-native using
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class AddTodo extends Component {
constructor(props) {
super(props);
this.state = {
todoText: ''
};
}
render() {
return (
<View>
<TextInput
onChangeText={(todoText) => this.setState({todoText})}
value={this.state.todoText}
/>
<TouchableHighlight onPress={() => {
if(this.state.todoText) {
this.props.addTodo(input.value);
this.setState({ todoText: '' })
}
}}>
<Text>Add Todo</Text>
</TouchableHighlight>
</View>
);
}
}
function mapStateToProps(state) {
return {};
}
function mapDispatchToProps(dispatch) {
return {
addTodo: bindActionCreators(addTodo, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);
You can find react-native redux todo example here