Question: Why default to full screen height instead of allowing dynamic height?

[fabianlee1211]

Which OS ?

Both

Version

Which versions are you using:

• react-native-swiper v1.6.0.rc
• react-native v0.62.2

Problem / Question

In the implementation, it is setting the initial height state to window height if we do not provide a height prop to it.

In order to place the swiper perfectly, I would need to calculate the height and width of the content beforehand which is kind of unnecessary work.

Wouldn't it be more flexible to not do anything with the initial height and let the container fit dynamically with the content? We can always control the dimension ourselves.

PS. If there's a way to have dynamic height control already that I missed, please let me know thanks!

[danielfx90]

Anyone to answer this, please? It's a great package, but setting hardcoded dimensions complicates everything.

[annguyen115]

Anyone to answer this, please? It's a great package, but setting hardcoded dimensions complicates everything.

Same here 😂

[cardiohelge]

I build a workaround by using onLayout in the child views: (The largest child defines the height of the Swiper)

const [height, setHeight] = useState(100); // "minHeight" - can be smaller too

const handleSetHeight = (value) => {
  if (value > height) {
    setHeight(value);
  }
};

return (
  <Swiper ... style={{ height }}>
    {children.map((child) => (<View onLayout={(event) =>handleSetHeight(event.nativeEvent.layout.height)}>{child}</View>))}
  </Swiper>
);

[izanf]

@cardiohelge its a good workaround, but for dynamic data inside a slide is a big problem when has a many slides with dynamic data inside.

[rajkundu]

@cardiohelge its a good workaround, but for dynamic data inside a slide is a big problem when has a many slides with dynamic data inside.

I used this comment on #233 to fix the Swiper dynamically rendering data (Swiper was vertically stacking my <Box> elements instead of displaying them separately).

Once that was fixed, I used @cardiohelge's solution just above – using <View>'s onLayout property – to be able to set the Swiper height dynamically. However, I had to use an initial height of 0 because assigning a non-zero value wasn't working properly for me for some reason.