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
