CODEWITHSUNDEEP
react-nativez-indexreact-native-stylesheet
Chaudhry Talha
Chaudhry Talha

Reputation: 7868

Bring a view on absolute position to front in react native

This is happening on with Android and on iOS it's working fine. I have a component that has a badge which I also custom-made.

function HomeMenuCell({ title, imagePath, pressEvent, showBadge, badgeText }) {
    return (
        <TouchableOpacity style={styles.container} onPress={pressEvent}>
            <View style={styles.imageView}>
                <Image source={imagePath} />
            </View>
            <Text style={styles.titleText}>{title}</Text>
            {showBadge && <View style={styles.badgeView}>
                <Text style={styles.badgeText}>{badgeText}</Text>
            </View>}
        </TouchableOpacity>
    );
}

I have a TouchableOpacity component and in this container, I'm doing everything. The badgeView is also positioned based on the container

    container: {
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 10,
        marginTop: 10,
        marginRight: 10,
        marginLeft: 20
    },
    badgeView: {
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: 8,
        padding: 3,
        // zInndex: 999, //This doesn't work
        right: 0,
        top: 0
    },

But it is hidden behind the imageView

    imageView: {
        width: 50, height: 50,
        shadowOffset: { width: 0, height: 0 },
        shadowColor: 'black',
        shadowOpacity: 0.2,
        elevation: 3,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8,
    },

I even tried putting those lines of code before. I think it's because the props are not loaded and the view gets rendered. So, any ideas?

Created this quick Snack (Only see in Android): https://snack.expo.io/@chtalha/badge-on-view

Upvotes: 2

Views: 1575

Answers (1)

Ankit Patel
Ankit Patel

Reputation: 199

   badgeView: {
    position: 'absolute',
    backgroundColor: 'red',
    borderRadius: 8,
    padding: 3,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    right: -15,
    top: -5
},

Use this style in your badgeView hope this will work for you :) This this happen because you already use elevation in image so if you wanna display your other view on top of it then you must set higher elevation compare to image view

Upvotes: 2

Related Questions