import { ImageRendererProps , SimpleGallery , SimpleGalleryItemType , } from '@gallery-toolkit/simple-gallery' ; import { useHeaderHeight } from '@react-navigation/stack' ; import React from 'react' ; import { Dimensions , Text } from 'react-native' ; const { height } = Dimensions . get ( 'window' ) ; const images = new Map < number , SimpleGalleryItemType > ( [ [ 1 , { width : 300 , height : 300 , uri : 'https://placekitten.com/300/300' , } , ] , [ 2 , { width : 400 , height : 200 , uri : 'https://placekitten.com/400/200' , } , ] , ] ) ; interface PageProps extends ImageRendererProps < SimpleGalleryItemType > { index : number ; } function Page ( props ) { if ( typeof props . item === 'undefined' ) { return < Text > Index { props . index } is Undefined < /Text>; } return < SimpleGallery . ImageRenderer { ... props } / > ; } export default function StandaloneMap ( ) { const initialIndex = 1 ; const headerHeight = useHeaderHeight ( ) ; const totalCount = 3 ; function handleIndexChange ( i ) { 'worklet' ; console . log ( i ) ; } return ( < SimpleGallery initialIndex = { initialIndex } onIndexChange = { handleIndexChange } height = { height - headerHeight } renderPage = { ( props , i ) => < Page { ... props } index = { i } / > } getItem = { ( data , i ) => data . get ( i ) } items = { images } getTotalCount = { ( ) => totalCount } />); }