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
Related
I am experiencing a very weird behaviour in my android emulator when using react-navigation v5 in my react native application, which makes me think is a bug. I found out that there is an open issue on the official react-native-navigation page. See here.
In every secondary screen (see UserProfileScreen below), in many react native-elements like TouchableOpacity Button or TextInput the onPress event doesn't work. It only works in the main screen of the navigator. (See HomeScreen below)
Here is an example of how I create my stack navigator:
import {createStackNavigator} from '#react-navigation/stack';
// some imports here
const HomeStackNavigator = createStackNavigator();
export const HomeNavigator = () => {
return (
<HomeStackNavigator.Navigator>
<HomeStackNavigator.Screen name="HomeScreen" component={HomeScreen}/>
<HomeStackNavigator.Screen name="UserProfileScreen" component={UserProfileScreen}/>
<HomeStackNavigator.Screen name="UserSettingsScreen" component={UserSettingsScreen}/>
</HomeStackNavigator.Navigator>
)
};
As a PoC I have the same code in the main and secondary screen:
<TouchableOpacity
onPress={() => Alert.alert("You pressed me!")} >
<Text> touch me</Text>
</TouchableOpacity>
and I see the alert only in the main screen (HomeScreen).
If I make UserProfileScreen as the fist screen in my stack navigator above then it works (the onPress event) fine on this screen but not in the HomeScreen. So it seems that the onPress event is triggered only in the main screen!. On IOS it works fine in all screens. Any idea ? Let me know if you need some more code snippets.
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.
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.
The dialog mode of react native's Picker component does not show a dialog when set to "dialog", instead it shows the same default drop-down. I tested both the versions 0.59.5 and 0.60 - the most recent version as of writing this question- of ReactNative. Following is the sample code from ReactNative's page with slight modification, that I tested:
<Picker
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}
mode="dialog" //added this line
prompt="Default Title" // also added this line
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
I tested the result on android emulators with API 17 and API 23.
Does this component have bugs? or is there something that I am not doing right?
The picker on Android is always shown as a dropdown, even if the mode is set to dialog. On RN 0.58.6 ,it was working fine (Github issue)
From react native version >= 0.59 this issue is coming and not fixed yet
If you really need it you can use this package AndroidDialogPicker
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.