@one-am/react-native-simple-image-slider

react-native-simple-image-slider

A simple and performant image slider made with @shopify/flash-list and expo-image Includes a full screen gallery component with gesture support.

Installation

Expo

npx expo install @shopify/flash-list expo-image expo-haptics expo-status-bar react-native-reanimated react-native-svg \
 react-native-gesture-handler react-native-safe-area-context styled-components \
  @one-am/react-native-simple-image-slider

Non-Expo

npm

npm install @shopify/flash-list expo-image expo-haptics expo-status-bar react-native-reanimated react-native-svg \
 react-native-gesture-handler react-native-safe-area-context styled-components \
  @one-am/react-native-simple-image-slider

yarn

yarn add @shopify/flash-list expo-image expo-haptics expo-status-bar react-native-reanimated react-native-svg \
 react-native-gesture-handler react-native-safe-area-context styled-components \
  @one-am/react-native-simple-image-slider

Usage

<SimpleImageSliderThemeProvider>
  <SimpleImageSlider
    data={photos.map((photo, index) => ({
      source: photo,
      key: index.toString(),
    }))}
    imageWidth={width}
    imageAspectRatio={16 / 9}
    fullScreenEnabled={true}
    renderFullScreenDescription={(_, index) => (
      <Text style={{ color: '#ffffff' }}>Picture {index}</Text>
    )}
  />
</SimpleImageSliderThemeProvider>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library