ReactNative onResponderRelease doesn't work on Android - react-native

I tried to use ScrollView's onResponderRelease event on an android device, but it dosen't work fine. Code like this:
<ScrollView
onResponderRelease = {()=>{console.log('release')}}
/>
I saw many react-native libs used this api like this.
Does it support android platform ?

Yes, it has such problem - you can read more about this https://github.com/facebook/react-native/issues/9447
Try to use 'onMomentumScrollEnd', in some cases it will do exactly what do you expect:
<ScrollView
onMomentumScrollEnd = {()=>{console.log('release on Android')}}
onResponderRelease = {()=>{console.log('release on IOS')}}
/>

Related

How can I insert an admob banner into my app?

I need to insert an admob banner in the app, I followed a lot of tutorials on internet but any of thoose works. Can someone help me? I'm using an android emulator
the code I used with react native admob is:
import {
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded,
} from 'react-native-admob'
....
<View>
<AdMobBanner
adSize="fullBanner"
adUnitID="ca-app-pub-2174326550695558/6129769558"
onAdFailedToLoad={error => console.error(error)}
/>
</View>
but It gives me and error:<< Invariant Violation:requireNativeComponent:"RNGADBannerView" was not found in the UIManager>>
You can use react-native-firebase for admob, it's works like charm for my app.

How to make a text to speech work in background in React Native app?

I have a question that I have not been able to solve for some time and I have not been able to do it yet. Do you know how to make a text to speech work in background React Native Android app?
If you want sounds to work on iOS in background mode you need to do 2 things:
enable audio capabilities in xcode
configure AVAudioSession. There is already a package for it here: https://github.com/BonnierNews/react-native-audio-session
I did this at the root of the project, using react-native-sound, but should be the same with react-native-audio-session:
import Sound from 'react-native-sound';
Sound.setCategory('Playback'); // this will play sound in background
Somewhere in your background runner:
Tts.speak('Some text);
We can use ACCESSIBILITY.Accessibility, means making your apps usable to both normal users and users with disabilities. Any person can have one or more form of disability.
Step1:-
Turn on TalkBack in your device Settings
Open your device's Settings app Settings app.>>Open Accessibility>> then TalkBack.>>Turn on TalkBack.
then add following props to every component of ReactNative.
accessible={true}
accessibilityLabel={label}
Like this:-
return (
<TouchableOpacity
accessible={true}
accessibilityLabel={label}
accessibilityTraits={"button"}
accessibilityComponentType={"button"}
onPress={() => {
onPress(data.name);
}}
>
<Icon
name={icon}
style={styles.icon}
size={icon_size}
color={icon_color}
/>
</TouchableOpacity>
)

how to use reCaptcha in ReactNative app?

I have found following lib for use reCaptcha in RN app
https://www.npmjs.com/package/react-native-recaptcha
my code is
import ReCaptcha from 'react-native-recaptcha';
...
<View style={{ flex: 1}}>
<ReCaptcha
sitekey={'test'}
/>
</View>
but no recaptcha is displayed.
Also I have tried sitekey used in one of my websites where reCaptcha worked properly - still nothing.
Do I miss something?
p.s. github of this lib not exists (
I think there is no lib exist for reCaptcha in react native. So you need to use wrapped webview for it, I know it is slow and may include your requirment, but I think it is only solution.
Please see React Native with reCATPCHA and https://github.com/evenchange4/react-grecaptcha
I recently wrote a component that does something similar to what Priya suggested. It caters specifically to react-native and uses google recaptcha v3. Feel free to check it out and make a PR if you would like to customize it or feel that something could be done better :)
https://www.npmjs.com/package/react-native-recaptcha-v3
react-native-recaptcha-that-works worked for me - has also the invisible option for better UX.

React Native: Android TextInput autoCorrect={false} does not disable suggestions

autoCorrect={false} is suppose to force no suggestions mode, and therefore no underlining of text in the input field but it's not working.
UPDATE 8/18/18: It seems to disable the suggestions but not the underlining.
It's a bug in React Native but you can use : keyboardType="visible-password" to disable autocorrect suggestions.
autoCorrect={false} is working some of android phones on my project but If you use with keyboardType="visible-password" is work on my project!
this is a bug in React Native.
https://github.com/facebook/react-native/issues/18457
Your options for now are probably to:
wait for a fix to come out
or submit a PR to fix the issue in React Native
or write your own native module for text input that has the correct behavior

Enable haptic Feedback on react-native touchable view

I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).
Clicking on android app button - make a sound and give the user an haptic Feedback.
On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.
How can I make my view (any touchable view..) to make haptic feedback on click?
This is really important feeling in an app.
I want something like this (In android)
View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
This doesn't require from the app to have permission for Vibrate.
And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior
Thanks
If you are using Expo with react-native, I recommend you to use Expo haptics
After installing the library You can use it like:
<TouchableOpacity onPress = { ()=> {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
or
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
or
Haptics.selectionAsync()
} } > </TouchableOpacity>
I found this component on github https://github.com/charlesvinette/react-native-haptic
I didn't try it yet, but it should help you to get the haptic feedback you want.
I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.
Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false
};
ReactNativeHapticFeedback.trigger("impactMedium", options);
In your case, it will work directly with the button's onPress method such as:
<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />
Note: I found that the most versatile type which is supported by maximum devices is impactMedium.
You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback
import { Vibration } from 'react-native';
...
<TouchableWithoutFeedback
onPressIn={() => Vibration.vibrate()}
/>
Remember to include this in your AndroidManifest
<uses-permission android:name="android.permission.VIBRATE" />
I published a project on Github which provides this functionality.
Check this repo out: react-native-haptic-view