How can child inherit parents's background in ReactNative?

Question

I have view which handles navigation inside parent view. Parent view has background colour, and I want to set child navigation view to not have background colour (I want to see parent's background colour).

I tried setting background colour of child view to transparent, and opacity to 0, but nothing is working, as in these cases I am getting that background colour of child view is white.

Is it possible to do this?

View which is used for Background:

const AppBackground = () => {
  return (
    <View {...StyleSheet.absoluteFill}>
      <LinearGradient {...viewStyles.splash} />
    </View>
  );
};

export default AppBackground;

Parent screen:

export default function BaseScreen({ navigation }) {
  return (
    <View
      style={{
        ...viewStyles.verticallyCenteredContainer,
      }}
    >
      <Backgrounds.App />
      <View
        style={{
          flex: 1,
          alignSelf: "stretch",
        }}
      >
        <QuestionnarFormularNavigator />
      </View>

      <View {...viewStyles.bottomContainer}>
        <View {...viewStyles.horizontallySpacedContainer}>
          <Buttons.GoLeftButton
            onPress={() => navigation.navigate("TherapyType")}
          />
          <Buttons.GoRightButton
            onPress={() => navigation.navigate("UnitsType")}
          />
        </View>
      </View>
    </View>
  );
}

First screen from QuestionnareFormularNavigator (Diabetes Screen):

export default function DiabetesTypeScreen() {
  return (
    <View {...viewStyles.verticallyCenteredContainer}>
      <View style={{ height: 64 }} />
      <Labels.QuestionnaireTitle
        text={localizedStrings.labels.DiabetesTypeTitle}
      />
      <View style={{ height: 48 }} />

      <View {...viewStyles.verticallyStretchContainer}>
        <Lists.Questionnaire
          data={MockedData.DiabetesType}
          onPress={(id) => console.log(id)}
        />
      </View>
    </View>
  );
}

So when I try set opacity or background color of Diabetes screen, it goes white, and no <Background.App /> from the parent view is visible under the Diabetes screen.

On request, I am adding code for:

verticallyCenteredContainer:

  verticallyCenteredContainer: {
    flex: 1,
    alignItems: "center",
  },

Background.App:

const AppBackground = () => {
  return (
    <View {...StyleSheet.absoluteFill}>
      <LinearGradient {...viewStyles.splash} />
    </View>
  );
};

Answer 1

You can give all components as children to Background.app.

Background.App:

const AppBackground = ({children}) => {
  return (
    <View {...StyleSheet.absoluteFill}>
      <LinearGradient {...viewStyles.splash}>
          {children}
      </LinearGradient>
    </View>
  );
};

On the parent screen, you can use like this.

export default function BaseScreen({ navigation }) {
  return (
    <Backgrounds.App>
    <View
      style={{
        ...viewStyles.verticallyCenteredContainer,
      }}
    >
      
      <View
        style={{
          flex: 1,
          alignSelf: "stretch",
        }}
      >
        <QuestionnarFormularNavigator />
      </View>

      <View {...viewStyles.bottomContainer}>
        <View {...viewStyles.horizontallySpacedContainer}>
          <Buttons.GoLeftButton
            onPress={() => navigation.navigate("TherapyType")}
          />
          <Buttons.GoRightButton
            onPress={() => navigation.navigate("UnitsType")}
          />
        </View>
      </View>
    </View>
    </Backgrounds.App>
  );
}