21

I am exploring the possibility of using react-native to create a iOS framework (android library), which can be distributed and can be integrated with apps by including while building a app.

For example, maintaining single codebase to create a ".framework" for ios, or .jar for android (basically compiled code instead of react component code) as distribution for developer community.

P i
  • 29,020
  • 36
  • 159
  • 267
vagdwd
  • 243
  • 2
  • 7

1 Answers1

11

React native recommended way to install react dependencies is via npm install. A very basic solution can be to ship your library without react native and then let SDK users install react native via react recommended way.

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

  Problem with this approach is that native developers are not familiar with npm install and they are not very comfortable in fixing npm install related issues. Native developers are more used to gradle and cocoapods for building their app and unfortunately react native has stopped supporting it. As an SDK developer, we can’t force our SDK users to start using npm and follow react native integration guidelines. This is how we solved this problem for our use case,

Android:

Host react native on private maven repo and ask SDK users to add below line in their project-level build.gradle file,    

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from private maven repo
            url "<Your private maven repo url.>"
        }
    }
}

  Add below line in app’s build.gradle file,  

dependencies {

    compile 'com.facebook.react:react-native:0.53.+'

}

You can also use this private maven repo to host your SDK’s aar file.

With this change, it’s going to be very easy for Android developers to include your SDK and react native in their app. Problem with this approach is that you will end up maintaining many react versions on your own private maven repo (Maintenance overhead).

iOS:

Our first solution was to include react libraries inside the .framework file and creating a fat binary file. This requires you to include, libReact.a and other react related .a files inside your framework file and link them.

With this solution, Your .framework includes all the dependencies. Integration with SDK will be very easy (Just drag and drop to Frameworks folder). Problem with this approach was that React native library is growing in size. Latest libReact.a file is 105 Mb in size. This means that framework file size will be huge and SDK users will have difficulty in pushing it to github.

We recently moved to a solution where we are hosting React native dependencies in private pod and SDK users can download react dependencies by adding few lines in their Podfile. This solution is like react native recommended way and the only thing we are avoiding is npm install. We want to give our SDK users both the options (one with npm install and other without it). Based on the feedback from SDK users, we will decide our build process in future. 

Please note that there are multiple limitations and maintenance overhead with this solution but it’s solving our use case. It might not work for everyone.

ggsrivas
  • 583
  • 7
  • 19
  • i'd love to see more on your pod solution you mention. When you say "we are hosting React Native dependencies" is that a repo of the library project or a repo of RN dependencies specifically? – Steve Pascoe May 31 '18 at 03:43
  • @ggsrivas how could i export this react native module as AAR library ? – Reem Oct 10 '18 at 13:24
  • @Reem I did not write a react-native module. I created an android library which was internally instantiating a react native app. You can check below repository for example, https://github.com/ggsrivas/reactAndroidSDKDevApp/tree/master/mysdk When you build above the library, it will generate .aar file. – ggsrivas Oct 11 '18 at 00:01
  • @StevePascoe It's repo hosting all the .podspec files. I will share an example soon. – ggsrivas Oct 11 '18 at 00:12
  • @ggsrivas and this library could be used in another android app? – Reem Oct 11 '18 at 10:11
  • 1
    @Reem Yes. you can find more details on below article, https://medium.com/@gauravasrivastava89/sdk-development-with-react-native-part-1-46580839eae9 – ggsrivas Oct 11 '18 at 22:00
  • @ggsrivas just awesome! , thank you! , any plans for the IOS version? – Reem Oct 14 '18 at 11:11
  • @ggsrivas also if i want to add another native module where i could add it? – Reem Oct 14 '18 at 16:11
  • @ggsrivas i was able to add my native package by adding it under MyReactPackage , many thanks – Reem Oct 15 '18 at 11:05
  • 1
    @Reem I will share the iOS version soon. I need some time to create sample app and sample SDK first. I will ping you when I am ready. – ggsrivas Oct 15 '18 at 16:32
  • thanks so much for this... so far great starting point for us – 43matthew May 22 '19 at 21:53
  • Any guide to do this for iOS? – Sundeep Saluja May 29 '19 at 05:56
  • Anything for iOS in this case? any link to solve using this approach where you are talking about "Your .framework includes all the dependencies. Integration with SDK will be very easy (Just drag and drop to Frameworks folder). Problem with this approach was that React native library is growing in size. Latest libReact.a file is 105 Mb in size"?? – Zac24 Oct 20 '20 at 15:16
  • hi @ggsrivas, thanks for the approach suggested. I have been trying the same but getting error after including the generated aar file to a new project. Can you please suggest (https://stackoverflow.com/questions/66002909/unable-to-run-android-app-with-aar-file-generated-from-react-native-app) – Atmaram Feb 04 '21 at 02:25
  • @ggsrivas - Did you get the chance to write a blog for iOS implementation for the same? actually we required the same on a very high priority. Thanks a lot for writing a blog on Android implementation but without iOS we can't go head for android. Can you please spend some time for iOS as well. – User Nov 18 '21 at 12:49
  • @ggsrivas, for iOS when making the framework full of the `.a` files, how did you deal with the header/swift module files? – abc123 Mar 20 '23 at 21:28