How to make contrast with image and white text in react-native

Question

I'm struggling with this problem: I've an image with some white icons on it and also some texts.

This is an example, as you can see it is very hard to read the "2.1k" and even to see the icons!

This is an example from Instagram:

As you can see, the icons are clearly visible and also the text is clearly visible.

Now, how can I obtain that in the first image? Is it like an overlay? This is the actual code for the three icons in my image:

<View style={{position: "absolute", bottom: 0, width: "100%", left: 0, padding: 10, paddingLeft: 20, flex: 1, maxHeight: 100, flexDirection: "row", alignItems: "center", height: "100%", shadowColor: "gray", shadowOpacity: 1, shadowOffset: {width: 0, height: 12}, shadowRadius: 16.00, elevation: 24}}>
        <View>
            <Pressable>
                <AntDesign name="hearto" color={"white"} size={25} /> 
            </Pressable>
            <Text style={{marginTop: 2, fontFamily: "Roboto", fontWeight: "bold", color: "white"}}>
                2.1k
            </Text>
        </View>

        <View style={{marginLeft: 35}}>
            <Pressable>
                <Ionicons name="chatbubbles-outline" color={"white"} size={25} /> 
            </Pressable>
            <Text style={{marginTop: 2, fontFamily: "Roboto", fontWeight: "bold", color: "white"}}>
                2.1k
            </Text>
        </View>

        <View style={{marginLeft: 35}}>
            <Pressable>
                <AntDesign name="sharealt" color={"white"} size={25} style={{}} /> 
            </Pressable>
            <Text style={{marginTop: 2, fontFamily: "Roboto", fontWeight: "bold", color: "white"}}>
                2.1k
            </Text>
        </View>
</View>

Any advice will be appreciated, thank you! :D

Answer 1

have you tried adding a subtle drop shadow to both Icons & Text :

<View style={{...}}>
    <View>
        <Pressable>
            <AntDesign name="hearto" color={"white"} size={25} style={styles.iconShadow} />
        </Pressable>
        <Text style={styles.text}>
            2.1k
        </Text>
    </View>

    <View style={{ marginLeft: 35 }}>
        <Pressable>
            <Ionicons name="chatbubbles-outline" color={"white"} size={25} style={styles.iconShadow} />
        </Pressable>
        <Text style={styles.text}>
            2.1k
        </Text>
    </View>

    <View style={{ marginLeft: 35 }}>
        <Pressable>
            <AntDesign name="sharealt" color={"white"} size={25} style={styles.iconShadow} />
        </Pressable>
        <Text style={styles.text}>
            2.1k
        </Text>
    </View>
</View>

const styles = StyleSheet.create({
    text: {
        textShadowOffset: {
            width: 2, height: 2
        },
        textShadowRadius: 10,
        textShadowColor: '#333',

        marginTop: 2,
        fontFamily: "Roboto",
        fontWeight: "bold",
        color: "white"
    }, 
    iconShadow: {
        textShadowOffset: {
            width: 2, height: 2
        },
        textShadowRadius: 15,
        textShadowColor: '#333'
    }

})

you can play with values until you are satisfied