Im trying to load a custom Android WebView to be able to upload files using html file inputs (by default Android webview wont work with input file). Im using this code, the only difference is that im using expo kit, so my MainApplication.java is different (inherits from another class by default):
public class MainApplication extends MultiDexApplication {
// Needed for `react-native link`
public List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomWebViewPackage()
);
}
#Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
Basically what the git code do is override the default react native webview to make it use the CustomWebView.java in Android, using requireNativeComponent with this code (this is on CustomWebView.android.js):
var RCTWebView = requireNativeComponent('CustomWebView', WebView, {
nativeOnly: {
messagingEnabled: PropTypes.bool,
},
});
But when i run the application using exp start and navigate to the screen that has the CustomWebView i receive this error:
Summarizing the problem is that my custom native component is not being read by React Native. Can someone help me please?
Expo by default will not support any custom native modules. This is because they have a single perbuilt binary and they only load the JS bundle that you write. So any code you write with Expo can only be pure Javascript.
But Expo documentation does say that you can add custom native modules after detaching.
More info here:
https://docs.expo.io/versions/latest/guides/detach.html#should-i-detach
https://docs.expo.io/versions/latest/introduction/faq.html#what-is-the-difference-between-expo-and-react-native
https://github.com/expo/expo/issues/56
You can't use native code when using expo, you can use only what they give you. Ejecting will allow you to use native code but then you can't use expo anymore and I'm pretty sure it's irreversible.
You can see more about the caveats of using expo here: https://facebook.github.io/react-native/docs/getting-started.html#caveats
You can start with the best generator of code for React Native Known as Ignite it is very easy to use it has some BoilerPlates.
From the given useful boilerplates you can use Ignite Expo BoilerPlate which will setup all the code with expo + native modules support. After installing ignite-cli as global package and running ignite new [AppName] -b ignite-expo
So this will be an easy step for you. Also it adds some useful other modules as well.
After you eject a project, trying to use it via exp start will not give you the result you wish to achieve. While expo kit is still supported, you are now in need of new native code, as such you need to run it using react-native run-android. When you do so, it will not only serve JS as exp start does, but also compile your native code and put it in your device.
Right now, using exp start serves the JS bundle, however said bundle cannot find your native module as it does not exist within the generic expo client.
As said in the previous answers, expo and native modules don’t go hand in hand.
As expo only provides the capability to edit the javascript code and not the native modules, native modules can be considered black-box in the expo.
But if you are trying to integrate native modules into the expo, or are trying to run both expo and react-native native module together. Here is a very interesting read https://codersera.com/blog/running-expo-react-native-together/
Related
Does someone know what that is?
Steps:
create a new expo project;
followed the doc about how to create our own module (https://reactnative.dev/docs/native-modules-android)
Result: My module is always null when I try to call on React Native. I've listed NativeModules, and my module is missing. I wonder if these new updates are the problem.
I'm using:
"expo": "~47.0.12",
"react-native": "0.70.5",
Part of code that generates null
#############Extra info##############
I've followed the doc - https://reactnative.dev/docs/native-modules-android.
And the result of this was different than expected. So I also tried to create a communication between React and native code following this one https://reactnative.dev/docs/communication-android.
All of this that I've tried in the end, the result was null.
I'm trying to use this package in my react native project.
So far I've followed all the steps in their installation guide and I made it work on iOS.
However, on Android, every time I try to import Batch or BatchPush in my code like this:
import { BatchPush, Batch } from "#bam.tech/react-native-batch";
I get an error on Android only:
null is not an object (evaluating 'RNBatch.NOTIFICATION_TYPES')
So when I go to node_modules/#bam.tech/react-native-batch/dist/BatchPush.js I see this
const RNBatch = react_native_1.NativeModules.RNBatch;
exports.AndroidNotificationTypes = RNBatch.NOTIFICATION_TYPES;
So somehow the native module is not being imported correctly. Do I need to follow extra steps for this to work?
#bam.tech/react-native-batch is being used with version 5.2.1
npm version 6.14.7
react-native version 0.60.5
Update: it turns out that the package was not linked correctly and that I had to manually add the package in MainApplication.java (I don't know why react-native link did not add this automatically)
Add the import:
import tech.bam.RNBatchPush.RNBatchPackage;
And then add
new RNBatchPackage(), in the getPackages() method.
I am attempting to convert my react-native project into an expo project, one small issue I've encountered is when I run the expo project I get an error as such
null is not an object (evaluating 'RCTToastAndroid.SHORT')
After doing some research online on how to fix this problem a user requested that a problem like this can simply be resolved by removing the Android part of RCTToastAndroid.SHORT this user stated that RCTToast is universally compatible with both iOS and Android. However when I do this I receive an error saying null is not an object (evaluating 'RCTToast.SHORT')
What can I do that will help ease the transition from my react-native project to an expo project?
All apps created with create-react-native-app, are compatible with Expo CLI without changes.
Ref link:- https://github.com/react-community/create-react-native-app/blob/master/CHANGELOG.md#upgrading-from-1140-to-201
only do like this
import {ToastAndroid}from 'react-native '
return ToastAndroid.show("some error msg", ToastAndroid.LONG);
I had the same exact problem.
Check to see if you've imported a library called 'react-native-simple-toast'. Remove it from your dependencies.
According to this issue:
this library has a custom native module for ios, and expo does not support that. This lib will not work with expo
it will only work with a bare React Native project.
If you do need to use Toasts
Here's a library that will work with Expo on both Android and iOS. The only downside is that it's pure Javascript.
You can use it like this:
import Toast from 'react-native-root-toast'
Toast.show('Your message here', {
duration: Toast.durations.SHORT,
position: Toast.positions.BOTTOM,
shadow: true,
animation: true
});
I'm developping a NativeScript application and want to use the WonderPush SDK. I've already used this SDK into a native Android application, so I tried to create a new plugin to wrap the SDK.
I imported the library in the gradle file, and I tried to call the library from the NativeScript plugin. But the library is empty, if I tried to log it with console.dir, the only result is an quasi-empty object:
export class NativescriptWonderpush extends Common {
init() {
console.dir(com.wonderpush);
// com.wonderpush.sdk.Wonderpush.initialize(app.android.context);
}
}
JS: ==== object dump start ====
JS: sdk: {}
JS: ==== object dump end ====
(The second line com.wonderpush.sdk.Wonderpush.initialize() crash because com.wonderpush.sdk is empty)
Thanks for your help
Native objects may not always be traceable in console like JS objects.
Though you could refer their docs and call the methods you like Or even generate typings if you are using TypeeScript by following the steps given here. The typings ensure that the classes, methods, properties etc., are public and accessible to the JS runtime.
We have a project using Tipsi Stripe React module, when trying to build for Android I get the following error message: Native Module StripeModule tried to override StripeModule for module name StripeModule.
The error message does not make sense to me and I don't really know where to begin looking since i'm fairly new to mobile and React Native development.
Building for iOS works fine.
I have the same problem, i've tried adding
#Override
public boolean canOverrideExistingModule() {
return true;
}
to: /tipsi-stripe/android/src/main/java/com/gettipsi/stripe/StripeModule.java based on what i found here How to set canOverrideExistingModule=true.
It compiles, but I haven't tested if it keeps working, if it works i'll fork tipsi-stripe and create a PR later