How create a dynamic height to swiper container according slide height?

[izanf]

Which OS ?

both, iOS and Android

Version

Which versions are you using:

• react-native-swiper v1.6.0-rc.3?
• react-native v16.9.0?

Expected behaviour

Dynamic height according slider, to dynamic height of lists and and static height for a few views.

Actual behaviour

Currently takes the major height of slide and set as the default height (as a static height, not adjusting according content).

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here. Create two sliders with different heights.

[mengpangyu]

Which OS ?

both, iOS and Android

Version

Which versions are you using:

• react-native-swiper v1.6.0-rc.3?
• react-native v16.9.0?

Expected behaviour

Dynamic height according slider, to dynamic height of lists and and static height for a few views.

Actual behaviour

Currently takes the major height of slide and set as the default height (as a static height, not adjusting according content).

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here. Create two sliders with different heights.

I have same question, Hope the author or anybody provide the answer.

[Atuldhaka]

Yes, facing the same problem, also tried giving height as undefined but no luck.

[aithashi]

+1 Did some one find the solution/Workaround for this?

I would be really thankful if I could use this swiper something like a footer menu (10% height of the screen)

[Atuldhaka]

@aithashi you can wrap swiper in a parent view and give that view 10% height of the screen. automatically the swiper will adjust its height according to the parent view. The only problem with swiper is that how can the swiper take height according to the child component of swiper.

[dmsierra11]

Is there a solution for this?

[tannusesquerdo]

My solution to this.

I set the height in each children component.

import { Animated } from 'react-native';
import Swiper from 'react-native-swiper';

const AnimatedSwiper = Animated.createAnimatedComponent(Swiper);

const Slider = ({ children }) => {
    const [current, setCurrent] = React.useState(0);
    const [height] = React.useState(new Animated.Value(100));

    React.useEffect(() => {
        Animated.timing(height, {
            useNativeDriver: false,
            toValue: children[current].props.height,
        }).start();
    }, [current]);

    return (
            <AnimatedSwiper
                height={height}
                onIndexChanged={(index) => setCurrent(index)}
                loop={false}
            >
                {children}
            </AnimatedSwiper>
    );
};```