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>}
    />
  );
}

Property	Description	Default Value
`width`	The width of content items. Default is window width.	`Dimensions width`
`height`	The height of content items. Default is window height.	`Dimensions height`
`containerStyle`	Allows custom styling of the container that wraps the list component.	`flex: 1`
`backdropStyle`	Allows 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.

#Style Customization

Style Customization