React-native-swiper: Question: Why default to full screen height instead of allowing dynamic height?

Created on 17 Jun 2020 · 4Comments · Source: leecade/react-native-swiper

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!

question

Source

fabianlee1211

👍6

Most helpful comment

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>
);

cardiohelge on 17 Aug 2020

👍5

All 4 comments

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

danielfx90 on 27 Jul 2020

😄1

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

Same here 😂

annguyen115 on 4 Aug 2020

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>
);

cardiohelge on 17 Aug 2020

👍5

@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.