class ScrollableLoginScreen extends React.Component { _scrollToInput (event, reactNode) { // Add a 'scroll' ref to your ScrollView this.refs.scroll.scrollToFocusedInput(event, reactNode) } render() { return ( <KeyboardAwareScrollView ref='scroll'> <LoginScreen {...this.props} scrollToInput={this._scrollToInput.bind(this)} /> </KeyboardAwareScrollView> ) } } class LoginScreen extends React.Component { render() { const {fields, handleSubmit, submitting, error, scrollToInput, ...props} = this.props return ( <View style={styles.screen}> <StatusBar hidden={false} /> <View style={styles.modal}> <IconTextInput ref='my-input' iconName="envelope-o" placeholder='Email' style={styles.input} {...fields.email} onFocus={scrollToInput} /> <IconTextInput iconName="lock" placeholder='Password' style={styles.input} {...fields.password} onFocus={scrollToInput} /> <Button style={theme.BUTTON} styleDisabled={theme.BUTTON_DISABLED} containerStyle={styles.loginButton} disabled={submitting} onPress={handleSubmit}>LOGIN</Button> {submitting && <Spinner />} {(!submitting && error) && <Text style={theme.TEXT_ERROR}>{error}</Text>} </View> </View> ) } }