How can I insert an admob banner into my app? - react-native

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.

Related

Autofill is not working with android react native

<TextInput
autoCompleteType="username"
importantForAutofill="yes"
/><TextInput
autoCompleteType="password"
importantForAutofill="yes"
/>
I've added this code as per guidance in react-native, but in my android app autofill password from google or any not working.Thanks in advance.
the working solution for both platforms for RN > 0.66 is:
<TextInput
textContentType="password"
autoComplete="password"
/>
textContentType - IOS (https://reactnative.dev/docs/0.66/textinput#textcontenttype-ios)
autoComplete - Android (https://reactnative.dev/docs/0.66/textinput#autocomplete-android)

DeviceMotion Expo iOS13

I’m working on an VR app using Expo and a-frame with a webview. Everything worked well with iOS12 but I have some problems since I updated to iOS13 and SDK35. When I start the webview, it is impossible to use the VR mode, the scene can only be moved if the user is manually swiping the screen.
After some research, I found that iOS13 requires an user gesture for using the device motion:
https://github.com/aframevr/aframe/issues/4277
I looked in the Expo doc but the Permissions doesn’t seem to handle the DeviceMotion permission (and the DeviceMotion page only says we can check if it’s enabled or not). Is there any way to solve this ?
Thanks in advance
You can use react-native-gesture-handler
You can run expo install react-native-gesture-handler
You can use this if you want to solve the problem of gestures. The rights to gestures appear to be missing from the document.
Example
import { TapGestureHandler, RotationGestureHandler } from 'react-native-gesture-handler';
class ComponentName extends Component {
render () {
return (
<TapGestureHandler>
<RotationGestureHandler>
...
</RotationGestureHandler>
</TapGestureHandler>
);
}
}
Read the react-native-gesture-handler docs for more information on the API and usage.

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>
)

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

ReactNative onResponderRelease doesn't work on Android

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')}}
/>