Zoom works but the zoomed image renders under all the components below

[Bucci83]

I have a problem, once I zoom on the image , the image is correctly zoomed on top of the above components, but is rendered UNDER the below components... this is inside a chat
here is the code snippet

            <View>
              {message.Desc === '' ? (
                <View style={{ zIndex: 10 }}>
                  <ImageZoom
                    uri={`${REACT_APP_API_URL}${
                      message?.Path ? message?.Path : message?.path
                    }`}
                    minScale={0.5}
                    maxScale={5}
                    doubleTapScale={3}
                    isDoubleTapEnabled
                    style={styles.imageStyle}
                    resizeMode="cover"
                  />
                </View>
              ) : (
                <View style={{ zIndex: -10 }}>
                  <Text style={styles.message} selectable>
                    {message.Desc}
                  </Text>
                </View>
              )}
            </View>
            <View style={styles.triangle_shape_right} />
            <Text style={styles.time} selectable={true}>
              {message.NameEmp} - {message_time_convert(message.Date)}
            </Text>
          </View>```

as you can see I tried to add zIndex with no luck... am I missing something ?

thanks!

[mburakdndr]

I was having the same problem, I solved the problem with flex: 1. Maybe it will help you my friend.

<View style={{ zIndex: 10, flex:1}}>
<ImageZoom
uri={${REACT_APP_API_URL}${ message?.Path ? message?.Path : message?.path }}
minScale={0.5}
maxScale={5}
doubleTapScale={3}
isDoubleTapEnabled
style={styles.imageStyle}
resizeMode="cover"
/>

[Bucci83]

thanks, no luck.. I ended up changing the library to another

[badalsaibo]

@Bucci83 Which library you used?