Native UI Components that has jni library - react-native

I found an amazing library to display panoramic images and it has incredible features but it is written in native Java code. So I tried to make it as a UI component in react native by building the bridge between them. After a lot of time of learning and trying, I'm stuck on this:
The panoramaGL library uses JNI library so when I test it on its own it works just fine, BUT it doesn't work on react native because of the JNI library.
Please do me a favor and give me just the tip of the solution

the problem was ... i've changed the package name while building the bridge between react native and the panoramaGL library so the solution is to change the package name to the old package name of panoramaGL and it works like a charm :)

Related

how do you get java or kotlin source from a react native apps?

Can we extract source code from an apk that built with react-native framework?. i've tried using dex2jar and apktools and cant seem to find anything related to source code
Nothing would prevent Apktool or dex2jar from working on a React Native application. What you are seeing is the majority of React Native application logic lives in compiled Javascript files and the native layer itself (libraries).
So I would put things into 4 buckets
Native Modules (Android - Java/Kotlin, iOS - ObjC/Swift)
RN Bridge (Java/C++)
JS (Virtual Machine - JavascriptCore / Hermes)
JS (Business logic)
The code written in Javascript is interpreted by either the runtime of JSC/Hermes in the VM. This is passed through an intermediate bridge layer of either Java/C++ to the low native portion of the phone. Hence giving the name of React Native.
So if you are decoding an application looking for source code - you'll stumble upon the java code of the bridge and any package that has an intermediate dependency in Java and not the true source code of the application you are probably looking for.
The business logic would more than likely be in a index.android.bundle file somewhere and that will be quite ugly visually as its minified. You'll need a JS beautifier to get anywhere with this path.

Augmented Reality in React-Native

It is a question to professional developers at react-native. My react-native application needs augmented reality in it to develop complex games. I tried using viro-react, if you know this package. Developers of viro-react gave up on the package:
Not supported on IOS anymore
Documentation for some components is missing or poor
Are here people who is successfully using AR in their apps? Can you please tell me how you are doing it (different package or native components)? If it is native components, can you please tell me in a nut shell how to use native components with AR?
Thank you
Viro is actually a company that no longer exists, so don't hold your breath waiting for them. You can try using this example that works on both Android and iOS if you really want to use viro.
From my experience, there is no great solution to building AR apps in react native. You can also build the AR part of your app in Unity and import it into your app using this package.

Will this module work in expo or react native?

I am new to react native and expo.
This is the module i am looking at: https://github.com/leesiongchan/react-native-esc-pos
I want to build an app that can print using bluetooth thermal printer. I am not sure if i should build it using react native or expo. Please advise me.
Thank you.
Expo has its own limitations and there are even some bugs there too, Its good for quick development as the documentation suggests the same that it is good to get you started with development within minutes without much hustle. In my opinion, React Native CLI is most of the time the best option even if you are new to react native development. Because of the following reasons
You will learn a lot as you will get your hands dirty in core react native app development.
You won't have to deal with expo limitations
You won't have to be dependent on expo tools
Any Library which requires linking or contains native modules will not work with the expo.
The library you mentioned uses many native modules and usually these type of libraries are not supported and that is the reason why they've built their own APIs and Native Components you can read this,
the developer has not mentioned Expo support anywhere on the docs but still You can open an issue on GitHub and ask the developer if it supports EXPO platform or not, or maybe instead of asking you can try the library yourself and you will find out if its working or not,

react native how to know if a repo I am importing is a native module

my question might be a little bit silly or ambiguous since I am fairly new to react native.
I'm trying to use the following repository for my react-native project https://github.com/smekalka/react-native-universal-pedometer. I have noticed that the repo is implemented in .java with platform folder unlike the regular .js or .ts files I used to see. Is this repository considered native module as react native doc describe?
Or in general how I can tell the whatever lib I am using is a native module.
The project is previously tested are under the support of expo-cli. I experienced the error null is not n object while using this repo. If so, I am probably going to eject the expo-cli and rewrite my code so I can use and even create own native-module for full control, some core implementations that written in other languages or expo-cli does not support.
Yes, the android and ios directories in the repository contain the 'native' code used to implement the platform-specific hooks that the Javascript will be able to pick up. Expo is not able to use these native modules or native code so your assumption is correct; you will need to eject your app in order to use this module.
If your app is below version 0.60 of React Native, after installing the module you will need to run react-native link react-native-universal-pedometer to link the native code to the Javascript runtime. If you're above 0.60, it will link automatically when installed.

How to make a library to work in React Native environement?

I'm new in React Native, please bear with me. I have a library, which works fine in NodeJS and in browser. I would like to make it usable in React Native too.
I created an example project, imported the library but it threw an exception - Unable to resolve module `http`. If I try to import the browser version, document is not available.
Since then I'm scratching my head - how am I supposed to make my library to work in React Native if neither the core NodeJS modules, nor document are available?
React Native does not have access to Node.js modules such as http, so any code that relies on that functionality is not going to work. You will have to remove or replace it. As for document, window and other DOM-specific APIs, RN does not use a DOM at all, instead it uses its own rendering mechanism that is coupled to the native APIs. You will also have to remove all those calls and replace them with React Native-compatible ones.