How to prevent numeric keyboard showing on Android after navigating - react native TextInput

Question

I have a react native TextInput with numeric keyboard, and it is working fine, except that the keyboard shows up again after the submit button has been clicked and it navigates to the next page (ShouldNotHaveKeyboardScreen). The next page has no text input and the keyboard should never show on that page. I want to make sure the keyboard doesn't show on the next screen, but I can't figure out how to do it. I attempted to dismiss the keyboard on submitting the textInput, but that doesn't work. I've also tried to dismiss it on the next screen as it loads, but that does't fully work either. The best I can do is to hide it after it pops up, but that is not ideal, I want it to be never shown.

I am using an android device (Android v.6.0.1) with react-native v0.48.3.

Here is the code, I've tried to remove any irrelevant parts.

// The screen that should not have keyboard

import { Keyboard } from 'react-native';

class ShouldNotHaveKeyboardScreen extends Component {
  componentDidMount() {
    Keyboard.dismiss();  // < that doesn't seem to work
    Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);

  }
  componentWillUnmount() {
    Keyboard.removeListener('keyboardDidShow', this._keyboardDidShow);
  }

  _keyboardDidShow()  {
    console.warn("keyboard did show");
    Keyboard.dismiss();  //  < this works, but the keyboard pops up first
  }

  // other stuff
}


// The screen with numeric text input
class TextInputScreen extends Component {
  componentDidMount() {
    Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    Keyboard.removeListener('keyboardDidHide', this._keyboardDidHide);
  }

  _keyboardDidHide() {
    console.warn("keyboard did hide oh yeah");
    Keyboard.dismiss();  // This doesn't help, the event happens but the next screen still shows keyboard
  }

  handleSendReadCommand(value) {
      // some stuff
      this.props.navigation.navigate('ShouldNotHaveKeyboardScreen');
    }
  }

  render() {
    return (
      <ScrollView style={styles.mainContainer}>
        <View style={styles.contentContainer}>
          <View style={styles.Container}>
            <View>
              <Text style={styles.Title}>Text here</Text>
              <ColoredTextInput inFocus={true}
                                value={this.props.setting_id}
                                returnKey={"search"}
                                onChangeText={(text) => { someAction(text)}}
                                onSubmitEditing={(event) => { 
                                  Keyboard.dismiss();  // This doesn't help
                                  this.handleSendReadCommand(event.nativeEvent.text)}}
              />  
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}

// numeric text input component
export default class ColoredTextInput extends Component {

  constructor(props) {
    super(props);
    this.state = {style: props.inFocus ? styles.text_input_in_focus : styles.text_input_not_focused};
    this.onFocus = () => this.setState({ style: styles.text_input_in_focus });
    this.onBlur = () => this.setState({ style: styles.text_input_not_focused });
  }

  static propTypes = {
    inFocus: PropTypes.bool.isRequired,
    onChangeText: PropTypes.func,
    onSubmitEditing: PropTypes.func,
    returnKey: PropTypes.string,
  };

  render() {
    let return_key = 'done';
    if (this.props.returnKey) {
      return_key = this.props.returnKey;
    }
    return (
      <TextInput
        style={[styles.text_input, this.state.style]}
        autoFocus={this.props.inFocus}
        returnKeyType={return_key}
        keyboardType="numeric"
        underlineColorAndroid="transparent"
        onBlur={() => this.onBlur()}
        onFocus={() => this.onFocus()}
        value={this.props.value}
        onChangeText={ this.props.onChangeText }
        onSubmitEditing={ this.props.onSubmitEditing }
      />
    );
  }
}

How can I hide the keyboard?