wcandillon / can-it-be-done-in-react-native

⚛️ 📺 Projects from the “Can it be done in React Native?” YouTube series
https://www.youtube.com/wcandillon
MIT License
4.03k stars 1.3k forks source link

Measurement of child component #151

Open StackTraceYo opened 3 years ago

StackTraceYo commented 3 years ago

Hi first of all thanks I love your vidoes.

In the measurement video and the code under reanimated2/accordion, I am having issues updating your example to accept a child component.

Specifically I have tried to add a from https://github.com/wix/react-native-calendars instead of the items list we are using in the tutorial but the height does not take it into account for some reason. Any input would be appreciated.

below is the code I changed


 <Animated.View style={[styles.items, style]}>
        <View
          ref={aref}
          onLayout={({
            nativeEvent: {
              layout: { height: h },
            },
          }) => {
            console.log(h);
          }}
        >
          <CalendarList
            pastScrollRange={0}
            futureScrollRange={3}
            horizontal
          />
        </View>
        {/*{list.items.map((item, key) => (*/}
        {/*  <Item*/}
        {/*    key={key}*/}
        {/*    isLast={key === list.items.length - 1}*/}
        {/*    {...{ item }}*/}
        {/*  />*/}
        {/*))}*/}
      </Animated.View>
`
NehrDani commented 3 years ago

I've the same issue. It seems the height of the View is not the actual height of their children when collapsed. Neither onLayout nor measure getting the correct height.