Style Customization

You can customize the styling of GestureViewer.

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

function App() {
  return (
    <GestureViewer
      width={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
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 />.