React-native-swiper: Dynamic height? Documentation claims <Swiper> adheres to `flex: 1` however...

[ChristianTucker]

Why doesn't it act as a component with the flex property of flex: 1 that has been set? It does not play well with other components at all.

For example, here's a simple screen that's completely blue, all besides the bottom 200 points which is white.

<View style={{flex: 1}}>
  <View style={{flex: 1, backgroundColor: 'blue'}} />
 <View style={{height: 200}} />
</View>

Doing the same thing with the Swiper component yields completely different results.

<View style={{flex: 1}}>
  <Swiper> { /* flex:1 by default according to docs */ }
    <View style={{flex: 1, backgroundColor: 'blue'}} />
  </Swiper>
  <View style={{height: 200}} />
</View>

Now the entire screen is covered in blue, with the 200pts being pushed off the screen,

So how do we really make a Swiper with dynamic height?

[ramonitor]

@ChristianTucker check this PR that solves this issue:

https://github.com/leecade/react-native-swiper/pull/343

[naeliofreires]

I resolved this problem with https://github.com/ihor/react-native-scalable-image using the function onSize and Context.API

const context = useContext(SlideContext);

function updateHeight({ height }) {
  if (hasContext) {
    const { _setHeight } = context;
    _setHeight(height);
  }
}

<Image
  width={width}
  source={{ uri }}
  onSize={updateHeight}
/>

// Swipe Component
const [_height, _setHeight] = useState();
<SlideContext.Provider value={{ _setHeight }}>
     <Swiper { ...props } height={_height} >  ...