CODEWITHSUNDEEP
javascriptreactjsreact-native
Emily
Emily

Reputation: 141

The menu is collapsing out but not in?

Im using the accordion-collapse-react-native library. What I have to do is, when the card is clicked and the menu is opened the arrow icon should change from arrow down to arrow up. The logic that im using is opening and changing the arrow but its not closing anymore. Can u help me to figure out why??

const [collapse, setCollapse] = useState(false);

<Collapse
    style={styles.locationContainer}
    isCollapsed={collapse}
    onToggle={(isCollapsed) => setCollapse({ collapse: isCollapsed })}>
    <CollapseHeader>
        <TouchableOpacity onPress={() => setCollapse({ collapse: !collapse })}>
            <Text style={styles.title}>Zgjedhni lokacionin</Text>
            <View style={styles.friendsContainer}>
                <View style={styles.itemsContainerLocation}>
                    <Text style={styles.subTitle}>Shtëpia e shokut</Text>
                    <Text style={styles.default}>(parazgjedhur)</Text>
                </View>
                {collapse ? (
                    <Ionicons name="ios-arrow-up" size={24} color="black" />
                ) : (
                    <Ionicons name="ios-arrow-down" size={20} color="black" />
                )}
            </View>
        </TouchableOpacity>
    </CollapseHeader>
    <CollapseBody>
        <View style={styles.adressesContainer}>
            <Text style={styles.adressesName}>Shtëpia ime</Text>
        </View>
        <View style={styles.adressesContainer}>
            <Text style={styles.adressesName}>Shtëpia e prindërve</Text>
        </View>
        <View style={styles.adressesContainer}>
            <Text style={styles.adressesName}>Shtëpia e gjyshit</Text>
        </View>
    </CollapseBody>
</Collapse>

Upvotes: 0

Views: 217

Answers (1)

antoineso
antoineso

Reputation: 2151

Your accordion-collapse-react-native component looks like the exemple in the doc (and this is not a reproach), the only difference is that you are using usestate hook and the exemple is a Class component so the managing state syntax change a bit. Instead of onToggle={(isCollapsed) => setCollapse({ collapse: isCollapsed })}> try onToggle={(isCollapsed) => setCollapse( isCollapsed )} And instead of <TouchableOpacity onPress={() => setCollapse({ collapse: !collapse })}> try <TouchableOpacity onPress={() => setCollapse( !collapse )}>

Upvotes: 1

Related Questions