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={() => {}}
Related
I am working on a react native android app that needs a search bar. I am using the SearchBar from react-native-paper, and I checked their documentation and couldn't find any sort of way to find if the user pressed the little search button on their keyboard.
Not sure if there is an official name for this input or the button itself as I am unfamiliar with mobile app development, but here is an screenshot from the app in case it is unclear. I am referring to the search button on the keyboard itself, which is in this case blue.
From some digging I found out that TextInputs in react native have an onSubmitEditing={} that triggers whatever return key action you want.
Essentially I was wondering if there was an equivalent prop for the SearchBar in react-native-paper.
If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a onSubmitEditing prop to it and, as react-native-paper uses a TextInput, that input will receive that prop
Ok so it seems that as tintef pointed out, you can just pass onSubmitEditing to the SearchBar since it uses a TextInput. I just tested this and it works perfectly!
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 have a TextInput on an Overlay Component in my app. When the keyboard is opened, half the screen gets covered, including the TextInput. I did try the KeyboardAvoidingView component, but couldn't get the TextInput to be fully visible. I need some suggestion on how to move the components inside the Overlay, when the keyboard is enabled in react-native
it wld have been easier to answer if u had posted code, but still
keyboardAvoidview solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard
just add this under your largest view
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
all ur ui inside this...
</KeyboardAvoidingView>
There is a prop called keyboardVerticalOffset,
that is the distance between the top of the user screen and the react native view.
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled keyboardVerticalOffset={offsetValue}>
... your UI ...
</KeyboardAvoidingView>;
Value for keyboardVerticalOffset may be non-zero in some use cases. but for your case try to add some value.
If you want to know more about handling keyboard in react native check this
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>
I see that react-native has TextInput, ListView, MapView ..... I'm not asking where is the Button. I know I can download react-native-button from npm, but the lack of a "native" button in react-native makes me wonder if I'm approaching react-native the wrong way. Is there some other paradigm I should be using on react-native apps and NOT using a button is the way to go?
Should I just be using the onPress for a View with TouchableOpacity?
Still trying to wrap my head around how to think in react-native.
The Touchable* components( TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback) are React-Native's button
It has all the properties a View has. You have either wrap a View inside a Touchable component or just simply substitute the View with a Touchable component
<View style={{height:48,width:200,backgroundColor:'blue'}} />
can just be made into a button by
<TouchableOpacity onPress={this.onPress} style={{height:48,width:200,backgroundColor:'blue'}} />