Accordion with ScrollView Inside doesn`t work

[GabVlado]

Hello, Could someone help me, I want to make an accordion and within each of the options it will contain a ScrollView with several options. I tried to do it with the example in the documentation and it didn't work.

The Documentation, https://docs.swmansion.com/react-native-reanimated/examples/accordion/

Copy this Code and try in https://snack.expo.dev/ to see the error.

import React from 'react';
import { StyleSheet, View, Button, SafeAreaView, ScrollView, Image, Text } from 'react-native';
import Animated, {
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withTiming,
} from 'react-native-reanimated';

function AccordionItem({
isExpanded,
children,
viewKey,
style,
duration = 500,
}) {
const height = useSharedValue(0);

const derivedHeight = useDerivedValue(() =>
withTiming(height.value * Number(isExpanded.value), {
duration,
})
);
const bodyStyle = useAnimatedStyle(() => ({
height: derivedHeight.value,
}));

return (
<Animated.View
key={accordionItem_${viewKey}}
style={[styles.animatedView, bodyStyle, style]}>
<View
onLayout={(e) => {
height.value = e.nativeEvent.layout.height;
}}
style={styles.wrapper}>
{children}

</Animated.View>
);
}

function Item() {

return (

<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba
<Text style={{fontSize: 24}}>Prueba

)
}

function Parent({ open }) {
return (





);
}

export default function App() {
const open = useSharedValue(false);
const onPress = () => {
open.value = !open.value;
};

return (

  <View style={styles.content}>
    <Parent open={open} />
  </View>
</SafeAreaView>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 24,
},
buttonContainer: {
flex: 1,
paddingBottom: '1rem',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
parent: {
width: 200,
},
wrapper: {
width: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
},
animatedView: {
width: '100%',
overflow: 'hidden',
},
});

[MatiPl01]

Issue description

When you add console.log(e.nativeEvent.layout.height) to the onLayout in which you set the height.value, you can see that it logs values which are almost equal. This is caused by the fact that the ScrollView with unrestricted height (you neither set the maxHeight explicitly, nor the height of the ScrollView is restricted by the layout) will grow dimensions of its content. In your case, it will always have the same height as the total height of Text components rendered inside.

Because on each layout change you set the height.value and use it to set the height of the wrapping Animated.View (in the bodyStyle), the height of the ScrollView is recalculated, every time you update the height.value. The height returned in the onLayout is not 100% accurate (this issue is also related to other scrollable containers, e.g. FlatList), so the layout dimensions you get passed to the onLayout callback may differ slightly between calls.
In short, you keep setting height.value, which triggers another layout re-calculation, which calls onLayout again, which sets the height.value (and so on).

And now, why does animation work weird in such a case? Settings height.value triggers calculation of the derivedHeight which is animated with withTiming. Every change cancels the currently running animation and starts the new one. Because withTiming doesn't animate the value linearly (it starts slower, speeds up in the middle and slows down in the end), you see this weird animation.

Proposed solution

Solution 1 (easiest, not perfect)

You should limit height.value changes. The easiest solution is just using Math.round to round the measured height of the ScrollView. It might not be perfect (when the height you get between measurements is close to the rounding point, e.g. 100.499999 and 100.500001, this solution won't help as these measurements will result in 100 and 101 respectively).

onLayout={(e) => {
  height.value = Math.round(e.nativeEvent.layout.height);
}}

Solution 2 (much better one)

You pick an epsilon EPS (the value small but not too small) and use it to compare the new value with the previously measured one. If the new one is too close to the previous one (the absolute difference is too small), you don't update the value and treat the new like it was the same.

const EPS = 1

const newHeight = e.nativeEvent.layout.height;
runOnUI(() => {
  if (Math.abs(newHeight - height.value) > EPS) {
    height.value = newHeight;
  }
})();

Example recordings

Before	With suggested solution (#1 or #2)
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-11.at.15.16.00.mp4	Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-11.at.15.15.07.mp4

[MatiPl01]

One more thing, in your case, when you don't set the maxHeigth of the ScrollView, the ScrollView usage doesn't make sense at all. It will always grow with the content and you won't be able to scroll it. In order to make it work fine, please add maxHeight property to the ScrollView.

I just added maxHeight: 400 to the style passed to the ScrollView.

Before	After
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-11.at.15.19.50.mp4	Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-11.at.15.21.45.mp4

[ShanTheShan]

setting the maxHeigth of the ScrollView alones solves it. cheers

[MatiPl01]

Thanks for letting know that it worked for you! I am closing the discussion, since your problem is resolved.