0

I have been trying to do:

        <Animated.View
          style={[{
            height: this.collapse.interpolate({
              inputRange: [0, 1],
              outputRange: ['0%', '100%'],
            }),
          }]}
        >
          {children}
        </Animated.View>

But the one item from the list take the FlatList total height.

I have tried to use minHeight, but same problem.

How can I make my animated height on 100%?

Reproduction

Snack : https://snack.expo.io/@kopax/petrified-cookies

With a browser, the height is not of the height of the <FlatList />, but on native, it looks like this:

expo native view has too much max height

How can I use a dynamic height for this animation?

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
  • can u share it on [snack](https://snack.expo.io/)? – Oliver D Feb 15 '20 at 18:37
  • I have just updated my answer with a Snack reproduction. – Dimitri Kopriwa Feb 15 '20 at 18:52
  • Note that you can set `childrenContainerStyle` and `containerStyled` on the parent of the animated view, see : https://github.com/software-mansion/react-native-gesture-handler/blob/master/Swipeable.js#L320 . I have also found that `maxHeight` and `minHeight` doesn't play well together in react native. so far I have tried to play with the available css, like `flex` or `minHeight`,`maxHeight`, `height`, and have not found one way to achieve the dynamic height. – Dimitri Kopriwa Feb 15 '20 at 19:03
  • @OliverD any tought? – Dimitri Kopriwa Feb 16 '20 at 04:12
  • Sadly No, check @needsleep answer :) – Oliver D Feb 16 '20 at 21:18

1 Answers1

0

If your items are of different height then one solution would be to calculate this height using the onLayout function when the Swipeable items are rendered and then use this value for your animation. 

class GmailStyleSwipeableRow extends Component {
  static animationDeleteDuration = 200; // eslint-disable-line react/sort-comp

  constructor(props) {
    super(props);
    this.collapse = new Animated.Value(1);
    this.height = 75;
  }

  render () {
  return (<Swipeable>
    <Animated.View
        onLayout={event => {
            const { height } = event.nativeEvent.layout;
            this.height = height;
        }}
        style={[
            {
            minHeight: 75, //give it a default minHeight
            height: this.collapse.interpolate({ 
                inputRange: [0, 1],
                outputRange: [0, this.height], //base your animation on the calculated height
            }),
            },
        ]}
        >
      {children}
    </Animated.View>
  </Swipeable>)
  }
}

But if your items are like your example then you can save all these calculations and just give the items the same height.

needsleep
  • 2,685
  • 10
  • 16
  • They are not the same height, so we can't give the same height (I confirm this again). Regarding `onLayout`, it will trigger multiple render. I still have tried to use it, as it was my one option, and it didn't change the height as I expected. Would you mind updating your question with a snack.expo.io ? – Dimitri Kopriwa Feb 17 '20 at 03:29
  • I have tried your explanation and setting the `minHeight` and `this.height = 75` in the constructor will set the final height. I have removed it and now I get the full height but, the animation does not collapse for some reason, perhaps the onLayout is resetting the value multiple time ? – Dimitri Kopriwa May 20 '20 at 14:24
  • The value of this.height in the interpolate is always undefined, I have not found a reliable way of setting a value from onLayout and using it in style. – Dimitri Kopriwa May 20 '20 at 14:37
  • 1
    any solution on this yet?? – Jayraj Jul 24 '20 at 04:25