skip to Main Content

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


  1. If the isn’t working correctly, you should manualy set the padding.

    Login or Signup to reply.
  2. require "sinatra"
    require "dotenv/load"
    require "net/http"
    require "json"

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search