Keyboard causes modal to disappear React-Native
up vote
0
down vote
favorite
The workflow of what I am trying to do is the following:
- User clicks on
hamburger iconand gets adropdown.
- User clicks on
- User clicks on
rename.
- User clicks on
- A modal appears with a
TextInputand two buttons toacceptandcancel.
- A modal appears with a
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent=true
visible=renaming
onRequestClose=() =>
Alert.alert('Modal has been closed.');
>
<KeyboardAvoidingView style=styles.modalMask behavior="padding">
<View style=styles.modalContainer>
unitType === 'file' ?
<Text style=styles.modalHeader>Rename clip:</Text>
:
<Text style=styles.modalHeader>Rename folder:</Text>
<TextInput
style=styles.modalInput
onChangeText=(newTitle) => this.setState(title: newTitle)
defaultValue='tits'
autoFocus=true
selectTextOnFocus=true
keyboardAppearance='dark'
maxLength=30
/>
<View style=styles.modalOptions>
<TouchableHighlight
onPress=() =>
this.handleCloseModal();
style=styles.modalOption
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress=() =>
this.handleRename(id, unitType)
style=[styles.modalOption, styles.renameOption]
>
<Text style=color: 'white'>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
javascript react-native view
edited Nov 10 at 16:29
kit
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
add a comment |
up vote
0
down vote
favorite
The workflow of what I am trying to do is the following:
- User clicks on
hamburger iconand gets adropdown.
- User clicks on
- User clicks on
rename.
- User clicks on
- A modal appears with a
TextInputand two buttons toacceptandcancel.
- A modal appears with a
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent=true
visible=renaming
onRequestClose=() =>
Alert.alert('Modal has been closed.');
>
<KeyboardAvoidingView style=styles.modalMask behavior="padding">
<View style=styles.modalContainer>
unitType === 'file' ?
<Text style=styles.modalHeader>Rename clip:</Text>
:
<Text style=styles.modalHeader>Rename folder:</Text>
<TextInput
style=styles.modalInput
onChangeText=(newTitle) => this.setState(title: newTitle)
defaultValue='tits'
autoFocus=true
selectTextOnFocus=true
keyboardAppearance='dark'
maxLength=30
/>
<View style=styles.modalOptions>
<TouchableHighlight
onPress=() =>
this.handleCloseModal();
style=styles.modalOption
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress=() =>
this.handleRename(id, unitType)
style=[styles.modalOption, styles.renameOption]
>
<Text style=color: 'white'>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
javascript react-native view
edited Nov 10 at 16:29
kit
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
The workflow of what I am trying to do is the following:
- User clicks on
hamburger iconand gets adropdown.
- User clicks on
- User clicks on
rename.
- User clicks on
- A modal appears with a
TextInputand two buttons toacceptandcancel.
- A modal appears with a
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent=true
visible=renaming
onRequestClose=() =>
Alert.alert('Modal has been closed.');
>
<KeyboardAvoidingView style=styles.modalMask behavior="padding">
<View style=styles.modalContainer>
unitType === 'file' ?
<Text style=styles.modalHeader>Rename clip:</Text>
:
<Text style=styles.modalHeader>Rename folder:</Text>
<TextInput
style=styles.modalInput
onChangeText=(newTitle) => this.setState(title: newTitle)
defaultValue='tits'
autoFocus=true
selectTextOnFocus=true
keyboardAppearance='dark'
maxLength=30
/>
<View style=styles.modalOptions>
<TouchableHighlight
onPress=() =>
this.handleCloseModal();
style=styles.modalOption
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress=() =>
this.handleRename(id, unitType)
style=[styles.modalOption, styles.renameOption]
>
<Text style=color: 'white'>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
javascript react-native view
edited Nov 10 at 16:29
kit
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
The workflow of what I am trying to do is the following:
- User clicks on
hamburger iconand gets adropdown.
- User clicks on
- User clicks on
rename.
- User clicks on
- A modal appears with a
TextInputand two buttons toacceptandcancel.
- A modal appears with a
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent=true
visible=renaming
onRequestClose=() =>
Alert.alert('Modal has been closed.');
>
<KeyboardAvoidingView style=styles.modalMask behavior="padding">
<View style=styles.modalContainer>
unitType === 'file' ?
<Text style=styles.modalHeader>Rename clip:</Text>
:
<Text style=styles.modalHeader>Rename folder:</Text>
<TextInput
style=styles.modalInput
onChangeText=(newTitle) => this.setState(title: newTitle)
defaultValue='tits'
autoFocus=true
selectTextOnFocus=true
keyboardAppearance='dark'
maxLength=30
/>
<View style=styles.modalOptions>
<TouchableHighlight
onPress=() =>
this.handleCloseModal();
style=styles.modalOption
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress=() =>
this.handleRename(id, unitType)
style=[styles.modalOption, styles.renameOption]
>
<Text style=color: 'white'>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
javascript react-native view
javascript react-native view
edited Nov 10 at 16:29
kit
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
edited Nov 10 at 16:29
kit
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
edited Nov 10 at 16:29
kit
1,1082516
edited Nov 10 at 16:29
kit
1,1082516
edited Nov 10 at 16:29
kit
1,1082516
1,1082516
asked Nov 10 at 15:15
Tycholiz
68128
asked Nov 10 at 15:15
Tycholiz
68128
asked Nov 10 at 15:15
Tycholiz
68128
68128
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42
add a comment |
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240307%2fkeyboard-causes-modal-to-disappear-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
and how else do you think you can type in data without the keyboard appearing?
– bluehipy
Nov 10 at 15:55
the problem is that I cannot see the modal as I am typing. the problem is strictly UI, as I can successfully input data, and I successfully send that data to the store.
– Tycholiz
Nov 10 at 18:42