I am using touchable opacity for my home page button, all menus are working perfectly but are not working correctly in two scenarios.
While launching the share popup and moving to another application
Open the play store for rating.
The problem I am facing
While pressing the button, the opacity and all actions work properly, but after coming back to the application, still, the touchable opacity is active.
<TouchableOpacity onPress={()=> shareApp() }>
<View>
<Image source={require('../Assets/Home_page/share.png')}/>
</View>
<View>
<Text>Share my app</Text>
</View>
</TouchableOpacity>
shareApp = () => {
var link="https://play.google.com/store/apps/details?id="+_packageid;
const result = await Share.share({
title: 'App link',
message:'Best app \n'+link,
url:link
});
}
See the above image, after returning to the application, still, the opacity is active. The same happened if the following code is executed.
Linking.openURL(link)
Related
New to react native and in a component, I have a list of views that include a checkbox (react-native-bouncy-checkbox). Each view is wrapped in a TouchableWithoutFeedback(So I can click the entire view, not just the checkbox) and I have a boolean useState to tell the checkbox whether to display the check or not.
The issue I'm at is that I chose the library for the checkbox because the animation when it's clicked looks very nice. However, the animation doesn't play if I hit the view ~ only if I hit the actual checkbox, which is rather small in my app.
Is there any way to tell another component that it needs to act like it was pressed, so it can play its animation?
Code for clarity:
const Task = ({ id, text }: Types) => {
const [checked, setChecked] = React.useState(false);
return (
<TouchableWithoutFeedback onPress={() => setChecked(!checked)}>
<View style={styles.container} >
<BouncyCheckbox
disableBuiltInState={true}
isChecked={checked}
fillColor="blue"
iconStyle={{ borderColor: 'gray' }}
/>
<Text>{text}</Text>
</View>
</TouchableWithoutFeedback>
)
};
Okay figured it out. Apparently React native allows you to create refs to other components and you can use the reference.onPress() to activate the animation.
I'm currently working on a React Native App, where the user can type some text input and click "ok" to confirm. Next question appears. But at the moment i have to double click the button. First time the keyboard closes and second time the button is pressed. Same thing for iOS and android.
I already tried keyboardShoulPersitsTaps='always'and also handled, but nothing works.
I also tried to make every view above a scroll view and added this prop, but still no luck...
Can anyone help?
You are nesting a ScrollView with a KeyboardAwareScrollView.
You need to set the keyboardShouldPersistTaps prop on the parent view as well. Consider the following code snippet from your snack.
<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
<SafeAreaView style={styles.container}>
<ScrollView ref={scrollViewRef} onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })} keyboardShouldPersistTaps='handled'>
{steps.map(item => { return (<SingleAlgorithmStep key={item["Question"]} step={item} stepsDone={steps} clickedButtons={clickedButtons} algorithmJson={currentAlgorithmJson} actualizeSteps={(item) => updateSteps(item)} actualizeButtons={(item) => updateClickedButton(item)} />) })}
</ScrollView>
</SafeAreaView>
</KeyboardAwareScrollView>
This fixed the issue on my device.
You are using the incorrect property name, keyboardShouldPersistTabs, instead of keyboardShouldPersistTaps.
<ScrollView
keyboardShouldPersistTaps="handled"
>
....
</ScrollView>
I'm creating an application where I'm using a MaterialBottomTabBar and in the Home Screen I've a button which are supposed to open up a <Modal>.
After investigating this for quite some time I found out that I cannot present the modal when using the tabbar. I've tried to put the modal in all my tabbar-screens (without any success). And then moved the modal over to another screen which are not included in the tab-bar and the modal worked perfectly fine.
export default function Home({ route, navigation }){
const [modal, setModal] = useState(false)
return(
<View style={styles.container}>
<Modal visible={modal} transparent={true}>
<View style={{height: "100%", width: "80%", backgroundColor: "blue"}}>
<Text>TIFMNASIFAMNFISAMFIAOFMSAOFMAFOPSAMF</Text>
</View>
</Modal>
<TouchableOpacity style={styles.addNewButton} onPress={() => setModal(true)}>
<Text style={styles.addNewButtonText}>+</Text>
</TouchableOpacity>
</View>
)
}
As you can see i'm using the React Native Hooks useState(false) and refers to it inside the Modal. But whenever I tap the <TouchableOpacity> the modal is not being presented.
NOTE!
The modal is being presented if I replace the
<Modal visible={modal} transparent={true}>
to
<Modal visible={true} transparent={true}>
But would be runned instantly, which is not an option in my case.
Do you have any idea how I can run this modal inside the screen?
I use React-native and Expo for my mobile client.
Flow:
User taps to open up a modal from root view
Modal has Expo's Share and WebView invoking buttons.
When user taps to open either of them, nothing happens.
When the modal is closed manually by the user, then the WebBrowser/Share are suddenly invoked, and opened on the root view that the modal is a child of.
Both functions to call the Share and WebBrowser invokers are in the modal's controller.
Partial Content of the modal controller:
openBrowser = (url) => {
WebBrowser.openBrowserAsync(url);
}
shareModel = (url) => {
Share.share({
url: url
}) .then(console.log(`Shared ${url}`))
.catch(err => console.log(err))
}
render() {
return (
<Modal
visible={this.props.visible}
animationType={'slide'}
onRequestClose={this.props.onRequestClose}
>
<View style={styles.modalContainer}>
<View style={styles.oneButton}>
<TouchableOpacity style={styles.toolbarButton} onPress={() => this.openBrowser(this.props.model.public_url)}>
<SimpleLineIcons
name='globe'
size={29}
style={{ marginTop: 1 }}
color='#7366E3'
/>
<Text style={{ color: '#7366E3', fontSize: 13, marginTop: 1 }}>View</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
Any ideas? This exact code worked well in the past and something changed.
It could be due to the new Expo client's SDK26. One of their breaking changes include methods in the WebBrowser, see https://blog.expo.io/expo-sdk-v26-0-0-is-now-available-2be6d9805b31
I have an information carousel in a modal. On Ios it loads perfectly and can be opened and closed. On Android it opens perfectly if the initial state is set to true, but when it is closed and reopened the modal fades in slowly and the carousel is not present.
I have tried using the native Modal and a plugin. Using native my close button and hardware back button will not close the modal on android. I am testing on a Galaxy Note 8.
Any help would be greatly appreciated as I have exhausted my efforts to try and get it to operate correctly.
Here is the Modal Code Section.
//MODAL ACTIONS
_openModal = () => {
this.setState({ isModalVisible: true });
console.log(this.state.isModalVisible);
}
_closeModal = () => {
this.setState({ isModalVisible: false });
console.log(this.state.isModalVisible);
}
//RENDER MODAL CONTENT
_renderModalContent() {
return (
<Modal
isVisible={this.state.isModalVisible}
backdropColor={'black'}
backdropOpacity={0.7}
onBackButtonPress={this._closeModal}
>
<View style={styles.modalContainer}>
<PersonalityDisplay
ptData={ptTypes}
opType={this.props.opType}
/>
<View style={styles.closeButton}>
<Button onPress={this._closeModal}>
Close
</Button>
</View>
</View>
</Modal>
)}
renderInfoPanel() {
return (
<Animated.View
style={this.state.position.getLayout()}
{...this.state.panResponder.panHandlers}
>
{this.renderUserInfo()}
{this._renderMatchStamp()}
{this._renderSideIcons()}
{this._renderModalContent()}
</Animated.View>
)
};
render() {
console.log(this.state.isModalVisible)
return (
<View>
{this.renderInfoPanel()}
</View>
);
}
}
Thanks
Few Things you better notice in your code,
To close with back button correct prop is onRequestClose but not
onBackButtonPress
2.Inside onRequestClose or Button onPress arrow function should be used
like this onRequestClose={() => this._closeModal()}
3.Modal component doesn't have any prop called isVisible, it's
actually visible.
After correcting these things Modal works fine.
Apart form these things, When you post code try to post only relevant to your issue. In your code three methods and two styling objects doesn't have any implementation which are hard to debug for others.