CODEWITHSUNDEEP
javascriptiosreactjsreact-nativereact-native-listview
Ata Mohammadi
Ata Mohammadi

Reputation: 3550

React Native: ListView with section headers and collapsible-expandable items

I have a simple app in react native (v 0.27). I have a listview (with sections and items). I was using react-native-accordion (https://github.com/naoufal/react-native-accordion) to make items collapsible.

everything was fine and no problem. but i couldn't get react-native-vector-icons working with TabbarIOS in react native version 0.27 (icon sizes are 30 by default. when you change it, it's not working. gives errors) , but it's working fine with react native version 0.14.1 (like this one https://github.com/catalinmiron/react-native-dribbble-app )

to be able to use react-native-vector-icons with tabbarios , i revert back to react-native v0.14.1 , it's working fine, but i cannot use react-native-accordion anymore, since it requires react native v0.20 or higher.

so i wanted to ask, is there anyway to have listview with section data and items which are collapsible, without using react-native-accordion ?

Any help is highly appreciated, thanks in advance.

Upvotes: 1

Views: 5558

Answers (1)

Ankit vadariya
Ankit vadariya

Reputation: 1263

Before some days i stuck in same problem. but now this code is work for me

your list view code

<ListView
    style={styles.container}
    dataSource={this.state.dataSource}
    renderRow={(data) =>
        <View style={{ flex: 1, flexDirection: "column" }}>
            <View style={{ flex: 1, flexDirection: "column" }}>
                <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", marginBottom: 0 }}>
                    <Text style={{ fontSize: 16, color: "#fff", padding: 5, textAlign: "center", width: 220, paddingLeft: 40, paddingRight: 40, borderStyle: "solid", borderRadius: 100, borderColor: "#fff", borderWidth: 1 }}>
                        {data.name}
                    </Text>
                </View>
                <TouchableHighlight
                    onPress={() => this.updateIndex(data._id)}>
                    <View style={{ alignItems: "center", justifyContent: "center", marginBottom: 5 }}>

                        {this.state.categoryIndex == data._id &&
                            <Text style={{ color: "#fff" }}>
                                <IonicIcons name="ios-arrow-up" style={{ fontSize: 20, marginTop: 10, padding: 0 }} />
                                <Text> Less</Text>
                            </Text>
                        }

                        {this.state.categoryIndex != data._id &&
                            <Text style={{ color: "#fff" }}>
                                <IonicIcons name="ios-arrow-down" style={{ fontSize: 20, marginTop: 10, padding: 0 }} />
                                <Text> More</Text>
                            </Text>
                        }
                    </View>
                </TouchableHighlight>
            </View>
            {this._renderCancel(data)}
        </View>
    }

you need to call updateIndex() function. and this function will just update state id which child view need to be open

this.state.categoryIndex == data._id will open ListView and if this.state.categoryIndex != data._id it will close your child ListView

My updateIndex() function is look like

 updateIndex(index) {
        if (this.state.showSubcategory && this.state.categoryIndex == index) {
            this.setState({
                showSubcategory: !this.state.showSubcategory,
                categoryIndex: false
            });
        } else {
            this.setState({
                showSubcategory: true,
                categoryIndex: index
            });
        }

    }

Upvotes: 1

Related Questions