intellidev1991/react-native-image-slider-box

resizeMode not working on full screen slider with horizontal and vertical oriented images

Brechard opened this issue · 2 comments

I am trying to create a full-screen slider that can show both images that are horizontal and vertically oriented. I have tried all values of resizeMode but it is not doing anything. I have also tried playing with sliderBoxHeight without good results.

import React from 'react';
import { View } from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';

export default function FullScreenImageSlider() {
  return (
    <View style={{ flex: 1 }}>
      <SliderBox
        images={[
          'https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg',
          'https://cdn.pixabay.com/photo/2020/05/12/11/39/cat-5162540_960_720.jpg',
          'https://cdn.pixabay.com/photo/2020/04/01/01/02/science-4989678_960_720.png',
        ]}
        // sliderBoxHeight='100%'
        style={{ height: '100%', width: '100%', resizeMode: 'cover' }}
        // autoplay
        // circleLoop
      />
    </View>
  );
}

Use the props parentWidth and sliderBoxHeight to adjust the size (with absolute values) instead of applying a custom style:
<SliderBox images={images} parentWidth={SCREEN_WIDTH} sliderBoxHeight={SCREEN_HEIGHT} />

that does not solve the issue, because when using images that horizontal they are cropped. What I want is to be able to see correctly all images no matter if they are horizontal or vertical