How to add background image for a few react native pages

import React, {useEffect} from "react";
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
import { Text, Button, View, Image, StyleSheet, ImageBackground } from "react-native";

const Page1 = ({navigation}) => {
    return (
        <View>
            <ImageBackground style={{width: '100%', height: '100%'}} source={require('./assets/splash.png')}>
                <Text>Page1</Text>
                <Button title="Go to page 2" onPress={() => navigation.navigate('Page2', {name: 'Page2'})} />
            </ImageBackground>
        </View>
    );
}
const Page2 = ({navigation}) => {
    return (
        <View>
            <ImageBackground style={{width: '100%', height: '100%'}} source={require('./assets/splash.png')}>
                <Text>Page2</Text>
                <Button title="Go to page 1" onPress={() => navigation.navigate('Page1', {name: 'Page1'})}/>
            </ImageBackground>
        </View>
    );
}
const HomeScreen = ({navigation}) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button title="Go to Page1" onPress={() => navigation.navigate('Page1', {name: 'Page1'}) } />
        </View>
    );
};

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Home" component={HomeScreen}/>
                <Stack.Screen options={{title: 'Page1'}} name="Page1" component={Page1} />
                <Stack.Screen options={{title: 'Page2'}} name="Page2" component={Page2} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default App;

As you can see, components Page1 and Page2 are using the same background image. There will be Page3, Page4 etc that will use the same background image. While Home and other pages will not use any background image. What is the easiest way to make sure that Page1, Page2 etc will use the same image without needing to write the same ImageBackground for each of these pages?

>Solution :

You can create a HOC like this

const WithBackgroundImage = (children) => {
  return (
    <ImageBackground style={{width: '100%', height: '100%'}} source={require('./assets/splash.png')}>
     {children}
    </ImageBackground>
  )
}

Then you can use it inside the pages you need

import WithBackgroundImage from .....

const Page1 = ({navigation}) => {
  return (
    <WithBackgroundImage>
      <Text>Page1</Text>
      <Button title="Go to page 2" onPress={() => navigation.navigate('Page2', {name: 'Page2'})} />
    </WithBackgroundImage>
  );
}