CODEWITHSUNDEEP
react-native
David Jones
David Jones

Reputation: 10219

Issue an alert in React Native without dismissing the keyboard

In the code below, when you click on the button, the alert pops up and the keyboard is dismissed. Is there a way to issue an alert in React Native without dismissing the keyboard?

https://snack.expo.io/Hywcjv7WL

import * as React from "react";
import { Alert, TextInput, View, Button, StyleSheet } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          autoFocus={true}
        />
        <Button
          title="Press Me"
          onPress={() => {
            Alert.alert("Hello")
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 40
  },
  input: {
    padding: 10,
    borderWidth: 1
  }
});

Upvotes: 0

Views: 388

Answers (1)

Bora Sumer
Bora Sumer

Reputation: 860

I think you can do that programmatically by using ref.

<TextInput
    style={styles.textInput}
    ref={ref => this.textInputRef = ref}
    placeholder="Quiz Deck Title"
    autoFocus={true}
    value={this.state.title}
    onChangeText={(title) => this.controlledTextInput(title)}
/>

Then you can use this.textInputRef.focus() and trigger this after you dismiss the alert message.

Actually, also you can trigger this by using this code. 

Alert.alert(
  'Alert Title',
  'My Alert Msg',
  [
    {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ],
  {cancelable: false},
);

Upvotes: 1

Related Questions