CODEWITHSUNDEEP
javascriptreact-nativeexporeact-animatedreact-native-web
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14353

How to animate height to 100% in react-native?

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?

Upvotes: 0

Views: 10320

Answers (1)

needsleep
needsleep

Reputation: 2715

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.

Upvotes: 0

Related Questions