Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

React native IOS InputAccessoryView disappear from the screen after close modal

$
0
0

When I have on my screen InputAccessoryView which has component without nativeID (So it is constantly showing even if the keyboard is not shown) and I open and close Modal (react-native modal) then InputAccessoryView disappear from the screen with the component. I don't know why this is happening and also I don't know how to keep this InputAccessoryView on the screen.

Here is the code to reproduce it:

import * as React from 'react';import { View, ScrollView, AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';import {Modal, Text, TouchableHighlight, Alert} from 'react-native';import Constants from 'expo-constants';export default class App extends React.Component {constructor(props) {    super(props);    this.state = {text: 'Placeholder Text', modalVisible: false,};  }  setModalVisible(visible) {    this.setState({modalVisible: visible});  }  render() {    return (<View style={{flex:1}}><Modal          animationType="slide"          transparent={false}          visible={this.state.modalVisible}          onRequestClose={() => {            Alert.alert('Modal has been closed.');          }}><View style={{marginTop: 22, padding: 50, backgroundColor: '#0066ff'}}><View><TouchableHighlight                onPress={() => {                  this.setModalVisible(!this.state.modalVisible);                }}><Text style={{color:"#ffffff"}}>Hide Modal</Text></TouchableHighlight></View></View></Modal><ScrollView style={{ backgroundColor: '#6ED4C8'}}><Text></Text><TouchableHighlight          onPress={() => {            this.setModalVisible(true);          }}><Text style={{padding: 40, backgroundColor: "#ff3300"}}>Show Modal</Text></TouchableHighlight></ScrollView><InputAccessoryView backgroundColor="#ff9900"><TextInput            style={{              padding: 20,              paddingTop: 50,            }}            onChangeText={text => this.setState({text})}            value={this.state.text}          /></InputAccessoryView></View>    );  }}

Here you can find the online version (Keep in mind that the issue is only relevant for IOS): https://snack.expo.io/SJB7ipm6B

Some Images:

enter image description here

enter image description here

enter image description here

Thank you for your time and your help!


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>