I am newbie to react-native, I was learning it from youtube but in there the code block used to align the logo-image on top of the screen works, however for me the code didn't work. The exact timestamp of the video is here.
Following is my code:
import React from "react";import { ImageBackground, StyleSheet, View, Image, Text } from "react-native";function WelcomeScreen(){ return (<ImageBackground style={styles.background} ><View styles={styles.logoContainer}><Image styles={styles.logo} source={require('../assets/favicon.png')} /><Text>Don't know why isn't it working</Text></View><View style={styles.loginButton}></View> <View style={styles.registerButton}></View> </ImageBackground> );}const styles = StyleSheet.create({ background: { flex: 1, justifyContent: "flex-end", alignItems: "center", borderColor: "#FF0000", borderWidth: 2 }, loginButton: { width: "100%", height: 60, backgroundColor: "#FD7E14", borderColor: "#FF0000", borderWidth: 2 }, logo: { width: 200, height: 200, }, logoContainer: { position:"absolute", top: 70, alignItems: "center", borderColor: "#FF0000", borderWidth: 2 }, registerButton: { width: "100%", height: 60, backgroundColor: "#2196F3", borderColor: "#FF0000", borderWidth: 2 },})export default WelcomeScreen;
Here, I am trying to bring logoContainer
view
on top upper half of the screen but I am not able to get the desired result, please help me with the alignment.
App.js
import WelcomeScreen from "./app/screens/WelcomeScreen"export default function App() { return (<WelcomeScreen /> );}
Also if possible kindly share references to learn view positioning, because it has become the biggest hurdle for me.