I embarked on my journey to learn React Native just 4-5 days ago, and already I am diving into creating a login screen in React Native. However, I have hit a roadblock and despite my efforts, I am unable to resolve the issue. Could you please lend me your expertise? You can view the code and error screenshot here.
App.js
import React, { Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/screens/Login';
export default class App extends Component {
render() {
return (
<Login />
);
}
}
Here is the Login screen code
Login.js
import React, { Component} from 'react';
import { StyleSheet, TextInput, View, Image, StatusBar, Dimensions } from 'react-native';
import { LinearGradient } from 'expo';
import EStyleSheet from 'react-native-extended-stylesheet';
import { Button } from '../components/Button';
import { Ionicons } from '@expo/vector-icons';
const {width: WIDTH} = Dimensions.get('window')
EStyleSheet.build();
export default class Login extends Component {
render() {
return (
<LinearGradient
colors={['#38E870', '#2BB256']}
style={styles.container}>
<StatusBar barStyle="light-content" />
<View style={styles.logocontainer}>
<Image source={require('../images/Devastic.png/')} />
</View>
<View style={styles.formContainer}>
<View style={styles.inputcontainer}>
<Ionicons name="ios-person-outline" size={36} color="#747475"
style={styles.inputemail}/>
<TextInput
placeholder={'Enter Your Email'}
underlineColorAndroid={'transparent'}
placeholderTextColor="#dfe6e9"
style={styles.input}
/>
<Ionicons name="ios-unlock-outline" size={34} color="#747475"
style={styles.inputpass}/>
<TextInput
placeholder={'Enter Your Password'}
secureTextEntry={true}
underlineColorAndroid={'transparent'}
placeholderTextColor="#dfe6e9"
style={styles.input}
/>
<Button
text="Log In"
onPress={() => console.log ("Pressed")}
/>
</View>
</View>
</LinearGradient>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
logocontainer: {
paddingTop: 50,
},
formContainer: {
backgroundColor: '#FFF',
marginTop: 180,
width: 360,
height: 340,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.6,
shadowRadius: 6,
elevation: 8,
},
inputcontainer: {
marginTop: 30,
},
inputemail: {
position: 'absolute',
left: 18,
top: 13,
},
inputpass: {
position: 'absolute',
left: 18,
top: 77,
},
input: {
width: WIDTH -50 ,
height: 44,
padding: 10,
paddingLeft: 40,
marginVertical: 10,
marginHorizontal: 10,
borderWidth: 1,
borderRadius: 20,
borderColor: 'black',
marginBottom: 10,
}
});
Here is the Button.js File code
import React from 'react';
import { View, TouchableHighlight, TouchableNativeFeedback, Text, Platform } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
$buttonColor: '#38E870',
$buttonTextColor: '#ffffff',
$buttonUnderlayColor: '#2BB256',
button: {
backgroundColor: '$buttonColor',
paddingVertical: 10,
paddingHorizontal: 30,
marginHorizontal: 12,
borderRadius: 40,
marginTop: 20,
},
text: {
color: '$buttonTextColor',
fontSize: 18,
textAlign: 'center',
fontWeight: 'bold',
},
});
export const Button = ({ text, onPress }) => {
if (Platform.OS === 'ios') {
return (
<TouchableHighlight
onPress={onPress}
style={styles.button}
underlayColor={styles.$buttonUnderlayColor}
>
<Text style={styles.text}>{text}</Text>
</TouchableHighlight>
);
}
return (
<TouchableNativeFeedback
onPress={onPress}
background={TouchableNativeFeedback.Ripple(styles.$buttonUnderlayColor)}
>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableNativeFeedback>
);
};