How can I set full screen background image in React Native?

Question

I would like my app to look like this:

Here is my App.js:

import * as React from 'react';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ImageBackground } from 'react-native';

const Stack = createNativeStackNavigator();

const stackOptions = {
  headerTitleStyle: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'black',
    letterSpacing: 2,
  },
   cardStyle: { backgroundColor: 'transparent', shadowColor: 'transparent' },
   transparentCard: true,
   transitionConfig: () => ({
     containerStyle: {
       backgroundColor: 'transparent',
     },
  }),
};

const options = {
  header: () => null,
  cardStyle: {
    backgroundColor: 'transparent',
  },
};

const App = () => {
  return (
    <ImageBackground
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
      source={require('./src/hardCodingDb/bg-img.png')}
      resizeMode="cover">
      <NavigationContainer>
        <Stack.Navigator styleOptions={options}>
          <Stack.Screen name={menu.title} component={HomeScreen} options={stackOptions} />
          <Stack.Screen name={menu.schedule} component={Schedule} options={stackOptions} />
          <Stack.Screen name={menu.stats} component={Stats} options={stackOptions} />
          <Stack.Screen name={menu.news} component={News} options={stackOptions} />
          <Stack.Screen name={menu.loginRegister} component={LoginRegister} options={stackOptions} />
        </Stack.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
};

export default App;

Here is my HomeScreen.js

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { TextButton } from './consts/Buttons';
import { menu } from './consts/Strings';

export const HomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.options}>
        <TextButton style={styles} text={menu.schedule} dir={menu.schedule} navigation={navigation} />
        <TextButton style={styles} text={menu.news} dir={menu.news} navigation={navigation} />
        <TextButton style={styles} text={menu.stats} dir={menu.stats} navigation={navigation} />
        <TextButton style={styles} text={menu.loginRegister} dir={menu.loginRegister} navigation={navigation} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  options: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  optionButton: {
    fontSize: 35,
    padding: 40,
  },
});

The output is:

ImageBackground is covering all of the components. If I comment out alignItems, here is the output:

If I set width for 200, this is what's happening:

    <ImageBackground
      style={{
        flex: 1,
        justifyContent: 'center',
        width: 200,
        // alignItems: 'center',
      }}
      source={require('./src/hardCodingDb/bg-img.png')}
      resizeMode="cover">

Versions:

"react-navigation": "2.2.0",
"@react-navigation/native": "^6.0.4",
"@react-navigation/native-stack": "^6.2.2",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",

Answer 1

You have to use @EnvironmentObject var session: SessionStore instead of @StateObject in SplashScreenView.

Answer 2

The goal is to have only one instance of your SessionStore(). Here, you redefined it twice: @StateObject var session = SessionStore()

In your MyApp, do

@StateObject var session = SessionStore()

and in others views, do

@EnvironmentObject var session: SessionStore

and, you forgot to pass your environmentObject to your SignInScreen

.environmentObject(session)