I use this libary for my modal:
https://github.com/jeremybarbet/react-native-modalize
if I open the modal, my statusbar is white. How can I make this transparent ?
Please use statusBarTranslucent. This will solve your problem perfectly.
This has added since React Native 0.62
<Modal {...props} statusBarTranslucent>...</Modal>
Thanks.
I use react-native-modal and I have the same issue.
This library doesn't completely hide the status bar but makes it transparent instead of white. No codes required. You just need to link the library and it works.
https://github.com/listenzz/react-native-modal-translucent
Related
How is it possible to make the screen scroll to top when the tab bar label is pressed? I am using createMaterialTopTabNavigator from react-navigation version 4.X.
I suspect that the way to do this is to do something inside tabBarOnPress, but I just can't figure out what! Here's a Snack to work with: https://snack.expo.dev/URMUVXUXxw
Thanks for your time.
Instead of importing ScrollView from react-native, import the ScrollView from react-navigation. I'm not sure how this fixes the problem, but it does :)
How can I achieve this effect in react native expo? mainly the navigating from one screen to another and with the screen headers at the top.
You can use react-navigation, for example with createMaterialTopTabNavigator.
here https://snack.expo.io/#nordup/react-navigation-top-nav an example on how to do it.
Then you can customize the headers as you prefer: https://reactnavigation.org/docs/headers
I also found this library that was helpful
https://www.npmjs.com/package/react-native-screens-swiper
So i want to use alert. My theme color is mainly black and yellow. For some reason the alert button in iOS also using yellow color like the one in image.
Is there a way for me to change the button clor to other color? for example black?
React Native 0.61
You cannot customize the default alert which react native provides because they are internally using native alert for both android and ios devices.
For your requiement you have to use use React Native Modalbox, or
React Native Modal - both of which provide a highly-customisable
modal component.
You can create a custom dialog for app using modal view
You can follow this link, it can help to implement custom dialog.
https://reactnativecode.com/create-custom-alert-dialog-box/
It's help me, use this.
Sure, you can try these steps:
Use some Touchable components, like TouchableOpacity, TouchableHightlight instead of Button.
Use backgroundColor property to change the color. For example, if I need a red button with default text color (black).
<TouchableOpacity
style={{
backgroundColor: 'red'
}}>
<Text>Hello</Text>
</TouchableOpacity>
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>