For AI agents: the complete documentation index is available at /2.x/llms.txt, the full documentation bundle is available at /2.x/llms-full.txt, and this page is available as Markdown at /2.x/guide/usage/style-customization.md.
v3 is stable. See what changed
React Native Gesture Image Viewer
  • English
  • 2.x

      • Style Customization

      You can customize the styling of GestureViewer.

      import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      width={400}
      height={400}
      containerStyle={{/* ... */}}
      backdropStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.90)' }}
      renderContainer={(children, { dismiss }) => <View style={{ flex: 1 }}>{children}</View>}
    />
  );
}
      PropertyDescriptionDefault Value
      widthThe width of content items. Default is window width.Dimensions width
      heightThe height of content items. Default is window height.Dimensions height
      containerStyleAllows custom styling of the container that wraps the list component.flex: 1
      backdropStyleAllows customization of the viewer's background style.backgroundColor: black; StyleSheet.absoluteFill;
      renderContainer(children, helpers)Allows custom wrapper component around <GestureViewer />.
      Tip

      Use onSingleTap for fullscreen tap handling. renderContainer is best for composing surrounding UI such as headers, close buttons, and toolbars.