How to avoid notches with View Area Context in React Native apps

For the life of me, I cannot figure out how to remove these white bars, notches (or padding) at the top and bottom of the screen. But if I change the background color of the container to say "red", it changes.

What I've Tried:

Setting the width and height of the Lottie animation using Dimensions.get('window')
Using position: 'absolute' on both the container and animation
Replacing View with SafeAreaView
Using StatusBar with translucent and backgroundColor="transparent"
Tried removing flex: 1 and explicitly positioning via top, bottom, etc.
Tried using useSafeAreaInsets() from react-native-safe-area-context

Relevant Files: App.js

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './screens/Home'

const Stack = createStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName = 'Home'>
          <Stack.Screen
            name='Home'
            component={Home}
            options={{ headerShown: false }}
          />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Home.js

import React from 'react';
import LottieView from 'lottie-react-native';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';

export default function Home({ navigation }) {
  return (
    <View style={styles.container} >
      <LottieView
        source={require('../assets/home_splash_2.json')}
        autoPlay
        loop
        style={styles.background}
      />
      <View style={styles.overlay}>
        <Text style={styles.title}>Welcome to Vitola</Text>
        <Text style={styles.subtitle}>Find the best cigars for every moment.</Text>
        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('MainApp')}>
          <Text style={styles.buttonText}>Get Started</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
          <Text style={styles.loginText}>Already have an account? Log in</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width,
    height,
    position: 'absolute',
  },
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 30,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#ddd',
    marginBottom: 40,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#fff',
    paddingVertical: 12,
    paddingHorizontal: 40,
    borderRadius: 25,
    marginBottom: 20,
  },
  buttonText: {
    color: '#000',
    fontWeight: 'bold',
    fontSize: 16,
  },
  loginText: {
    color: '#fff',
    textDecorationLine: 'underline',
  },
});

How do I make the Lottie animation truly fill the screen edge-to-edge without white bars at the top or bottom — no matter the device or OS? Is there a specific way to account for status bar and safe area properly?

Any advice or example from someone who’s implemented this successfully would be much appreciated enter image description here

Solution

The LottieView has the property resizeMode with default value as contain. Maybe set it as cover help you to fill the screen with the animation.

Another tip, maybe you don´t need use the Dimensions to set width and height of LottieView. Try to use width: "100%" and height: "100%". I made a example based on your code using Snack Expo to see on device with Expo Go.

import React from 'react';
import LottieView from 'lottie-react-native';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Home({ navigation }) {
  return (
    <View style={styles.container} >
      <LottieView
        source={require('../assets/home_splash_2.json')}
        autoPlay
        loop
        resizeMode="cover"
        style={styles.background}
      />
      <View style={styles.overlay}>
        <Text style={styles.title}>Welcome to Vitola</Text>
        <Text style={styles.subtitle}>Find the best cigars for every moment.</Text>
        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('MainApp')}>
          <Text style={styles.buttonText}>Get Started</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
          <Text style={styles.loginText}>Already have an account? Log in</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width: '100%',
    height: '100%',
    top: 0,
    position: 'absolute',
  },
  // rest of styles...
});