context-no-update.js

import React from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';

let NamespaceContext = React.createContext(undefined);

export default class ExamplePage extends React.Component {
  constructor() {
    super();
    this.state = { currentMonth: 1 };
  }

  onPrevMonth = () => {
    this.setState({
      currentMonth: this.state.currentMonth - 1
    });
  };

  onNextMonth = () => {
    this.setState({
      currentMonth: this.state.currentMonth + 1
    });
  };

  render() {
    const { currentMonth } = this.state;
    return (
      <NamespaceContext.Provider value={currentMonth}>
        <View>
          <View
            style={{
              flexDirection: 'row',
              marginBottom: 20,
              justifyContent: 'space-between'
            }}
          >
            <TouchableOpacity onPress={this.onPrevMonth}>
              <Text>Previous</Text>
            </TouchableOpacity>

            <Text>{currentMonth}</Text>

            <TouchableOpacity onPress={this.onNextMonth}>
              <Text>Next</Text>
            </TouchableOpacity>
          </View>

          <BudgetTable />
        </View>
      </NamespaceContext.Provider>
    );
  }
}

export class BudgetCategory extends React.PureComponent {
  render() {
    return (
      <NamespaceContext.Consumer>
        {sheetName => <Text>{sheetName}</Text>}
      </NamespaceContext.Consumer>
    );
  }
}

const categories = [{ id: 'c1' }, { id: 'c2' }, { id: 'c3' }, { id: 'c4' }];

function BudgetTable() {
  return categories.map(category => {
    return <BudgetCategory key={category.id} category={category} />;
  });
}