Q:

How can I orchestrate state change in my React Native page? 

I wish to have a number (say 10) different 'pages' on a React Native screen. 
The use case is a workflow or flowchart.  Each page can send you to multiple different places.  
I want the final thing to be flexible enough that I don't want to simply write the 10 or so .js pages and link them together.  
My cunning plan was to put a state object in the 'state' thing that React provides, I am now stumped as to how to update this object. 
This is my current code.  renderif is a bit of magic that hides the following layout if it is passed false 
The current behaviour is it shows 'page one' only.  when I press the button I see a blank screen. 
What basic javascript errors am I making?  and how have I over complexified this for myself :)
import React, {Component} from "react";
import {StyleSheet, Text, View, ScrollView, Image, Button} from "react-native";
import {Font, AppLoading, WebBrowser} from "expo";
import {Actions} from "react-native-router-flux";
import styles from "./Styles";
import renderif from "./RenderIf";

class pageToShow {
  constructor() {
    this. GoToPageOne();
  }
  GoToPageOne() {
    this.pageOne = true;
    this.pageTwo = false;
    return this;
  }
  GoToPageTwo() {
    this.pageOne = false;
    this.pageTwo = true;
    return this;
  }
}
export default class FlipBook extends Component {
  constructor(props) {
    super(props);
    this.state = {show: new pageToShow()};
  }
  render() {
    return (
      <View>
        {renderif(this.state.show.pageOne)(
          <ScrollView style={styles.background}>

            <Text style={styles.header}>
              <Text>{"Page one"}</Text>
            </Text>
            <Text style={styles.normal}>
              This is page one
            </Text>
            <Button
              title="This is a button to two"
              onPress={() => this.setState({show: this.state.show. GoToPageTwo})}
            />
          </ScrollView>
        )}
        {renderif(this.state.show.pageTwo)(
          <ScrollView style={styles.background}>
            <Text style={styles.header}>
              <Text>{"Page two"}</Text>
            </Text>
            <Text style={styles.normal}>
              This is page two
            </Text>
            <Button
              title="This is a button to one"
              onPress={() => this.setState({show: this.state.show. GoToPageOne})}
            />
          </ScrollView>
        )}
      </View>
    );
  }
}

A:

Hmm i think you're making this way more complicated than it should be.  For one you can use a navigation library to navigate between the pages, but if you want everything to be handled by state you could do something like this. * Also you could use 'case' to handle conditional rendering too:
export default class FlipBook extends Component {
  constructor(props) {
    super(props);
    this.state = {show: 'pageOne' };
  }
  render() {
    return (
      <View>
        {this.state.show === 'pageOne' ? ( 
          <ScrollView style={styles.background}>
            <Text style={styles.header}>
              <Text>{"Page one"}</Text>
            </Text>
            <Text style={styles.normal}>
              This is page one
            </Text>
            <Button
              title="This is a button to two"
              onPress={() => this.setState({show: 'pageTwo' })}
            />
          </ScrollView>
        ) : null}
        {this.state.show === 'pageTwo' ? ( 
          <ScrollView style={styles.background}>
            <Text style={styles.header}>
              <Text>{"Page two"}</Text>
            </Text>
            <Text style={styles.normal}>
              This is page two
            </Text>
            <Button
              title="This is a button to one"
              onPress={() => this.setState({show: 'pageOne' })}
            />
          </ScrollView>
        ) : null}
      </View>
    );
  }
}

