I am new to ReactNative development and I couldn’t figure out the white spaces that occur on top and bottom of the screen even without the SafeAreaView component. I am testing this on ExpoGo app on my mobile.
import React from "react";
import { Text, View, StyleSheet } from "react-native";
import Footer from "../components/Footer";
import LittleLemonHeader from "../components/LittleLemon";
import WelcomeScreen from "../components/WelcomeScreen";
import MenuItems from "../components/MenuItems";
export default function Index() {
return (
//<View style={{ flex: 1, backgroundColor: "#495E57" }}>
<View style={styles.container}>
<LittleLemonHeader />
<MenuItems />
<Footer />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#495E57",
padding: 0, // Ensure no padding in the container
margin: 0,
},
});
2
Answers
If the isn’t working correctly, you should manualy set the padding.
require "sinatra"
require "dotenv/load"
require "net/http"
require "json"