StackAggregator change Children

[chpppeng]

StackAggregator is worked well but when I want to change children, It caused TypeError: undefined is not an object (evaluating 'value.getValue')

Related to

• [x] Components
• [x] Demo

Steps to reproduce

1. Run the sample code ,
2. Click "test“ button to add data to contents ,
3. TypeError: undefined is not an object (evaluating 'value.getValue')

Actual behavior

When change the children map, it caused exception.

More Info

Code snippet

export default class StackAggregatorScreen extends Component {
    state = { contents: [
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
      ] };
  
  onItemPress = (index: number) => {
    console.warn('item pressed: ', index);
  }

  onPress = (index: number) => {
    console.warn('item\'s button pressed: ', index);
  }

  refreshItems=()=>{
      var items = this.state.contents;
        items.push('test')
        this.setState({
            contents: items
        })

  }
  renderItem = (_: string, index: number) => {
    return (
      <View key={index} center padding-12>
        <Button label={`${index}`} marginB-10 size={Button.sizes.small} onPress={() => this.onPress(index)}/>
        <Text>{this.state.contents[index]}</Text>
      </View>
    );
  }

  render() {
    return (
        
      <ScrollView keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
            <Button label='test' onPress={()=>{this.refreshItems()}} />
        <Text center grey40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
        <StackAggregator
          containerStyle={{marginTop: 12}}
          onItemPress={this.onItemPress}
        >
          {this.state.contents.map((item, index) => {
            return this.renderItem(item, index);
          })}
        </StackAggregator>
      </ScrollView>
    );
  }
}

Screenshots/Video

Environment

• React Native: 0.68.2
• React Native UI Lib: 6.15.0

Affected platforms

• [x] Android
• [x] iOS
• [ ] Web

[Inbal-Tish]

@chpppeng Thank you for reporting the bug, we'll address it as soon as possible. In the meantime you can add key={this.state.contents.length} to rerender the component when the items count changes.