Is there any way to pass data between my react-native Javascript code to native code? I want to run perform an HTTP request with a user ID when the app terminates, but from what I can see, there is no way to do that in Javascript, so the only way to do that would be within the native code. But is there any way I can get the user ID from the native code?
Related
Problem
I'm integrating React Native into an existing Android app (ie. making a hybrid app). I've created an Activity to host a React Native view. This works fine.
Now, I need to pass structured data from native into React Native. Represented as JSON, it looks something like this:
{
"landscape": ["http://example.com/1.jpg", "http://example.com/2.jpg"],
"portrait": ["http://example.com/3.jpg", "http://example.com/4.jpg"]
}
Given the context I describe how can I make this data available as props inside of the React Native app?
I see that this is an initialProperties argument available, but it seems to accept a Bundle, which as far as I can tell (Android newbie here) only accepts scalar values.
One option I am considering
Create JSON object in Java
Convert to a string
Add to Bundle and pass into initialProperties
Ingest as JSON and deserialize in React Native app
... but this seems hackish and requires me to add special code for Android that was not required for iOS.
Alternatives?
Is there a straightforward approach that I am missing?
Have you tried passing an array of strings into the Bundle?
bundle.putStringArray("landscape",yourArrayOfStrings]);
I'm building a React Native native module (aka 'bridge') for iOS and Android and need to log to the JS console in native code (Objective C and Java). This is done easily in iOS using RCTLog but I can't figure out how to do it in Java.
I tried Log.i but those messages aren't forwarded to Javascript.
The only thing I can think of at this point is to emit a JS event from the Java module and have a handler on the JS side just call console.log with the message but that's a pretty roundabout way of doing it.
I would expect to be able to do something like this.getReactApplicationContext().log("see me in the JS console") but no dice. Anyone know how to do this?
It looks like as of upcoming react native 0.63 we may be getting the equivalent of iOS's RCTLog in Android: https://github.com/facebook/react-native/commit/52b3105f652eca72892f200923e1687f1d995486
The files are in master: https://github.com/facebook/react-native/tree/master/ReactAndroid/src/main/java/com/facebook/react/util
public void logEvent(String text) {
System.out.print(String.format("logEvent: %s ", text));
}
or just
System.out.print("Hello");
We used to have a Cordova app that, when running on Appium, we could switch to Webview and execute JS commands using execute_script.
I would like to do the same thing on React Native to run some JS code (e.g., exposing a function on global or running something like console.disableYellowBox = true;). However, appium does not shows a Webview context to switch to and it seems to me the execute_script on native app context doesn't work.
Is there a way of doing a similar thing on RN client?
For ReactNative application there is no Webview context as RN is interpreted as NATIVE_APP one.
For finding elements its more interesting: there is no way to set resource-id for Android.
However you can set accessibilityLabel for your Views in React Native app and search for it like:
driver.findElementByAccessibilityId(accessibilityLabel)
Should work for both iOS/Android. Basically you should right your tests like you test Native app, not a Hybrid one.
And of course, you can use Xpath to search by text, but that I strongly do not recommend to do.
I notice from calling-react-native-functions-from-native-events that I could call js function or event with defined prop in native side
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
but how could I call js function without any defined in native side?
for example, if I wrap my project as sdk which be embedded in others'app, and I want to dynamic add new method in js side without modify any sdk native code, so the app will directly call changed logic without update sdk package framework after hotfix.
how should I implement it?
thanks for your time,
regards.
Is it possible to pass a javascript function from React Native onto iOS Native components such as a UIButton and execute there?
It is possible, but using events and not by sending JS to native components. Check out react-native docs for detailed information, but generally:
React Native enables you to perform cross-language function calls. You
can execute custom native code from JS and vice versa. Unfortunately,
depending on the side we are working on, we achieve the same goal in
different ways. For native - we use events mechanism to schedule an
execution of a handler function in JS, while for React Native we
directly call methods exported by native modules.