Gallery

The Gallery component displays a collection of images or media with thumbnail navigation, keyboard controls, and optional fullscreen/modal viewing.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽²⁾

Properties

⁽¹²⁾

Playground

Basic

Basic image gallery with navigation and metadata.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
TouchableOpacity
 
}
 
from
 
'react-native'
;
import
 
{
 
Block
,
 
Gallery
,
 
Image
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
import
 
{
 SAMPLE_IMAGES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
// `null` closes the gallery; any index opens it on that image.
  
const
 
[
openIndex
,
 setOpenIndex
]
 
=
 useState
<
number
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
{
SAMPLE_IMAGES
.
map
(
(
image
,
 index
)
 
=>
 
(
          
<TouchableOpacity
 
key
=
{
image
.
id
}
 
onPress
=
{
(
)
 
=>
 
setOpenIndex
(
index
)
}
>
            
<Image
 
src
=
{
image
.
uri
}
 
w
=
{
120
}
 
h
=
{
90
}
 rounded 
resizeMode
=
"cover"
 
/>
          
</TouchableOpacity
>
        
)
)
}
      
</Row
>
 
      
<Gallery
        
visible
=
{
openIndex 
!==
 
null
}
        
images
=
{
SAMPLE_IMAGES
}
        
initialIndex
=
{
openIndex 
??
 
0
}
        
onClose
=
{
(
)
 
=>
 
setOpenIndex
(
null
)
}
        showMetadata
      
/>
    
</Block
>
  
)
;
}

Advanced

Advanced gallery configurations with custom handlers.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Button
,
 
Gallery
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
GalleryItem
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
import
 
{
 SAMPLE_IMAGES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
active
,
 setActive
]
 
=
 useState
<
'minimal'
 
|
 
'custom'
 
|
 
null
>
(
null
)
;
  
const
 
[
downloaded
,
 setDownloaded
]
 
=
 useState
<
string
 
|
 
null
>
(
null
)
;
 
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
<Button
 
variant
=
"outline"
 
onPress
=
{
(
)
 
=>
 
setActive
(
'minimal'
)
}
>
          
Minimal
        
</Button
>
        
<Button
 
variant
=
"outline"
 
onPress
=
{
(
)
 
=>
 
setActive
(
'custom'
)
}
>
          
Custom
 download
        
</Button
>
      
</Row
>
 
      
{
/* Chrome stripped back to the image itself — swipe and arrow keys still navigate. */
}
      
<Gallery
        
visible
=
{
active 
===
 
'minimal'
}
        
images
=
{
SAMPLE_IMAGES
}
        
onClose
=
{
(
)
 
=>
 
setActive
(
null
)
}
        
showThumbnails
=
{
false
}
        
showDownloadButton
=
{
false
}
      
/>
 
      
{
/* `onDownload` replaces the built-in behaviour, so the host app decides what saving means. */
}
      
<Gallery
        
visible
=
{
active 
===
 
'custom'
}
        
images
=
{
SAMPLE_IMAGES
}
        
onClose
=
{
(
)
 
=>
 
setActive
(
null
)
}
        
onDownload
=
{
(
image
:
 
GalleryItem
)
 
=>
 
setDownloaded
(
image
.
title 
??
 image
.
id
)
}
        showMetadata
      
/>
 
      
{
downloaded 
?
 
(
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Downloaded
 
{
downloaded
}
        
</Text
>
      
)
 
:
 
null
}
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap