I recently started to learn React-Native and I'm trying to create an authorization application right now. But when I tried to create a login form component I got an error like: "Objects are not valid as a React Child..."
Here is my complete .js file:
import React, {Component} from 'react';
import {View, TextInput} from 'react-native';
import Button from './common/Button';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {email: '', password: ''};
}
render() {
const {containerStyle, subContainerStyle, inputStyle} = styles;
return (
<View style={containerStyle}>
<View style={subContainerStyle}>
<TextInput>
placeholder="Email" style = {inputStyle}
value = {this.state.email}
onChangeText= {(email) => this.setState(email)}
</TextInput>
</View>
<View style={subContainerStyle}>
<TextInput>
placeholder="Email" style = {inputStyle}
value = {this.state.password}
onChangeText= {(password) => this.setState(password)}
</TextInput>
</View>
<View style={subContainerStyle}>
<Button onPress={() => console.log('pressed')}>Login</Button>
</View>
</View>
);
}
}
const styles = {
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
},
subContainerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative',
},
inputStyle: {
color: '#000',
paddingRight: 5,
paddingLeft: 5,
fontSize: 18,
lineHeight: 23,
flex: 2,
},
};
export default LoginForm;
I'm expecting to create a basic login page with user input email and password. But couldn't create it. I also import this form component which I showed you on top into my App.js just simple is that.
You should update render function like this.
render() {
const {containerStyle, subContainerStyle, inputStyle} = styles;
return (
<View style={containerStyle}>
<View style={subContainerStyle}>
<TextInput
placeholder="Email"
style = {inputStyle}
value = {this.state.email}
onChangeText= {(email) => this.setState({ email })}
/>
</View>
<View style={subContainerStyle}>
<TextInput
placeholder="Password"
style = {inputStyle}
value = {this.state.password}
onChangeText= {(password) => this.setState({password})}
/>
</View>
<View style={subContainerStyle}>
<Button onPress={() => console.log('pressed')}>Login</Button>
</View>
</View>
);
}