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

Question

I tried to get a photo as background and TextButtons on foreground.

Here is my App.js:

...

const stackOptions = {
   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('./bg-img.png')}>
       ... stack screens inside stack navigator with options and nav container
    </ImageBackground>
  );
};

export default App;

Here is my HomeScreen.js

...

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,
  },
});

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

output

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

here

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

Versions:

"react-navigation": "2.2.0", "react": "17.0.2", "react-native": "0.65.1", "react-native-screens": "^3.8.0",

keep `backgroundColor: 'transparent'` in main first view on homescreen, schedule, stats, news & loginregister pages. — John Ocean, Oct 25 '21 at 04:29

score 0 · Accepted Answer · answered Mar 24 '22 at 14:38

This is the right answer, this saved me: https://www.youtube.com/watch?v=mR2SkagbIXg&list=WL&index=226

Now my App.js looks like this

const Stack = createNativeStackNavigator();

const stackOptions = {
  headerTransparent: true,
};

const Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

const App = () => {
  return (
      <NavigationContainer theme={Theme}>
        <Stack.Navigator screenOptions={stackOptions}>
          // .. screens
        </Stack.Navigator>
      </NavigationContainer>
  );
};

HomeScreen.js:

  import Containter from './Container';

  export const HomeScreen = ({ navigation }) => {
    return (
      <Containter>
        // content
      </Containter>
    );
  };

Very important here is the Container component. He's the one doing all the magic. Eventually, I used LinearGradient but Image or BackgroudImage worked too ;)

Container.js:

import LinearGradient from 'react-native-linear-gradient';

const Containter = ({ children }) => {
  return (
    <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} colors={['#1C0C5B', '#3D2C8D']} style={styles.image}>
      <StatusBar barStyle="light-content" />
      <SafeAreaView style={styles.container}>{children}</SafeAreaView>
    </LinearGradient>
  );
};

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

1 Answers1