This is the code of the first screen (Splash Screen) -
import React from "react";
import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
StatusBar,
Image,
} from "react-native";
import * as Animatable from "react-native-animatable";
// import LinearGradient from "react-native-linear-gradient";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import { useTheme } from "@react-navigation/native";
const SplashScreen = ({ navigation }) => {
const { colors } = useTheme();
return (
<View style={styles.container}>
<StatusBar backgroundColor="#009387" barStyle="light-content" />
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require("../assets/logo.png")}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[
styles.footer,
{
backgroundColor: colors.background,
},
]}
animation="fadeInUpBig"
>
<Text
style={[
styles.title,
{
color: colors.text,
},
]}
>
Stay connected with everyone!
</Text>
<Text style={styles.text}>Sign in with account</Text>
<View style={styles.button}>
<TouchableOpacity
onPress={() => navigation.navigate("SignInScreen")}
>
{/* <LinearGradient
colors={["#08d4c4", "#01ab9d"]}
style={styles.signIn}
> */}
<Text style={styles.textSign}>Get Started</Text>
<MaterialIcons
name="navigate-next"
color="#fff"
size={20}
/>
{/* </LinearGradient> */}
</TouchableOpacity>
</View>
</Animatable.View>
</View>
);
};
export default SplashScreen;
const { height } = Dimensions.get("screen");
const height_logo = height * 0.28;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#009387",
},
header: {
flex: 2,
justifyContent: "center",
alignItems: "center",
},
footer: {
flex: 1,
backgroundColor: "#fff",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingVertical: 50,
paddingHorizontal: 30,
},
logo: {
width: height_logo,
height: height_logo,
},
title: {
color: "#05375a",
fontSize: 30,
fontWeight: "bold",
},
text: {
color: "grey",
marginTop: 5,
},
button: {
alignItems: "flex-end",
marginTop: 30,
},
signIn: {
width: 150,
height: 40,
justifyContent: "center",
alignItems: "center",
borderRadius: 50,
flexDirection: "row",
},
textSign: {
color: "white",
fontWeight: "bold",
},
});
This is the full error I am getting after running it on my android device -
I am finding trouble writing all the error code from a screenshot so I added it as image. It will be kind of you if you just check image for more info about the error.
Hope you can help. I am a starter so any help is super useful and appreciatable. Thanks a lot in advance.
Please help.
Please tell any suggestions you have.
Note: I have not tested the code on IOS device.
