Estoy haciendo uso del componente List.accordion de la libreria react-native paper. La primera vez que se renderiza el componente se muestran los accordions sin expandir (que es el comportamiento esperado), pero al desplegar una opcion, pasar a otra pantalla y volver, el accordion continua deplegado.
Lo que deseo hacer es que retorne a su valor por defecto (sin expandir) al pasar a otra pantalla
Componente Accordion
import {List, Divider} from "react-native-paper";
import React, {useState} from "react";
const Accordion = () => {
const [expanded, setExpanded] = useState(false);
const handlePress = () => setExpanded(!expanded);
const options = [
{
title: "Opcion 1",
icon: "phone",
disabled: false
},
{
title: "Opcion 2",
icon: "file",
disabled: false
},
];
return (
<View>
<List.Accordion
title="My Accordion"
style={{height: 60}}
expanded={expanded}
onPress={ () => handlePress() }
left={(props) => (
<List.Icon {...props} color="#06D7A0" />
)}
theme={{colors: {primary: "#06D7A0", text: "gray"}}}
>
{options.map((item, i) => (
<List.Item
title={item.title}
key={i}
titleStyle={{
color: "white",
fontFamily: "Lato-Regular",
fontSize: 17,
}}
style={[
{backgroundColor: item.disabled ? "#D6DADD" : "#06D7A0"},
]}
left={(props) => (
<List.Icon
{...props}
icon={item.icon}
color="white"
type="font-awesome"
size={20}
/>
)}
disabled={item.disabled}
onPress={() => toast(item.page)}
/>
))}
</List.Accordion>
<Divider />
</View>
)
}
export default Accordion;
Componente Donde utilizo el Accordion
import React from 'react'; import Accordion from 'Accordion'
const App = () => {
renderItem = ({ item, index }) => (
<Accordian
title={item.title}
icon={item.icon}
data={item.data}
/>
)
return (
<View style={{flex:1}}>
<FlatList
data={miData}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem}
/>
</View>
)
}
Como puedo hacer para que al cambiar de pantalla los elemento de la lista no esten expandido.
useState
? – Paulo Urbano Rivera el 10 sep. 20 a las 2:32