Style Customization

You can customize the styling of GestureViewer.

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

function App() {
  return (
    <GestureViewer
      animateBackdrop={false}
      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
`animateBackdrop`	By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures. When `false`, this animation is disabled.	`true`
`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 />`.

#Style Customization

Style Customization