Hi guys! I’m trying to use KMP with android and re...

# multiplatform

[nguyen tuan]

Hi guys! I’m trying to use KMP with android and react project. Is there any example for setting up?
Many thx!

[McEna]

Like, with react-native?

[nguyen tuan]

Yes, i want to share the api call and logic with android. Can you give me advices?

[McEna]

You would have to create a KMP library module and a RN library module. The RN library's native layer would have to import the KMP module

[McEna]

For all intents, RN would just be using the native compilation of the KMP module. Therefore you should be able to publish the KMP library and keep both projects separate

[nguyen tuan]

I create KMP project using this link:
https://terrakok.github.io/kmp-web-wizard/.
I saw js when created project. Can I add the logic in commonMain folder or jsMain folder then build js with gradlew?

[McEna]

All the sourcesets (commonMain, iOsMain, AndroidMain, JsMain) get compiled when you build the project. commonMain is a shared dependency among all the KMP project's modules, therefore it can only import pure kotlin code, or other KMP libraries/modules

[McEna]

You won't be able to run a network call using code from jsMain in react-native outside of web, though, because react-native itself is a thin wrapper around native code, and the js functions you call need to have a native counterpart registered (unless is just plain JS code available in the JS engine you are using). That registration happens when you import a RN module.

[McEna]

So you have to create a RN module to consume the KMP module and then call that RN module from your JS code

[nguyen tuan]

As far as I understand, I will create a KMP project using Kotlin logic that I want to share between platforms in CommonMain. After that, I will import the KMP project into the React Native and Android projects to use the shared logic, right?
I’m sorry for asking so many questions because I’m very new to KMM.

[McEna]

Yeah, from your RN project's perspective, the KMP project is just another android/ios/js library

[McEna]

Nothing wrong with asking questions

[nguyen tuan]

Inside the react project, I can add the file path to package.json and use it directly without using Gradlew to build the node module, right?

[McEna]

Like, for consuming the JS code from a web project?

[McEna]

You would need to build the KMP project from gradle too, so the code from commonMain gets transpiled to javascript

[McEna]

you could add a script to yarn to run the gradle script of the KMP project before compiling your RN project, though. That's what RN does for compiling android and iOs apps. Node just calls Gradle/xcodeRun

[nguyen tuan]

So after I do that, can I add the KMM project like image that I sent?

[McEna]

if your are importing it for a web project in react-native, probably. If you are importing it for a platform target, like android or ios, no

[McEna]

there will be no native counterpart to your js-kmp-generated code

[McEna]

and no KMP dependencies will be linked in android/ios, so stuff like Ktor won't work, because it won't be part of the project

[nguyen tuan]

Do you have any example repos that setting up react project with android, ios?

[McEna]

neither KMP or RN turn JS code into a "silver bullet" binary that runs everywhere just by creating JS projects. The former transpiles kotlin references to javascript equivalents for web projects, and the latter binds javascript calls to native mirrored methods loaded into the platform version of react-native

[McEna]

No

[McEna]

You don't need a specific setup unless you are trying to have a single repository with both RN and KMP

[nguyen tuan]

Thank you for your support. I will do more research. 🙏

[McEna]

but it is easier to create the KMP project as a library and import it as such by the native parts of your RN project. If you go with a single repository, you still have to create a RN module to link the KMP module, and you have to coordinate both sets of build tasks so KMP gets compiled before RN, and then import the KMP module into each target platform

[McEna]

it is just extra trouble with no benefit. KMP does not use node to build, so if you aim to just point at the KMP project from your package.json, you would have to teach node to take that path, open gradle, run the KMP build tasks, and then modify the android's RN project gradle file to import the results, then the iOs build files to do the same

[McEna]

anytime!