I want to use a native iOS image viewer library Agrume within my React Native project. I already managed to create a native UI component and pass properties from JS over the bridge to iOS (Swift) to show and dismiss the image viewer. So far, so good.
I want to overlay the image viewer with my own custom titles and buttons that I would like to generate and style in React Native. The problem is, the image viewer presents itself as a modal, which means it covers the entire screen and I can't find an easy way to place React Native elements above that modal (I tried high zIndex
values). I don't think this is possible, but please let me know if I'm wrong.
A potential alternative could be to pass another property from the React component to the native implementation which contains the content for my overlay; a bit like renderItem
for FlatList
(I tried to find the source code of FlatList for inspiration, but couldn't find it).
The image viewer library accepts an overlay as UIView
, but I can't figure out how to get from my render function property in JS to a UIView that I can pass to the Agrume instance.
Any ideas how I can overlay a native iOS modal with React elements would be welcome. Thank you for your help!