Let me explain properly what I want to do.
I have these screens in react-native mobile-app
App.js
WalletDetails.js
Then I have another screen called PaymentDetails.js amongst many other screens
So what I want to do is that I need a button with onPress that would open directly walletDetails.js screen from PaymentDetails.js.
I have this code already on the paymentdetails page
<TouchableOpacity style={styles.cardPayBtn} onPress={()=>props.navigation.navigate("WalletDetails"); }}> <Text style={styles.buttonTitle}>{userdata && userdata.usertype == 'rider' ? t('payWithCard') : t('request_payment')}</Text> </TouchableOpacity>
I think for navigating between screens, React recomments react-navigation, it's a module to handle multiple screens (I'm using it myself and I really like it).
To get started, the react-navigation getting-started-guide helps a lot!
You can use for this navigation purpose between one screen to another.
onPress={()=>this.props.navigation.navigate("WalletDetails")
Related
I need to know how the fixed login screens are shown in ui in mobile app(react-native).
(i.e) I have added the login screen if I make the screen to scroll it will move the screen up and down. I have written the code inside the views.
But many of the apps login screens not get moved in UI. How can I acheive this in my login screens.
Don't use scroll view as the container of your Login form
<View>
<View>
//Your login inputs and button
</View>
<ScrollView>
//Others stuff that you want to add
</ScrollView>
</View>
That should work. I hope it helps.
I'm developing an app for Android in react-native with expo. I'm using expo's Audio.Sound API in order to play different sounds in my app. What annoys me is that whenever I press a TouchableOpacity component I get both my sound and the default onPress sound from Android (it disappears only if I mute the sound from the hardware buttons of my phone). I'd like to disable the default sound. Is there a way to do this programatically from react-native code?
You can actually use touchSoundDisabled={true} which is not covered in TouchableOpacity docs, but is part of a Button component. But it still works for touchables as well
I had the exact same problem using TouchableWithoutFeedback. The touchable events always play the default android button noise when clicked.
The solution I found was to instead use the onStartShouldSetResponder prop of the View component. This basically turns a view into a button and is equivalent to the 'onPress' prop.
<View onStartShouldSetResponder={() => this.onPress()}/>
Use Pressable instead of TouchableOpacity and add android_disableSound={true}
<Pressable android_disableSound={true} onPress={() => {}}
Though the keyboard popup for the first time, when I navigate to the same interface text input field is focused but the keyboard is not popup in React Native Application.
I used autoFocus={ true } but I can't see the keyboard. How to resolve this.
You can use 'push' instead of 'navigate'. When navigating to the same interface componentWillMount/componentDidMount is not loading again. That may be the issue. Try with this.
Refer react navigation documentation.
React Navigation Documentation
If you are using ScrollView, add keyboardShouldPersistTaps="always"
<ScrollView keyboardShouldPersistTaps="always">
------
</ScrollView>
My react-native app has several situations where different modals can be presented. I am wondering what's the best way to accomplish this. In general I see two different approaches:
a)
On the root view I always have the Modal-component mounted and simply switch the content, like this...
<View>
{...}
<Modal visible={this.props.modal > 0}>
{this.props.modal === 1 && <ModalContent1 />}
{this.props.modal === 2 && <ModalContent2 />}
{this.props.modal === 3 && <ModalContent3 />}
</Modal>
</View>
b) Every modal brings it's own Modal-component and is mounted somewhere in the tree, near the place it is triggered from.
Which way would you prefer and why?
A question that applies to both approaches is, if the Modal-component should always be mounted and only triggered using the visible-prop. If that's the way to go, I assume approach b) needs more memory, because multiple instances of the Modal-component are created.
I personally use the Stack Navigator from React Navigation to implement modals within my application. My modals include a "create post modal", "no internet connection modal" among others.
This allows me to access these modals from anywhere in my application and can persist/block other actions directly. To learn more about how to use React Navigation, you can read up on these two links:
To understand the StackNavigator, it has a section specifically for transparent background modals
To learn more about implementing modals in React Navigation in general.
i am troubling using of NavigatorIOS in react native,
<NavigatorIOS
style={styles.navigator}
initialRoute={{
title:'xxx',
component:xxx
}}
navigationBarHidden={true} />
here component xxx is my starting file here i don’t want navigator,after this i am using login screen there also i don’t want navigator after completion of the these screens,I need a navigator in my screen.
for hiding i used above code but to show it in child screen i wrote like this but not showing
this.props.navigator.push({
component:xxxx
title:’xxxx’,
navigationBarHidden:false
})
any help much appreciated
There are a lot of issues when using NavigatorIos. You have 2 options:
Dump NavigatorIos and move to Navigator. I was in the same scenario as you. I was using NavigatorIos and I wanted to completely replace the scene. It was a known issue and since Facebook stopped developing it and moved completely to Navigator, I was pretty much forced to make the change.
Here is more info: Navigator comparison
You can use a custom navigator like this one by Kureev. However, you should take into consideration that the way he implemented it, the navigator bar is part of your view, so when you move to a new scene, the whole page shifts, including your navigator.
I tried both option #1 and #2, and ultimately went with #1 and never looked back. It feels much more native and there is growing support for it.
Hope that helps.