CODEWITHSUNDEEP
react-native
Molly Harper
Molly Harper

Reputation: 2453

Focus input on load of Modal in React Native

I'm using React Native's Modal component. I would like to focus on a TextInput & show keyboard when the Modal is visible.

Any ideas how to do this?

Upvotes: 15

Views: 11311

Answers (2)

Maximilian Dietel
Maximilian Dietel

Reputation: 1128

Set the property autoFocus on the TextInput to true:

<TextInput
  autoFocus={true}
/>

Upvotes: 9

Saleel
Saleel

Reputation: 899

You can add a reference to the text input and call the focus method from the onShow handler of the Modal.

    import React, { Component } from 'react';
    import { Modal, Text, TextInput, TouchableHighlight, View } from 'react-native';
    
    export default class ModalExample extends Component {
    
      state = {
        modalVisible: false,
      }
    
      render() {
        return (
          <View style={{flex: 1, justifyContent:'center', alignSelf: 'center'}}>
            <Modal
              animationType={"slide"}
              transparent={false}
              visible={this.state.modalVisible}
              onShow={() => { this.textInput.focus(); }}
              >
             <View style={{backgroundColor: 'green', marginTop: 50, width: 300, padding: 50, alignSelf: 'center'}}>
              <View>
                <Text>Hello World!</Text>
                <TextInput
                  ref={(input) => { this.textInput = input; }}
                  style={{ padding: 20, backgroundColor: 'white', color: 'red' }}
                />
              </View>
             </View>
            </Modal>
    
            <TouchableHighlight onPress={() => {
              this.setState({modalVisible: true});
            }}>
              <Text>Show Modal</Text>
            </TouchableHighlight>
    
          </View>
        );
      }
    }

Upvotes: 18

Related Questions