Demo RN application to play with FlatLists

SwitcherApp.jsx

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

const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
const numbers = '0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789'.split('');

class ListDisplay extends PureComponent {
  _header = () => {
    return (
      <View>
        <View style={viewstyle}>
          <Text style={[textstyle, {fontWeight: 'bold', color: 'black'}]}>{this.title}</Text>
        </View>
        <TouchableOpacity onPress={() => this.props.setDisplay(this.target)} style={[viewstyle, {backgroundColor: 'blue', height: 60}]}>
          <Text style={[textstyle]}>Go to {this.target}</Text>
        </TouchableOpacity>
      </View>
    );
  }
  _renderItem = (params) => {
    return (
      <View style={[viewstyle, {backgroundColor: backgrounds[params.index % 7]}]}>
        <Text style={[textstyle]}>{params.item}</Text>
      </View>
    )
  }
  render() {
    return (
      <View>
        <FlatList
          ListHeaderComponent={this._header}
          data={this.contents}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => String(index)}
          initialNumToRender={4}
          maxToRenderPerBatch={1}
          updateCellsBatchingPeriod={250}
        />
      </View>
    )
  }
}

class Alphabet extends ListDisplay {
  title = 'Alphabet';
  target = 'Numerals';
  contents = letters;
}

class Numerals extends ListDisplay {
  title = 'Numerals';
  target = 'Alphabet';
  contents = numbers;
}

const viewstyle = {
  padding: 10,
  alignItems: 'center',
  justifyContent: 'center',
  borderWidth: 1,
  height: 40,
}

const textstyle = {
  fontSize: 24,
  color: 'black',
}

const backgrounds = [
  '#FFFFFF',
  '#FFFF00',
  '#FF00FF',
  '#FF0000',
  '#00FFFF',
  '#00FF00',
  '#0000FF',
]

class Switcher extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      display: 'Alphabet',
    }
  }
  setDisplay = (display) => {
    this.setState({display: display});
  }
  render() {
    if (this.state.display === 'Alphabet') {
      return <Alphabet setDisplay={this.setDisplay}/>
    } else {
      return <Numerals setDisplay={this.setDisplay}/>
    }
  }
}

export default Switcher;