How to set a background image with react native and react navigation v5?

Question

I am using React Native with React Navigation v5 and all I want to do is add a static background image to my app that does not reload with every new screen. I have tried different approaches with styling like setting

cardStyle: { backgroundColor: 'transparent' }

but I can't find a solution. I have tried finding solutions online but since V5 is pretty new it doesn't seem to be that much discussion about this.

This is my code for the moment but all this does is adding the image on top of the stack making all the buttons that I add in Home disappear.

const Stack = new createStackNavigator();

const App = () => {
  return (
    <ImageBackground
      style={styles.center}
      source={require('./img/pic.jpg')}
      resizeMode="stretch">
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            cardStyle: {backgroundColor: 'transparent'},
            headerShown: false,
          }}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
          <Stack.Screen name="Screen3" component={Screen3} />
        </Stack.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
};

export default App;

and my styles.js if needed:

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});
export default styles;

If anyone could help me with this it would be very appreciated.

Answer 1

您可以在您想要的每个屏幕中添加ImageBackground ，但是要删除重新加载动画效果，您可以在ImageBackground组件中设置fadeDuration={0} 。

Answer 2

For those using react navigation v6, the answer is using themes. Don't really know if they're there and if they'd work the same in v5. Using the same code provided, when you import the NavigationContainer, import with the DefaultTheme as well

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

Then create a theme as setting background colour to transparent follows

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

Now add the created theme when you use the NavigationContainer

{/* All that code including the BackgroundImage */}
<NavigationContainer theme={MyTheme}>
    {/* Your Stack navigator and it's Screens */}
</NavigationContainer>

The whole screen would look something like this

// All other imports
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const Stack = new createStackNavigator();

const App = () => {

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

    return (
        <ImageBackground
            style={styles.center}
            source={require('./img/pic.jpg')}
            resizeMode="stretch">
            <NavigationContainer theme={MyTheme}>
                <Stack.Navigator screenOptions={{ headerShown: false }}>
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="Screen1" component={Screen1} />
                    <Stack.Screen name="Screen2" component={Screen2} />
                    <Stack.Screen name="Screen3" component={Screen3} />
                </Stack.Navigator>
            </NavigationContainer>
        </ImageBackground>
    );
};

export default App;