How to integrate React Native into a modern Android project in 2024 Last Update On: Nov 4, 2024
There are many guides on the internet that explain how to integrate React Native into your Android project, such as the official documentation (https://reactnative.dev/docs/integration-with-existing-apps?language=kotlin ).
However, when you actually try to do it, you'll find that many things are different from what the documentation says. Oops it's really frustrating!
Recently, I successfully integrated React Native 0.75 into my Android project, which uses Kotlin + Gradle 8 + AGP 8. This project already had some pages built with Kotlin, and adding React Native introduced more cross-platform possibilities. Let me share the issues I encountered during the process.
Dependencies There are some plugin-related scripts inside the node_modules directory that you should include:
auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir
pluginManagement {
repositories {
google {
content {
includeGroupByRegex("com\\.android.*" )
includeGroupByRegex("com\\.google.*" )
includeGroupByRegex("androidx.*" )
}
}
mavenCentral()
gradlePluginPortal()
}
includeBuild('../node_modules/@react-native/gradle-plugin' )
}
Note that to ensure compatibility with the legacy repositories mode, you should set it to PREFER_PROJECT:
auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)
repositories {
google()
mavenCentral()
}
}
Plugins Add the react native plugin:
auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir
plugins {
id "com.facebook.react.settings"
}
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.jetbrains.kotlin.android)
id "com.facebook.react"
}
Auto Link auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir
extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
ex.autolinkLibrariesFromCommand()
}
react {
autolinkLibrariesWithApp()
}
Java Version For some reason that I'm not currently clear on, the Java version has to be 17, so:
auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir
compileOptions {
sourceCompatibility JavaVersion.VERSION_17
targetCompatibility JavaVersion.VERSION_17
}
kotlinOptions {
jvmTarget = '17'
}
I believe that with these basic settings, your modern Android project should run perfectly.
Note that these configurations are only suitable for React Native's legacy architecture, which requires setting newArchEnabled=false in gradle.properties. If you have already enabled the new architecture, you may need to add more configurations.
Thanks for reading, stay awsome!
