Search code examples
cssreact-nativeviewblursubscription

React-native locked view

I would like to make a view that is blurred for non-subscribers to my application, with a lock, when we click we are redirected to the subscription page. For subscribers I want the view to be visible without any filters.

I don't know how to set up a blurry view above my current view. Can I do it only with CSS? I saw the Animated package and react-native-blur but I am not sure of the relevance in my case.

I hope my question is clear and that you can help me. In any case, thank you for reading me.

I have this : enter image description here

          <View style={styles.statContainer}>
              <ImageBackground
                source={require("../../assets/images/stats-background-5.png")}
                style={styles.statImage}
              >
                <Image
                  source={require("../../assets/images/lock.png")}
                  style={{
                    height: 30,
                    width: 30,
                    justifyContent: "flex-start",
                    alignItems: "flex-start",
                  }}
                ></Image>
                <Text style={styles.statText}>
                  {i18n.t("stats.action.countries")}
                  {"\n"}
                  <AnimateNumber
                    value={this.state.stats.countries}
                    countBy={(
                      this.state.stats.countries / this.state.animateCountBy +
                      1
                    ).toFixed(0)}
                    style={styles.statTextData}
                  />{" "}
                  <Text
                    style={[styles.textimg, styles.measure]}
                    onLayout={this.handleLayout}
                  ></Text>
                </Text>
              </ImageBackground>
            </View>

Styles : 

statContainer: {
    flex: 1,
    backgroundColor: "transparent",
    marginVertical: 15,
    justifyContent: "center",
    alignItems: "center",
  },
  statText: {
    fontFamily: "FunctionLH",
    color: "white",
    fontSize: 20,
    paddingVertical: 5,
    textAlign: "center",
    alignItems: "center",
    textShadowColor: "rgba(0, 0, 0, 0.90)",
    textShadowOffset: { width: -1, height: 1 },
    textShadowRadius: 10,
  },
  statTextData: {
    fontSize: 40,
    lineHeight: 50,
    paddingVertical: 5,
    textAlign: "center",
    alignItems: "center",
  },
  statImage: {
    height: 100,
    width: "100%",
    position: "relative", // because it's parent
    justifyContent: "center",
    alignItems: "center",
  },
Solution

  • If i understood you correctly and you want to blur the image, you can use the blurRadius prop for your Image component:

                    <Image
                  source={require("../../assets/images/lock.png")}
                  blurRadius={5}
                  style={{
                    height: 30,
                    width: 30,
                    justifyContent: "flex-start",
                    alignItems: "flex-start",
                  }}
                ></Image>