I have a problem using TouchableOpacity with the code below.
when I press and release "Button 1" the opacity takes a few seconds to return to normal; besides, it seems the rendering of whole app is halt, because if I rotate my device, the screen does not get re-layout until a few seconds later.
but if I press and release "Button 2", the opacity returns to normal immediately.
Would anyone please let me know what should I do to solve this?
Thanks.
class someComponent extends Component {
buttonPressed() {console.log(arguments);}
render() {
// something
return (
<View style={styles.container1}>
<TouchableOpacity onPress={this.buttonPressed}>
<Text style={styles.button}>Button1</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()={console.log(arguments);}}>
<Text style={styles.button}>Button2</Text>
</TouchableOpacity>
</View>);}
devices used for testing: Samsung GSII: Android 4.1.2, (some tablet): Android 4.1.1
Related
I am working on a settings screen design for this startup and am very new to react native. I am an intern, but I am trying to add lines between each button. I'll attach a screenshot of what it should kind of look like, but I just am lost with no matter how much I look up, I can't find something that will work for me.
So far what I did was:
<View className="w-full mt-2 mb-7 flex-row">
<TouchableOpacity onPress={() => navigation.navigate(RouteName.home)} className="flex flex-row items-center space-x-3 w-24">
<Ionicons name='person-sharp' size={24} color="grey"></Ionicons>
<Text>Profile</Text>
<AntDesign name='right' size={24} color='#7A7A7A' style={{position: 'absolute', right: 0}}></AntDesign>
</TouchableOpacity>
</View>
I dont have a specific stylesheet connected to it other than the inline one.
I attached a picture of what it should look like, but I am mainly struggling on the line between each button.
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
The problem is pretty simple, still I can't figure out why it happens. I'd need some good Android and/or React Native developers.
I have a settings page in my application which renders 4 boxes (depending content of the settings, like user password, email modification...) and one of them has a bit much more content than the others.
The problem seems to only occur on Android 7.0 (testing with a real device, Honor 8) and it works well on One Plus 6 (8.1) and a Xiaomi (I don't know which one, running 7.1)
As long as I want to display all the content of the box, it will just not render to the screen, but still takes the height needed in the ScrollView to be displayed (see the screens)
At first, I didn't understand why, because no error was triggered, I decided to check the logCats and I got this error :
View: ReactViewGroup not displayed because it is too large to fit into a software layer (or drawing cache), needs 8636760 bytes, only 8294400 available
Imgur
So I tried multiple things:
set android:hardwareAccelerated="false" in the AndroidManifest, this solution works BUT the app is quite laggy when you scroll, and all is a bit slowed down (I would love to avoid this)
Delete some components from the render, which also works, but... obviously, I want all my content in this box
I tried to understand which component takes a lot of space (in bytes) by adding/deleting the components in the view and referring to the logCat, seems like ZestInput takes quite a lot, as custom components for Toggles, and Checkboxes (I also tried with native TextInput to compare with our custom input, the result was not that far... they bot take a lot of space)
render() {
const {
textStyle,
titleTextStyle,
subtleText,
boxStyle,
marginLarge,
marginSmall,
marginLeft,
buttonStyle,
} = styles;
const { isUpdating, newMail } = this.state;
const { user, emailEdition } = this.props;
const emailTranslation =
newMail === ''
? translations.t('ADD_EMAIL')
: translations.t('CHANGE_EMAIL');
return (
<MCollapsableBox
style={boxStyle}
headerText={translations.t('APPLICATION_SETTINGS')}
>
<View>
<Text style={[titleTextStyle, marginLarge]}>
{translations.t('PARAMETERS_CHOOSE_LANGUAGE')}
</Text>
{(newMail === '' || emailEdition) && (
<View>
<Separation />
<Text style={[titleTextStyle, marginLarge]}>
{translations.t('EMAIL')}
</Text>
<ZestInput
//ref={ref => (this.inputRef = ref)}
placeholder={emailTranslation}
onChangeText={this.changeMailAddress}
value={newMail}
/>
{user.tmpEmail !== '' && (
<View>
<Text style={[textStyle, marginSmall]}>
{translations.t('CURRENT_TMP_MAIL')}
</Text>
<Text style={[textStyle, marginLeft]}>{user.tmpEmail}</Text>
<Text style={[subtleText, marginLeft]}>
{translations.t('EMAIL_NEEDS_VALIDATION')}
</Text>
</View>
)}
<PrimaryButton
onPress={this.onChangeEmail}
style={buttonStyle}
isLoading={isUpdating}
disabled={!this.checkIsEmail(newMail)}
>
{emailTranslation}
</PrimaryButton>
</View>
)}
<Separation />
<Text style={[titleTextStyle]}>
{translations.t('PARAMETERS_VISIBILITY')}
</Text>
{_.map(this.state.privacyOptions, (value, key) => {
return (
<TitledTextToggle
title={value.text}
options={value.options}
onPress={this.toggleChanged}
key={key}
id={key}
/>
);
})}
<Separation />
<Text style={[titleTextStyle, marginSmall]}>
{translations.t('MOOD_NOTIFICATIONS_SETTINGS')}
</Text>
<Text style={[textStyle, marginLarge]}>
{translations.t('MOOD_NOTIFICATIONS_SETTINGS_TEXT')}
</Text>
<CheckboxList
onPress={this.onPressCheckbox}
options={this.state.moodNotification}
/>
<PrimaryButton
onPress={this.onSave}
style={buttonStyle}
isLoading={isUpdating}
>
{translations.t('SAVE')}
</PrimaryButton>
</View>
</MCollapsableBox>
);
}
This is what I expect
Imgur
Imgur
Imgur
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 running react native 0.24.1 and I am experiencing an issue with the <TouchableOpacity> component when it is placed inside an <ScrollView>.
Its onPress events fire fine but there is a special case when they do not.
If along with the <TouchableOpacity> component you have a <TextInput>, and the current focus is on the <TextInput> box, then you may click on the <TouchableOpacity> and you will see its onPress event WILL NOT be fired.
At least the first time you do it. Once the focus is NOT on the <TextInput> anymore, you can now press on the <TouchableOpacity> component and its onPress event will fire just fine.
Note that if the <TouchableOpacity> component is placed inside a <View> instead of an <ScrollView> everything works as expected and the above issue does not apply.
Here is some code to demonstrate the problem:
const React = require('react-native');
const {
Component,
Dimensions,
View,
ScrollView,
Text,
TextInput,
TouchableOpacity,
} = React;
// ----------------------------------------------------------------------------
class TouchableOpacityTest extends Component {
constructor(props, context) {
super(props, context);
this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0};
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
onPressEvent(what,e) {
console.log('what:',what);
let newState = {};
newState['count_'+what] = ++this.state['count_'+what];
this.setState(newState);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
render() {
let touchableProps = {
onPress: this.onPressEvent.bind(this,'onPress'),
onPressIn: this.onPressEvent.bind(this,'onPressIn'),
onPressOut: this.onPressEvent.bind(this,'onPressOut'),
onLongPress: this.onPressEvent.bind(this,'onLongPress'),
}
return (
<View style={{flex:1,flexDirection:'column',justifyContent:'flex-start',alignItems:'center',backgroundColor:'blue'}} >
<ScrollView style={{width:Dimensions.get('window').width*0.9,backgroundColor:'red'}}>
<TextInput style={{backgroundColor:'rgb(200,200,200)',marginTop:14}}
placeholder="Focus on me,hide keyboard,and click on text below"
autoCorrect={false}
/>
<TouchableOpacity {...touchableProps} >
<Text style={{fontSize:20,backgroundColor:'pink',marginTop:14}}>
Click on me!{"\n"}
onPress:{this.state.count_onPress}{"\n"}
onPressIn:{this.state.count_onPressIn}{"\n"}
onPressOut:{this.state.count_onPressOut}{"\n"}
onLongPress:{this.state.count_onLongPress}{"\n"}
</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
// ----------------------------------------------------------------------------
AppRegistry.registerComponent('react_native_app1', () => TouchableOpacityTest);
You may replace the <ScrollView> with a <View> component on the above code and you will see that onPress event fires every time, even when the focus is on the <TextView>
NOTE: I am working on Android. I have no idea if this happens also on iOS.
NOTE 2: According to Aakash Sigdel, this is indeed happening on iOS too.
Set keyboardShouldPersistTaps={true} on your ScrollView.
Duplicate answer here: https://stackoverflow.com/a/34290788/29493
UPDATE: As Hossein writes in his answer, true|false has been deprecated in newer versions in favor of always|never|handled.
Set keyboardShouldPersistTaps='always' to your ScrollView props.
React Native Documentation:
'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
false, deprecated, use 'never' instead.
true, deprecated, use 'always' instead.
In my case, I was using alignItems:'baseline', when I switched to alignItems:'center', it started working smoothly. Don't know why