ReactNative Clear Text Input with Separated Code & View

I have some experience with ReactNative but moving forward having been trying to build it with a better folder structure like popular boilerplates are.

I have the following files relating to this issue all in the routes/Login directory:

• index.js
• Login.js
• LoginContainer.js
• styles.js (not relevant so not included).

See below the contents (skimmed to what is relevant).

index.js

import LoginContainer from './LoginContainer';
import Login from './Login';

export { Login };
export default LoginContainer;

LoginContainer.js

import React, { Component } from 'react';
import Login from './Login';

import { Api } from '../../lib/api/index';

class LoginContainer extends Component {
  constructor(props) {
    super(props);

    this.mounted = false;
    this.state = {
      email: '',
      password: '',
      confirmPassword: '',
      confirmPasswordVisible: false,
      inputPassword: '',
      error: null,
      loading: false,
    };
  }

  componentWillMount() {
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  componentDidMount() {
      setInterval(() => {
        this.setState({
          visible: !this.state.loading
        });
      }, 3000);
    }

  async loginSubmit(){
    console.log(this.state.email)
    console.log(this.state.password)
    this.setState({ loading: true });
    try{
      let response = await Api.auth.login(this.state.email, this.state.password)
      console.log(await response);
    }catch (err){
      console.log('error');
      console.log(err);
    }
    // this.setState({ passwordInput: '' });
    this.inputPassword.setNativeProps({text: ''});
    this.setState({ loading: false });
    console.log('AFTER')
  }

  render() {
    return (
      <Login
        updateState={this.setState.bind(this)}
        loginSubmit={this.loginSubmit.bind(this)}
        {...this.state}
      />
    );
  }
}

export default LoginContainer;

Login.js

import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Spinner from 'react-native-loading-spinner-overlay';

const Login = (props) => {

    const { updateState, signIn, createAccount, error, confirmPasswordVisible, loginSubmit, inputPassword } = props;

    return (
      <View style={{margin: 128}}>
        <Spinner visible={props.loading} textStyle={{color: "#FFF"}} />
        <Text onPress={Actions.Login}>This is PageOne!</Text>
        <TextInput
          style={{height: 40}}
          placeholder="Email here"
          onChangeText={(email) => updateState({ email })}
        />
        <TextInput
          style={{height: 40}}
          placeholder="Password here"
          secureTextEntry={true}
          ref={component => inputPassword = component}
          onChangeText={(password) => updateState({ password })}
        />
        <Text onPress={loginSubmit} >LOGIN</Text>
      </View>
    )
}

Login.propTypes = {
  updateState: React.PropTypes.func,
  loginSubmit: React.PropTypes.func,
  signIn: React.PropTypes.func,
  createAccount: React.PropTypes.func,
  inputPassword: React.PropTypes.string,
  error: React.PropTypes.string,
  confirmPasswordVisible: React.PropTypes.bool,
};

export default Login;

Extracted most of my function is working perfectly and working with states is also working as expected.

I am trying to overcome an issue that I need to clear the password field. React Native support docs show a simple example of this @ https://facebook.github.io/react-native/docs/direct-manipulation.html

In my Login.js (View) i have

1) defined the string inputPassword: React.PropTypes.string,

2) have it in const retrieved from props.

3) Tried updating it using update state this.setState({ passwordInput: '' });

4.) Also tried updating it directly as per link like this this.inputPassword.setNativeProps({text: ''}); also no Joy.

I think i am just approaching it wrong, would much love for someone to assist me with this :D