Android: ScrollView content container doesn't animate to new layout

Description

If the content in an Animated.ScrollView is using a layout transition, and transitioning from a larger height to a smaller height, the content container within the Animated.ScrollView jumps to the new height (instead of transitioning). This results in the content of the scroll view being clipped.

I’m only able to replicate this on Android, iOS seems to work fine.

Expected behavior

I would expect the layout of the content container to transition with the content on Android, as it does on iOS.

Actual behavior & steps to reproduce

https://user-images.githubusercontent.com/1010583/145732568-182c2f36-f68a-46d0-b55c-6691c94e9200.mp4

Snack or minimal code example

Note the layout prop on Animated.View below

import React, {useState} from 'react'
import {Button, SafeAreaView, StyleSheet} from 'react-native'
import Animated, {Easing, Layout} from 'react-native-reanimated'

export function randomIntFromInterval(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

const App = () => {
  const [height, setHeight] = useState(200)

  return (
    <SafeAreaView style={styles.container}>
      <Animated.ScrollView style={[styles.container]}>
        <Button
          title="Random height"
          onPress={() => {
            setHeight(randomIntFromInterval(200, 600))
          }}
        />
        <Animated.View
          layout={Layout.duration(240).easing(Easing.inOut(Easing.ease))} 
          style={{backgroundColor: 'teal', height}}
        />
      </Animated.ScrollView>
      )
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default App

Package versions

• React Native: 0.66.3
• React Native Reanimated: 2.3.0
• NodeJS:
• Xcode:
• Java & Gradle:

Affected platforms

• Android
• iOS
• Web

[piaskowyk]

Hey, I resolved the problem. You just need to use https://reactnative.dev/docs/scrollview#contentcontainerstyle

<Animated.ScrollView 
  contentContainerStyle={{ flex: 1 }} // <- this flex is important
>

Without this view was cropped by the parent component.

working code

import React, {useState} from 'react'
import {Button, SafeAreaView, StyleSheet} from 'react-native'
import Animated, {Easing, Layout} from 'react-native-reanimated'

export function randomIntFromInterval(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

const App = () => {
  const [height, setHeight] = useState(200)

  return (
    <SafeAreaView style={styles.container}>
      <Animated.ScrollView style={[styles.container]} 
        contentContainerStyle={{
          flex: 1
        }}
      >
        <Button
          title="Random height"
          onPress={() => {
            setHeight(randomIntFromInterval(200, 600))
          }}
        />
        <Animated.View
          layout={Layout.duration(240).easing(Easing.inOut(Easing.ease))} 
          style={{backgroundColor: 'teal', zIndex: 100, height}}
        />
      </Animated.ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default App;

[DigitalZebra]

Thanks much! Will give this a shot!