Ustawienie tła

Chce ustawić tło dla wszystkich widoków na poziomie nawigacji ale coś mi nie działa. Czy może dlaczego ?

const image = { uri: "https://www.fiverr.com/duytanduong/build-ios-android-apps-with-react-native" };

function AuthStack() {
  return (
    <ImageBackground source={image} style={styles.image}>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: Colors.header },
          headerTintColor: 'white',
          contentStyle: { backgroundColor: Colors.primary100 },
        }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Navigator>
    </ImageBackground>
  );
}

A czy tła obrazkowego nie przysłania kolor tła który ustawiasz dla wszystkich ekranów? contentStyle: { backgroundColor: Colors.primary100 }

Trochę głupie pytanie, ale to na pewno jest dobry adres do obrazka? Bo według mnie nie wygląda jak obrazek

const image = { uri: "https://www.fiverr.com/duytanduong/build-ios-android-apps-with-react-native" }; // <-- Chodzi mi dokładnie o to

function AuthStack() {
  return (
    <ImageBackground source={image} style={styles.image}>
       ...
    </ImageBackground>
  );
}

Faktycznie coś zakrywa. Przeniosłem sobie to do zewnętrznego komponentu.

import React from "react";
import { ImageBackground, StyleSheet, View } from "react-native";

const image = { uri: "https://images.pexels.com/photos/1535162/pexels-photo-1535162.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" };

const BackgroundImage = () => (
    <ImageBackground source={image} style={styles.image}>
    </ImageBackground>
);



const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
    },
    image: {
      flex: 1,

      justifyContent: 'center'
    }
  });

export default BackgroundImage;

======

zaimplementowałem to w nowym oknie z tym że tym razem tło zakrywa tekst

> function HomeScreeen() {
>   return (
>     <BackgroundImage>
>     <View style={styles.rootContainer}>
>       <Text style={styles.title}>Test!</Text>
>     </View>
>     </BackgroundImage>
>   );
> }

Dev007 napisał(a):

Faktycznie coś zakrywa. Przeniosłem sobie to do zewnętrznego komponentu.

const BackgroundImage = () => (
    <ImageBackground source={image} style={styles.image}>
    </ImageBackground>
);

// ...

function HomeScreeen() {
 return (
    <BackgroundImage>
    <View style={styles.rootContainer}>
      <Text style={styles.title}>Test!</Text>
    </View>
    </BackgroundImage>
  );
}

Na moje oko zapomniałeś o propsie children

const BackgroundImage = ({ children }) => (
    <ImageBackground source={image} style={styles.image}>
      {children}
    </ImageBackground>
);

Działa mi to na poszczególnych oknach ale już jak chce opakować NavigationContainer to już nie działa . Wicie może dlaczego ?

>   return (
>     <BackgroundImage>
>       <NavigationContainer>
>         <Stack.Navigator
>           screenOptions={{
>             headerShown: false,
>           }}
>         >
>           <Stack.Screen name="Login" component={LoginScreen} />
>           <Stack.Screen name="Register" component={RegisterScreen} />
>         </Stack.Navigator>
>       </NavigationContainer>
>     </BackgroundImage>
>   );
> }