Text over and not under image in react-native

Question

I used an image to make a button with touchableOpacity. I put some text over to have a button-like image. That's ok, that works, cool ! My problem is that I want the text to be white, it's the case but the text is under the image I think. You can't see the white text over the image.

I don't know if it's a problem of position of my text or a style issue...

Can you try to help me, or give me any lead ? Thank you !

Authentication page

Example code for Signup and Login buttons :

  <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          centerComponent={{
            text: i18n.t("welcome.title"),
            style: {
              height: 60,
              fontFamily: "FunctionLH",
              fontSize: 30,
              color: "#fff"
            }
          }}
          containerStyle={{
            marginTop: 0,
            backgroundColor: "#6C6363",
            borderBottomColor: "transparent"
          }}
          statusBarProps={{ barStyle: "light-content" }}
        />
        <View style={styles.container}>
          {this.state.signedIn ? (
            <LoggedInPage
              name={this.state.name}
              photoUrl={this.state.photoUrl}
            />
          ) : (
            <LoginPage signIn={this.signIn} />
          )}
          <Button
            onPress={logIn}
            containerStyle={[styles.mybtnContainer, styles.btnContainerFb]}
            contentStyle={styles.buttonAccueil}
          >
            FACEBOOK
          </Button>
          <TouchableOpacity
            style={styles.touchable}
            onPress={() => this.props.navigation.navigate("Login")}
          >
            <View style={styles.view}>
              <Text style={styles.textimg}>
                {i18n.t("welcome.action.login").toUpperCase()}
              </Text>
            </View>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.tripsimg}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.touchable}
            onPress={() => this.props.navigation.navigate("Signup")}
          >
            <View style={styles.view}>
              <Text style={styles.textimg}>
                {i18n.t("welcome.action.signup").toUpperCase()}
              </Text>
            </View>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.tripsimg}
            />
          </TouchableOpacity>
        </View>
      </ImageBackground>

Styles :

container: {
    flex: 1,
    backgroundColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
    textimg: {
      fontFamily: "FunctionLH",
      color: "#FFF",
      fontSize: 24
    },
      tripsimg :{
        height: 50,
        width: 300,
        position: "relative", // because it's parent
        top: 2,
        left: 2,
        marginVertical: 5
      },
    touchable: {
        opacity: 0.6,
        alignItems: "center",
        justifyContent: "center"
      },
    view: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "transparent"
      },

Answer 1

A simple solution to this in using zIndex, just add zIndex: 1 to your view style

view: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
    zIndex: 1
  }