Automatic height from children?

[joaomarceloods]

Ask your Question

Hi, can PagerView get its height from its children? This is the use case:

• A ScrollView (vertical) containing some PagerViews.
• Each PagerView (horizontal) contains 3 cards.
• Each card contains an Image with a fixed aspect ratio.

So, the wider the screen, the taller the image. A height of 360p for the PagerView works for iPhone 12 Mini, but it's not enough on iPhone 12 Pro Max. So, can PagerView get its height from its children somehow? Demo:

• https://github.com/joaomarceloods/native-base-demo/blob/c4bca08648b56fed6299af3b89668d14eb827f89/src/components/ContentScreen.tsx#L18
• expo start, then press shift + i and select an emulator.

[troZee]

Hey, Below you can find a code snippet

import PagerView from 'react-native-pager-view';
import React from 'react';
import { ScrollView, View, Image, StyleSheet, Animated } from 'react-native';
import { NavigationPanel } from './component/NavigationPanel';
import { useNavigationPanel } from './hook/useNavigationPanel';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export const ScrollablePagerViewExample = (): JSX.Element => {
  const { ref, ...navigationPanel } = useNavigationPanel();
  const [height, setHeight] = React.useState(0);

  return (
    <>
      <ScrollView style={styles.flex}>
        {navigationPanel.pages.map(({ key }) => (
          <AnimatedPagerView
            {...navigationPanel}
            ref={ref}
            key={key}
            style={{ height: height }}
          >
            {navigationPanel.pages.map((page) => (
              <View key={`${key}+${page.key}`} style={styles.content}>
                <View
                  onLayout={(e) => {
                    setHeight(e.nativeEvent.layout.height);
                  }}
                  style={{
                    width: '100%',
                    height: 150,
                    marginVertical: 16,
                  }}
                >
                  <Image style={styles.flex} source={page.imgSource} />
                </View>
              </View>
            ))}
          </AnimatedPagerView>
        ))}
      </ScrollView>
      <NavigationPanel {...navigationPanel} />
    </>
  );
};

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  content: {
    flex: 1,
    marginVertical: 10,
  },
});

[pelaxa]

This works if you are creating the child nodes, but what if the children are passed in as props.children? how to set the height then?

[troZee]

This works if you are creating the child nodes, but what if the children are passed in as props.children? how to set the height then?

<View
   onLayout={(e) => {
     setHeight(e.nativeEvent.layout.height);
   }}
 >
   {props.children}
 </View>

[pelaxa]

Thank you but onLayout always return a height of 0. even when I explicityly set height on the children, it still gets a height of 0.

     <PagerView
        ref={ref}
        pageMargin={10}
        initialPage={state.selectedPage}
        onPageSelected={pageSelected}
        style={{ height: height }}>
        {props.children.map((page, idx) => {
          return (
            <View
              key={`pnPagerView_${idx}`}
              onLayout={e => {
                console.log(`inner view ${idx}`, e.nativeEvent.layout);
                if (height < e.nativeEvent.layout.height) {
                  setHeight(e.nativeEvent.layout.height);
                }
              }}>
              {page}
            </View>
          );
        })}
      </PagerView>

 LOG  inner view 2 {"height": 0, "width": 360, "x": 0, "y": 0}
 LOG  inner view 0 {"height": 0, "width": 360, "x": 0, "y": 0}
 LOG  inner view 1 {"height": 0, "width": 360, "x": 0, "y": 0}

[pelaxa]

For anyone else that comes across this. I had to clone each page and add a style={paddingTop: 1} to get this to work as I expected.

[fukemy]

hi @pelaxa , can u provide more information, where you adding paddingTop? THanks

[pelaxa]

@fukemy this was a while back and I do not recall exactly. I moved away from using this module and used a scrollview instead.

[fukemy]

thanks, i gave up too

[matrunchyk]

Hi, thank you for you library! Any chance it can be fixed without using the height hack? :)