statusbar.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Text, View, StatusBar, Platform, Button } from "react-native";

const MyStatusBar = ({ backgroundColor, ...props }) =>
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar backgroundColor={backgroundColor} {...props} />
  </View>;

const colors = ["#4286f4", "#f441ca", "#41f46a"]; // Create an array of colors

export default class TypeApp extends Component {
  constructor(props) {
    super(props);
    this.state = { statusBackgroundColor: "#000" }; // set the initial color of the statusBar, can be any color, I went with black
  }

  // Instead of doing this, you can decide to call it randomly like this
  // colors[Math.floor(Math.random() * 3)]
  // this would call a different color on every click
  handleClick1() {
    this.setState({
      statusBackgroundColor: colors[0] 
    });
  }

  handleClick2() {
    this.setState({
      statusBackgroundColor: colors[1]
    });
  }

  handleClick3() {
    this.setState({
      statusBackgroundColor: colors[2]
    });
  }
  render() {
    return (
      <View style={styles.containerStyle}>
        <MyStatusBar
          backgroundColor={this.state.statusBackgroundColor}
          barStyle="light-content"
        />
        <View style={styles.appBar} />
        <View style={styles.content}>
           // The buttons represent the menu you want to press
          <Button title="Button One" onPress={() => this.handleClick1()} />
          <Button title="Button Two" onPress={() => this.handleClick2()} />
          <Button title="Button Three" onPress={() => this.handleClick3()} />

        </View>
      </View>
    );
  }
}

const STATUSBAR_HEIGHT = Platform.OS === "ios" ? 20 : 0;
const APPBAR_HEIGHT = Platform.OS === "ios" ? 44 : 56;

const styles = {
  containerStyle: {
    flex: 1,
    justifyContent: "center"
  },
  statusBar: {
    height: STATUSBAR_HEIGHT
  },
  appBar: {
    backgroundColor: "#79B45D",
    height: APPBAR_HEIGHT
  },
  content: {
    flex: 1,
    backgroundColor: "#33373B"
  }
};