intellidev1991 / react-native-image-slider-box

A simple and fully customizable React Native component that implements an Image Slider UI.
MIT License
279 stars 100 forks source link

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

Open Brechard opened 2 years ago

Brechard commented 2 years ago

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>
  );
}
kaischwetz commented 2 years ago

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

Brechard commented 2 years ago

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