App.js

import React, { PureComponent } from 'react'
import {
  View,
  Text,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
} from 'react-native'

import Item from './Item'

class App extends PureComponent {
  state = {
    items: [],
  }

  addItem = () => {
    this.setState(state => ({ items: [...state.items, state.items.length] }))
  }

  renderButton() {
    return (
      <TouchableOpacity onPress={this.addItem} style={styles.button}>
        <Text style={styles.buttonLabel}>
          Add item
        </Text>
      </TouchableOpacity>
    )
  }

  renderItems() {
    const { items } = this.state

    return items.map(item => <Item text={item} key={item} />)
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden translucent animated />
        {this.renderButton()}
        {this.renderItems()}
      </View>
    )
  }
}

export default App

const styles = StyleSheet.create({
  buttonLabel: {
    fontSize: 16,
    color: 'white',
    textAlign: 'left',
  },
  button: {
    paddingHorizontal: 60,
    paddingVertical: 21,
    backgroundColor: '#333ddd',
    borderRadius: 21,
  },
  container: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    paddingVertical: 30
  },
})

Item.js

import React, { PureComponent } from 'react'
import { View, Text } from 'react-native'

let ref = 0

class Item extends PureComponent {

  componentDidMount = () => {
    console.log('mounted', this.props.text, ref)

    ref = ref + 1
  }
  
  componentDidUpdate() {
    console.log('updated', this.props.text)
  }

  render() {
    const { text } = this.props

    return (
      <View>
        <Text>{text}</Text>
      </View>
    )
  }
}

export default Item