How to add two icons "+" and "-" in NestedListView

[nammiharika]

Describe the bug
I am using this module and it's working fine. I want to display the "+" and "-" icons in NestedListView. I already displayed "+" icon in NestedRow. Once user clicks on row it turns to "-" icon. How can i change "+" to "-" icon in NestedRow.

To Reproduce
Steps to reproduce the behavior:

1. Click on NestedRow.
2. "+" icon changed to "-" icon.

Expected behavior
I want to show both "+" and "-" icons. Because NestedRow is extended it changes to "-" icon
Screenshots

[fjmorant]

Hi @nammiharika ,

Sorry for my late reply to this message, it would be super simple:

<NestedListView
  data={data}
  getChildrenName={(node) => 'items'}
  onNodePressed={(node) => alert('Selected node')}
  renderNode={(node, level) => (
    <NestedRow
      level={level}
      style={styles.row}
    >
      <Text>{node.title}</Text>
    </NestedRow>
  )}
/>

the parameter nodehas an attribute called opened then you can change the icon (or text) depending on this param.

I hope I could answer your question

[nammiharika]

Hi @fjmorant, thank you for your reply.

Where to give opened key in NestedListView

Here is my code...

<NestedListView
            data={data}
            getChildrenName={node => 'categories'}
            onNodePressed={node =>
              console.log('Selected node11___________', node.categories.length)
            }
            renderNode={(node, level) => {
              // console.log('level___________', level);
              return (
                <View
                  style={{
                    flexDirection: 'row',
                    height: 40,
                    // backgroundColor: 'lightblue',
                    alignItems: 'center',
                    borderColor: 'grey',
                    borderBottomWidth: 1,
                  }}>
                  <NestedRow level={level} style={{color: 'black'}}>
                    <Text>{node.title}</Text>
                  </NestedRow>
                  <Image
                    source={require('@Images/plus.png')}
                    style={{height: 15, width: 15, marginRight: 15}}
                  />
                </View>
              );
            }}
          />

[iagows]

Hi @fjmorant, thank you for your reply.

Where to give opened key in NestedListView

Here is my code...

<NestedListView
            data={data}
            getChildrenName={node => 'categories'}
            onNodePressed={node =>
              console.log('Selected node11___________', node.categories.length)
            }
            renderNode={(node, level) => {
              // console.log('level___________', level);
              return (
                <View
                  style={{
                    flexDirection: 'row',
                    height: 40,
                    // backgroundColor: 'lightblue',
                    alignItems: 'center',
                    borderColor: 'grey',
                    borderBottomWidth: 1,
                  }}>
                  <NestedRow level={level} style={{color: 'black'}}>
                    <Text>{node.title}</Text>
                  </NestedRow>
                  <Image
                    source={require('@Images/plus.png')}
                    style={{height: 15, width: 15, marginRight: 15}}
                  />
                </View>
              );
            }}
          />

After <Text>{node.title}</Text>, try adding <Text>{node.opened ? '-':'+'}</Text>