React native Accordion animation Bug - react-native

Question

So, I am trying to make accordion in react-native.
When I am opening & closing the acccordion.
The is getting mounted/unmounted taking the space required & then animation is happening over the layout.
How can I fix this using react-native-reanimated ?
My code is like this
<Accordion layout={Layout.duration(1500)} style={{borderBottomWidth:1}}>
<Header onPress={setOpenedMonths}/>
{isOpen && <Content/>}
</Accordion>

Answer 1

Please try this.
import React, {PureComponent} from 'react';
import {
Text,
View,
StyleSheet,
LayoutAnimation,
Platform,
UIManager,
TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class ExpandCollapse extends PureComponent {
constructor() {
super();
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
changeLayout = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.props.onOpenBond();
};
render() {
let {data} = this.props;
return (
<View style={styles.container}>
<View style={styles.btnTextHolder}>
<TouchableOpacity
activeOpacity={0.8}
onPress={this.changeLayout}
style={styles.Btn}>
<View
style={{
height: 30,
width: 30,
borderRadius: 15,
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
}}>
<Icon
name={
this.props.isOpen
? 'chevron-up-outline'
: 'chevron-down-outline'
}
size={24}
color="#fff"
/>
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.titleText}>Rating Agency</Text>
<Text style={styles.contentText}>
{typeof data.agency == 'string'
? data.agency
: data.agency.agency_name}
</Text>
</View>
</TouchableOpacity>
<View
style={{
height: this.props.isOpen ? null : 0,
overflow: 'hidden',
}}>
<View style={[styles.Btn, {paddingVertical: 0}]}>
<View
style={{
height: 30,
width: 30,
borderRadius: 15,
}}></View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.titleText}>Rating</Text>
<Text style={styles.contentText}>
{data.rating_name != undefined
? data.rating_name
: data.rating}{' '}
{data.outlook == 1
? 'Positive'
: data.outlook == 2
? 'Stable'
: data.outlook == 3
? 'Negative'
: ''}
</Text>
</View>
</View>
<View style={[styles.Btn, {paddingVertical: 0, marginTop: 10}]}>
<View
style={{
height: 30,
width: 30,
borderRadius: 15,
}}></View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.titleText}>Remarks</Text>
<Text style={styles.contentText}>
{data.remark == '' ? '-' : data.remark}
</Text>
</View>
</View>
<View
style={[styles.Btn, {paddingVertical: 0, marginVertical: 10}]}>
<View
style={{
height: 30,
width: 30,
borderRadius: 15,
}}></View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.titleText}>Rating Rationale</Text>
<Text
onPress={() => {
if (
data.filename == '' ||
data.filename == undefined ||
data.filename == null
) {
return;
}
this.props.openPdfView();
}}
style={[
styles.contentText,
{
color: 'green',
textDecorationLine:
data.filename == '' ? 'none' : 'underline',
},
]}>
{data.filename == '' ? '-' : 'Pdf File'}
</Text>
</View>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
titleText: {
fontSize: 16,
color: '#AAA',
marginLeft: 10,
flex: 1,
},
contentText: {
fontSize: 16,
color: '#aaa',
marginLeft: 10,
flex: 1,
},
btnTextHolder: {
borderWidth: 0.5,
borderColor: 'rgba(0,0,0,0.2)',
},
Btn: {
paddingHorizontal: 20,
paddingVertical: 10,
flexDirection: 'row',
alignItems: 'center',
},
});