When a button is clicked to open the modal, it works for the first time. Upon the second attempt, the app crashes without any error log.
React Native version: 0.61
The trick is to place the Modal tag as a child component in the KeyboardAvoidingView and not otherwise.
like so:
<KeyboardAvoidingView>
<Text> Please upvote! </Text>
<Modal ... >
</Modal>
</KeyboardAvoidingView>
This worked for me.
Hope it helps.
Related
Whenever I try to display a Modal from https://github.com/react-native-modal/react-native-modal, it will freeze the app when displayed only when running on an Android device (both physical and emulator). Any buttons or input controls are unable to be tapped on. iOS works completely fine.
For testing purposes, I made a simple modal like so:
<Modal isVisible backdropColor="black" backdropOpacity={0.8}>
<TouchableOpacity onPress={() => { this.hideModal(); }}>
</Modal>
where hideModal is just a simple function changing the state of isVisible to false.
Doesn't matter what content I put in the modal, or even if I leave it completely empty, it will always freeze on android. Moving any of the content outside the Modal works fine. I swapped out the react-native-modal with the modal that comes with react-native, but the same issue occurs.
react-native version is 0.64.1
react-native-modal version is 11.0.1
I cannot upgrade these to the newest versions because many other parts of the app rely on these versions.
in isVisible, inform the variable that tells you whether the modal is open or closed
<Modal isVisible={this.modalOpen} backdropColor="black">
<TouchableOpacity onPress={() => { this.hideModal(); }}>
</Modal>
https://github.com/react-native-modal/react-native-modal/issues/523
So I have just started learning app development with React Native this past week and so I've been getting into using Android studio emulators to run my apps. I've noticed that when I run the apps on the emulator, it doesn't seem to refresh the code properly. For example I made this very simple app while following a tutorial:
import React from 'react';
import { Text, View, Platform } from 'react-native';
import {Button} from 'native-base';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><text>Hello World!</text></Button>
</View>
)
}
}
const styles = {
container: {
flex: 1,
marginTop: 24
}
}
But when I first created it, in the tutorial the instructor forgot to put the Text tag within the button, so when I ran the app I got an error of:
Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
and it keeps going. Then in the tutorial the instructor noticed the mistake and fixed it by adding the tag in the button, but then when he does that, the app refreshed properly and displayed the button but for me I still get this same error. I've noticed this happening quite often with the Emulator, it doesnt like to refresh properly when opening a new app or altering one. I have deleted and recreated the emulator like 5 or more times now to test out different apps. Does anyone have a suggestion of how to fix this? Thanks in advance!
Change your <text> to <Text> as below.
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><Text>Hello World!</Text></Button>
</View>
Feel free for doubts.
I have 3 simple react components-
First the actual view(let us name this screen A)-
return(
<ImageBackground
...
>
<ScrollView>
<ChildButton
onPress={this.someFunction.bind(this)}
/>
</ScrollView>
</ImageBackground>
)
Then there is the ChildButton component---
return(
<ChildButton>
<Button
style={...someStyleObject}
onPress={this.props.onPress}
>
</Button>
</ChildButton>
)
and then there is Button component ---
return (
<TouchableOpacity
onPress={this.props.onPress}
>
{this.props.children}
</TouchableOpacity>
)
The main problem here is my onPress is not getting called from screen A, only on Android. It is working fine on iOS. What are the possible causes here?
Note: I've put consoles inside ChildButton and Button component and they are not getting printed.
I ran into this issue when I accidentally imported TouchableOpacity from "react-native-gesture-handler" instead of from "react-native". If this is the case for you, change so TouchableOpacity is imported from "react-native" and remove the import from "react-native-gesture-handler" and it should work!
I also ran into this issue when I inherited a RN project in progress. I didn't realize we had this "react-native-gesture-handler" package installed and accidentally let VS Code auto import it.
Always check your imports! :)
import {TouchableOpacity} from 'react-native'
works fine in both android and iOS
import {TouchableOpacity} from 'react-native-gesture-handler'
Does not work in android, but works in iOS.
So better to user react-native imports.
onPress event is not calling in android if TouchableOpacity imported from react-native-gesture-handler.
Below is the simple code I have.
change(text) {
this.setState({text});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome, what is your name?
</Text>
<TextInput
style={{height: 40, width: 200}}
onChangeText={this.change.bind(this)}
value={this.state.text}
/>
</View>
);
}
It works as expected in iOS. In Android, it shows the Text and TextInput field. However anything I type in TextInput does not show up.
I have two questions basically.
First one is, what might be going wrong here?
Second and more important question is, how do I debug a problem like this? I used ReactNative debugger and put a breakpoint in change function, it doesn't get called.
I also checked the generated native code in anticipation to debug using Android Studio. Didn't see anything in the code there where I can possibly put a breakpoint.
If in case it helps someone - here is what I found.
I was running Android emulator with API level 25 (Nougat).
When I switched to API level 23 (Marshmallow) it started working.
I am using TouchableHighlight for making buttons, but it seems the first click event on the button does not trigger the onPress event on the TouchableHighlight element. It works when it is clicked again.
The code looks like:
return (
<TouchableHighlight
onPress={this.props.onPress}
style={btnStyles}
underlayColor="#a30000"
activeOpacity={1}>
<Text style={styles.buttonText}>{this.props.children}</Text>
</TouchableHighlight>
);
This is the link to the button I created: https://github.com/uiheros/react-native-redux-todo-list/blob/master/app/components/shared/Button.js
Does anyone know how to fix it? or what caused the problem?
Edit: currently the problem happens to me on both ios simulator and android simulator. I have not tested in real devices yet.
I think you are using an emulator to test the app (genymotion?) same thing happened to me and I got confused but rest assured that the issue is not with you app but emulator or operation system(sometimes the first click is just to bring the emulator into focus) I am positive that if you try it on the physical device it'll work properly.
Hope I was helpful