Problem when i use ad mob with react native expo - reactjs

I am creating a project on a React Native application, and I am using Expo. I would like to add ads, so I'm using Google Ad Mob. So I created my account on the site. I have a problem and it's been a long time that I can't solve it.
I have this error:
` ERROR Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist.
If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`
here is my package.json:
{
"name": "front",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#react-navigation/drawer": "^6.5.7",
"#react-navigation/native": "^6.1.2",
"#react-navigation/native-stack": "^6.9.8",
"axios": "^1.2.2",
"expo": "~47.0.12",
"expo-build-properties": "~0.4.1",
"expo-dev-client": "~2.0.1",
"expo-secure-store": "~12.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "^1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-animated-loader": "^1.0.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-mobile-ads": "^9.1.1",
"react-native-infinite-scroll-view": "^0.4.5",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-toast-message": "^2.1.5",
"react-navigation": "^4.4.4",
"react-router": "^6.6.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-native-secure-store": "^1.0.3"
},
"private": true
}
and here is the file in which I use ad mob:
import React, { useState } from "react";
import { View, Text, Button, Alert, TouchableOpacity } from 'react-native';
import { SafeAreaView } from "react-native-safe-area-context";
import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-blablabla';
const rewarded = RewardedAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});
const Video = () => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {
setLoaded(true);
});
const unsubscribeEarned = rewarded.addAdEventListener(
RewardedAdEventType.EARNED_REWARD,
reward => {
console.log('User earned reward of ', reward);
},
);
// Start loading the rewarded ad straight away
rewarded.load();
// Unsubscribe from events on unmount
return () => {
unsubscribeLoaded();
unsubscribeEarned();
};
}, []);
if (!loaded) {
return null;
}
return (
<View style={{alignItems: "center", justifyContent: "center"}}>
<TouchableOpacity style={{borderColor: "blue", padding: 30}}>
<Text onPress={() => rewarded.show()}>Watch Rewarded Ad</Text>
</TouchableOpacity>
</View>
);
};
export default Video;
I re-installed the nodes modules, I added this to my app.json file:
"plugins": [
[
"expo-build-properties",
{
"android": {
"compileSdkVersion": 31,
"targetSdkVersion": 31,
"buildToolsVersion": "31.0.0"
},
"ios": {
"deploymentTarget": "13.0"
}
}
]
]
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-2973173763441523~2444055698",
"ios_app_id": "ca-app-pub-2973173763441523~5693853805"
}
I followed the installation guide, so if anyone can help me to use Ad mob I would love it, thanks!

Related

React Native Realm app Crash after release build

I've just setup a clean fresh react-native app (not expo). Made it ready for release and it's working fine, the apk is installing fine on my phone. Realm package install from here https://www.npmjs.com/package/#realm/react. I have setup the working example from the #realm/react. In debug mode, it works fine. After i run npx react-native run-android --variant=release, it builds and installs the release apk , but instant app crash. If i comment out all the realm functions, it works. This is the error:
Error: Exception in HostObject::get for prop 'Realm': java.lang.UnsatisfiedLinkError: couldn't find DSO to load: librealm.so caused by: io.realm.react.util.SSLHelper result: 0, js engine: hermes, stack:
anonymous#1:1140678
loadModuleImplementation#1:36194
guardedLoadModule#1:35743
metroRequire#1:35371
anonymous#1:1140455
loadModuleImplementation#1:36194
guardedLoadModule#1:35743
metroRequire#1:35371
anonymous#1:1138421
loadModuleImplementation#1:36194
guardedLoadModule#1:35743
metroRequire#1:35371
anonymous#1:935016
loadModuleImplementation#1:36194
guardedLoadModule#1:35743
metroRequire#1:35371
anonymous#1:901819
loadModuleImplementation#1:36194
guardedLoadModule#1:35743
metroRequire#1:35371
anonymous#1:42538
loadModuleImplementation#1:36194
guardedLoadModule#1:35700
metroRequire#1:35371
global#1:34955
at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(Unknown Source:75)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(Unknown Source:148)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(Unknown Source:147)
at com.facebook.jni.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
at android.os.Looper.loopOnce(Looper.java:210)
at android.os.Looper.loop(Looper.java:299)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
at java.lang.Thread.run(Thread.java:1012)
App.js
import React, {useState} from 'react';
import {View, Text, TextInput, Pressable} from 'react-native';
import {Realm, createRealmContext} from '#realm/react';
class Task extends Realm.Object {
_id!: Realm.BSON.ObjectId;
description!: string;
isComplete!: boolean;
createdAt!: Date;
static generate(description: string) {
return {
_id: new Realm.BSON.ObjectId(),
description,
createdAt: new Date(),
};
}
static schema = {
name: 'Task',
primaryKey: '_id',
properties: {
_id: 'objectId',
description: 'string',
isComplete: {type: 'bool', default: false},
createdAt: 'date',
},
};
}
const {RealmProvider, useRealm, useQuery} = createRealmContext({
schema: [Task],
});
export default function AppWrapper() {
return (
<RealmProvider>
<TaskApp />
</RealmProvider>
);
}
function TaskApp() {
const realm = useRealm();
const tasks = useQuery(Task);
const [newDescription, setNewDescription] = useState('');
console.log(tasks);
return (
<View>
<View
style={{flexDirection: 'row', justifyContent: 'center', margin: 10}}>
<TextInput
value={newDescription}
placeholder="Enter new task description"
onChangeText={setNewDescription}
/>
<Pressable
onPress={() => {
realm.write(() => {
realm.create('Task', Task.generate(newDescription));
});
setNewDescription('');
}}>
<Text>➕</Text>
</Pressable>
</View>
<View style={{backgroundColor: 'red', height: 100}}>
{tasks &&
tasks.map(i => <Text key={i.createdAt}>{i.description}</Text>)}
</View>
</View>
);
}
package.json
{
"name": "poiTourist",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#realm/react": "^0.4.3",
"react": "18.2.0",
"react-native": "0.71.3",
"react-native-get-random-values": "^1.8.0",
"realm": "^11.4.0"
},
"devDependencies": {
"#babel/core": "^7.20.0",
"#babel/preset-env": "^7.20.0",
"#babel/runtime": "^7.20.0",
"#react-native-community/eslint-config": "^3.2.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^29.2.1",
"#types/react": "^18.0.24",
"#types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.7",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native"
}
}
For the past 2 days I've been trying yo get to the source of the problem but no results. With a fresh new install still the same resposne (instant app crash after app build and app install). After some google search I found that realm and hermes was an issue, but not with the last version. Another issue was with react-native-reanimated, but in this fresh project I dont have it. Any solutions? Cheers in advance.
-new fresh rn install,
-followed instructions from official realm docs and rn docs
Ok, So I have manage to fix this. In my case I was not paying attention to all the prerequsitis that realm is providing. The most important https://github.com/realm/realm-js/blob/master/COMPATIBILITY.md Thanks for help

TypeError: null is not an object (evaluating 'dispatcher.useMemo')

I'm trying to use InversifyJS with MobX in my React Native application but I got this error:
ERROR TypeError: null is not an object (evaluating 'dispatcher.useMemo')
I don't use useMemo anywhere. My application is almost empty, I've just installed these packages:
{
"name": "abc",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#eva-design/eva": "^2.1.1",
"#react-native-async-storage/async-storage": "~1.17.3",
"#ui-kitten/components": "^5.1.2",
"#ui-kitten/eva-icons": "^5.1.2",
"core-js": "^3.26.0",
"expo": "~46.0.16",
"expo-auth-session": "~3.7.1",
"expo-crypto": "~11.0.0",
"expo-random": "~12.3.0",
"expo-status-bar": "~1.4.0",
"expo-web-browser": "~11.0.0",
"mobx": "^6.6.2",
"mobx-react-lite": "^3.4.0",
"prettier": "^2.7.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-svg": "^12.4.4",
"react-native-web": "~0.18.7"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"inversify": "5.0.1",
"inversify-inject-decorators": "3.1.0",
"typescript": "~4.3.5"
},
"private": true
}
my App.tsx:
import "core-js/proposals/reflect-metadata"
import React from "react"
import * as eva from "#eva-design/eva"
import { ApplicationProvider, IconRegistry, Button, Layout, Text, Icon } from "#ui-kitten/components"
import { EvaIconsPack } from "#ui-kitten/eva-icons"
import { StatusBar } from "expo-status-bar"
import { Provider, useInjection } from "./ioc/ioc.react"
import { container } from "./ioc/ioc"
export default () => (
<>
<IconRegistry icons={EvaIconsPack} />
<ApplicationProvider {...eva} theme={eva.light}>
<Provider container={container}>
<App />
</Provider>
</ApplicationProvider>
</>
)
const App = () => {
return (
<Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Button accessoryLeft={<Icon name="google" />}>Sign In</Button>
<StatusBar style="auto" />
</Layout>
)
}
This error appears when i want to wrap my app component in Inversify IoC container.
That's how container looks like:
import React, { ReactNode, useContext } from "react"
import { Container, interfaces } from "inversify"
const InversifyContext = React.createContext<{ container: Container | null }>({ container: null })
type Props = {
container: Container
children: ReactNode
}
export const Provider: React.FC<Props> = (props) => {
return <InversifyContext.Provider value={{ container: props.container }}>{props.children}</InversifyContext.Provider>
}
export function useInjection<T>(identifier: interfaces.ServiceIdentifier<T>) {
const { container } = useContext(InversifyContext)
if (!container) {
throw new Error()
}
return container.get<T>(identifier)
}
Seems to be an issue with the new Expo SDK 47

react-router-native giving error in Expo CLI - React Native

I have installed react-router-native in my project using npm and I am getting an error saying:
E:/myapp/node_modules/react-router-native/NativeRouter.js,
11:9 Module parse failed: Unexpected token (11:9).... You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders
package.json :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#material-ui/core": "^4.11.2",
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"firebase": "^8.2.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.13.12",
"react-router-native": "^5.2.0"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
The file where react-router-native is giving an error (NativeRouter.js):
import React from "react";
import { Alert } from "react-native";
import { MemoryRouter } from "react-router";
import PropTypes from "prop-types";
/**
* The public API for a <Router> designed for React Native. Gets
* user confirmations via Alert by default.
*/
function NativeRouter(props) {
return <MemoryRouter {...props} />;
}
NativeRouter.defaultProps = {
getUserConfirmation: (message, callback) => {
Alert.alert("Confirm", message, [
{ text: "Cancel", onPress: () => callback(false) },
{ text: "OK", onPress: () => callback(true) }
]);
}
};
const __DEV__ = true; // TODO
if (__DEV__) {
NativeRouter.propTypes = {
initialEntries: PropTypes.array,
initialIndex: PropTypes.number,
getUserConfirmation: PropTypes.func,
keyLength: PropTypes.number,
children: PropTypes.node
};
}
export default NativeRouter;

SPFx react cannot read property 'shape' of undefined

Hi I am creating an SPFX weather webpart and i am getting this error:
there are no errors when i run gulp build. i am not sure how to debug my issue. this is the snippet of the proptypes.shape() where i am getting my issue:
import * as React from 'react';
import PropTypes from 'prop-types';
export const Day: React.SFC<any> = props => {
const date = props.day.dt;
const icon = getIcon(props.day.weather[0].id);
const animate = true;
const iconSize = 64;
const iconColor = 'black';
return (
<div className={appClasses.dayContainer} onClick={props.onClick} role="link">
<h2 className={appClasses.date}>{(new Date(date * 1000)).toDateString()} - {(new Date(date * 1000)).toLocaleTimeString()}</h2>
<ReactAnimatedWeather
icon={icon}
color={iconColor}
size={iconSize}
animate={animate}
/>
</div>
);
};
Day.defaultProps = {
onClick: () => {},
};
Day.propTypes = {
day: PropTypes.shape({
dt: PropTypes.number.isRequired,
weather: PropTypes.array.isRequired,
}).isRequired,
onClick: PropTypes.func,
};
I'd like to note that i created the webpart first using react and it is working perfectly, but when i created an SPFX app, and transferred my existing codes into it. I had encountered these errors.
This is my package.json
{
"name": "spfx-weather-2",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"#microsoft/sp-core-library": "~1.1.0",
"#microsoft/sp-webpart-base": "~1.1.1",
"#types/react": "0.14.46",
"#types/react-addons-shallow-compare": "0.14.17",
"#types/react-addons-test-utils": "0.14.15",
"#types/react-addons-update": "0.14.14",
"#types/react-dom": "0.14.18",
"#types/webpack-env": ">=1.12.1 <1.14.0",
"prop-types": "^15.6.1",
"react": "15.4.2",
"react-animated-weather": "^1.0.3",
"react-dom": "15.4.2",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"#microsoft/sp-build-web": "~1.1.0",
"#microsoft/sp-module-interfaces": "~1.1.0",
"#microsoft/sp-webpart-workbench": "~1.1.0",
"gulp": "~3.9.1",
"#types/chai": ">=3.4.34 <3.6.0",
"#types/mocha": ">=2.2.33 <2.6.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
}
}
Check my answer here [SPLoaderError.loadComponentError]: ***Failed to load component
You very likely have the same issue. If you were to post your github link for me to clone I could confirm for you.
TL;DR
You likely have a circular reference between your factories. You need to move any code that is required from your top level factory to the bottom of said factory.
Let me know if you don't quite understand after reading my other answer.

Font.loadAsync() can't resolve module for custom fonts (React Native & Expo)

My app uses CRNA and Expo, and my issue is that the Font.loadAsync() asynchronous function can't locate a .otf font file in the assets/fonts/ folder in my project directory. I am absolutely sure that the directory and file names are correct. I receive this error.
link to image of my error screen
Here is my code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo'
import Root from './js/Root';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
fontLoaded: false
}
}
async componentDidMount() {
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
this.setState({ fontLoaded: true })
}
render() {
if (!this.state.fontLoaded) {
return <AppLoading />
}
return <Root />;
}
}
Here is my package.json:
{
"name": "Zumer",
"version": "0.1.0",
"private": true,
"devDependencies": {
"flow-bin": "^0.40.0",
"jest-expo": "^0.4.0",
"react-native-scripts": "0.0.28",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"flow": "flow"
},
"packagerOpts": {
"assetExts": ["ttf", "otf"]
},
"jest": {
"preset": "jest-expo",
"tranformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
},
"dependencies": {
"#expo/vector-icons": "^4.0.0",
"expo": "^16.0.0",
"native-base": "^2.1.2",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"react-native-elements": "^0.11.1",
"react-navigation": "^1.0.0-beta.8",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-observable": "^0.14.1",
"redux-persist": "^4.6.0",
"rxjs": "^5.3.0"
}
}
Could it be that the .otf file format isn't supported by Expo?
I fixed this issue by converting the otf files to ttf
I had a similar issue and I was able to resolve it by removing the quotes around the key that requires the font source.
Before:
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
After
await Font.loadAsync({
Light: require('./assets/fonts/SemplicitaPro-Light.otf')
})
And using it in the stylesheet like so
const styles = StyleSheet.create({
text: {
fontFamily: 'Light'
}
});
Everything worked fine after that.

Resources