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 />.