Maintaining state across multiple React Navigation StackNavigator screens with this.props.screenProps (probably the wrong way to do this!)

index.ios.js

import React, { Component } from 'react'
import {
  AppRegistry,
  Button,
  Text,
  TextInput,
  View,
} from 'react-native'
import { StackNavigator } from 'react-navigation'
import validator from 'email-validator'

class WizardStep1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: this.props.screenProps.formState.email,
      nextDisabled: true
    }
  }

  static navigationOptions = {
    title: 'Step 1: Email'
  }

  onChangeEmail(text) {
    this.setState({ email: text }, () => this.enableNextScreen())
  }

  enableNextScreen() {
    const valid_email = validator.validate(this.state.email)
    this.setState({
      nextDisabled: !valid_email
    })
  }

  saveAndContinue() {
    this.props.screenProps.formState.email = this.state.email
    this.props.navigation.navigate('Step2')
  }

  render() {
    const { formState } = this.props.screenProps;
    return (
      <View style={styles.View}>
        <Text>Email:</Text>
        <TextInput
          style={styles.TextInput}
          onChangeText={(text) => this.onChangeEmail(text)}
          value={this.state.email} />
        <Button
          disabled={this.state.nextDisabled}
          onPress={() => this.saveAndContinue()}
          title="Next" />
      </View>
    );
  }
}

class WizardStep2 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: this.props.screenProps.formState.name,
      nextDisabled: true
    }
  }

  static navigationOptions = {
    title: 'Step 2: Name'
  }

  onChangeName(text) {
    this.setState({ name: text }, () => this.enableNextScreen())
  }

  enableNextScreen() {
    const valid_name = this.state.name.length > 0
    this.setState({
      nextDisabled: !valid_name
    })
  }

  saveAndContinue() {
    this.props.screenProps.formState.name = this.state.name
    this.props.navigation.navigate('Step3')
  }

  render() {
    const { formState } = this.props.screenProps;
    return (
      <View style={styles.View}>
        <Text>Name:</Text>
        <TextInput
          style={styles.TextInput}
          onChangeText={(text) => this.onChangeName(text)}
          value={this.state.name} />
        <Button
          disabled={this.state.nextDisabled}
          onPress={() => this.saveAndContinue()}
          title="Next" />
      </View>
    );
  }
}

class WizardStep3 extends React.Component {
  constructor(props) {
    super(props)
  }

  static navigationOptions = {
    title: 'Step 3: Confirm'
  }

  render() {
    const { formState } = this.props.screenProps;
    return (
      <View style={styles.View}>
        <Text>Name: {formState.name}</Text>
        <Text>Email: {formState.email}</Text>
      </View>
    );
  }
}

const Wizard = StackNavigator({
  Step1: { screen: WizardStep1 },
  Step2: { screen: WizardStep2 },
  Step3: { screen: WizardStep3 },
});

export default class App extends Component {
  render() {
    return (
      <Wizard screenProps={{formState:{}}} />
    );
  }
}

const styles = {
  View: {
    padding: 10
  },
  TextInput: {
    height: 40,
    borderColor: '#DEDEE2',
    borderWidth: 1,
    padding: 10,
    backgroundColor: 'white'
  }
}

AppRegistry.registerComponent('App', () => App);