{"id":21363840,"url":"https://github.com/liquidplayer/reactnativesurface","last_synced_at":"2025-07-13T03:31:59.139Z","repository":{"id":34726203,"uuid":"151071411","full_name":"LiquidPlayer/ReactNativeSurface","owner":"LiquidPlayer","description":"ReactNative surface plugin for LiquidCore","archived":false,"fork":false,"pushed_at":"2023-01-04T21:40:27.000Z","size":13329,"stargazers_count":6,"open_issues_count":13,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-27T00:41:53.256Z","etag":null,"topics":["android","ios","liquidcore","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiquidPlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-01T10:30:50.000Z","updated_at":"2021-07-30T17:53:09.000Z","dependencies_parsed_at":"2023-01-15T09:01:14.587Z","dependency_job_id":null,"html_url":"https://github.com/LiquidPlayer/ReactNativeSurface","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiquidPlayer%2FReactNativeSurface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiquidPlayer%2FReactNativeSurface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiquidPlayer%2FReactNativeSurface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiquidPlayer%2FReactNativeSurface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiquidPlayer","download_url":"https://codeload.github.com/LiquidPlayer/ReactNativeSurface/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225851683,"owners_count":17534356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","liquidcore","react-native"],"created_at":"2024-11-22T06:21:39.846Z","updated_at":"2024-11-22T06:21:40.303Z","avatar_url":"https://github.com/LiquidPlayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Surface\n\nA LiquidCore surface that exposes the React Native (v. 0.56) API.  This is a work in progress.\n\n[![](https://jitpack.io/v/LiquidPlayer/ReactNativeSurface.svg)](https://jitpack.io/#LiquidPlayer/ReactNativeSurface)\n[![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)\n\n## Create a React Native project for use with LiquidCore\n\nRefer to the React Native documentation for how to get started with React Native.  This assumes you are already familiar with it.\n\n### Step 1: Create a React Native project\n\nImportant: you must use only version 0.56.0 of React Native.  Create a new project from the command line:\n\n```\n$ react-native init --version=0.56.0 HelloWorld\n```\n\n### Step 2: Add the LiquidCore shim\n\nFirst, install the command-line utilties:\n\n```\n$ npm install -g liquidcore-cli\n```\n\nThen, initialize your project for use with LiquidCore:\n\n```\n$ liquidcore init --surface=.reactnative.ReactNative HelloWorld \n$ cd HelloWorld \u0026\u0026 npm install\n```\n\n### Step 3: Complete\n\nYou should now have the basic React Native starter project that is available for use with LiquidCore.  To run the development server, simply:\n\n```\n$ npm run server\n```\n\nYour project will remain entirely compatible with React Native.  The LiquidCore dev server does not conflict with the Metro server.  It uses port 8082 instead of 8081 by default.  You can still debug and develop your React Native project according to the documentation without conflict.  LiquidCore simply installs a little shim (namely, `liquid.js`) and enables a LiquidCore-specific server and bundler.\n\n## Using ReactNativeSurface in your app\n\n### Step 1: Create an app project\n\nCreate a new app in either Android Studio or XCode as normal.  Or if you already have an existing app, you can use that.  Refer to the documentation for your IDE on how to set up an app.  For the sake of this section, we will assume you have an app named _HelloWorld_.\n\n### Step 2: Add the dependencies\n\n#### Android\n\nGo to your **root-level `build.grade`** file and add the `jitpack` dependency:\n\n```\n...\n\nallprojects {\n    repositories {\n        jcenter()\n        maven { url 'https://jitpack.io' }\n    }\n}\n...\n```\n\nThen, add the dependencies to your **app's `build.gradle`**:\n\n```\ndependencies {\n    ...\n    implementation 'com.github.LiquidPlayer:LiquidCore:0.5.1'\n    implementation 'com.github.LiquidPlayer:ReactNativeSurface:0.56.0006'\n    \n    /*\n     * Note: You must also include these React Native dependencies.  In future\n     * releases, hopefully this won't be necessary.\n     */\n    implementation 'javax.inject:javax.inject:1'\n    implementation 'com.facebook.fbui.textlayoutbuilder:textlayoutbuilder:1.0.0'\n    implementation 'com.facebook.fresco:fresco:1.9.0'\n    implementation 'com.facebook.fresco:imagepipeline-okhttp3:1.9.0'\n    implementation 'com.facebook.soloader:soloader:0.3.0'\n    implementation 'com.google.code.findbugs:jsr305:3.0.0'\n    implementation 'com.squareup.okhttp3:okhttp:3.10.0'\n    implementation 'com.squareup.okhttp3:okhttp-urlconnection:3.10.0'\n    implementation 'com.squareup.okio:okio:1.14.0'\n}\n```\n\n#### iOS\n\n1. Install Carthage as described [here](https://github.com/Carthage/Carthage/blob/master/README.md#installing-carthage).\n2. Create a [Cartfile](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile) that includes the following frameworks:\n    ```\n    git \"git@github.com:LiquidPlayer/LiquidCore.git\" ~\u003e 0.5.1\n    git \"git@github.com:LiquidPlayer/ReactNativeSurface.git\" ~\u003e 0.56.0006\n    ```\n3. Run `carthage update --cache-builds`. This will fetch dependencies into a [Carthage/Checkouts](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#carthagecheckouts) folder, then build each one or download a pre-compiled framework.  **NOTE:**: You may have to do this twice -- it seems to fail the first time and succeed the second.\n4. On your application targets’ _General_ settings tab, in the “Linked Frameworks and Libraries” section, drag and drop `LiquidCore.framework` and `ReactNativeSurface.framework` from the [Carthage/Build](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#carthagebuild) folder on disk.\n5. On your application targets’ _Build Phases_ settings tab, click the _+_ icon and choose _New Run Script Phase_. Create a Run Script in which you specify your shell (ex: `/bin/sh`), add the following contents to the script area below the shell:\n\n    ```sh\n    /usr/local/bin/carthage copy-frameworks\n    ```\n    Then, add the paths to the frameworks under “Input Files\":\n\n    ```\n    $(SRCROOT)/Carthage/Build/iOS/LiquidCore.framework\n    $(SRCROOT)/Carthage/Build/iOS/ReactNativeSurface.framework\n    ```\n\n    And finally, add the paths to the copied frameworks to the “Output Files”:\n\n    ```\n    $(BUILT_PRODUCTS_DIR)/$(FRAMEWORKS_FOLDER_PATH)/LiquidCore.framework\n    $(BUILT_PRODUCTS_DIR)/$(FRAMEWORKS_FOLDER_PATH)/ReactNativeSurface.framework\n    ```\n\n### Step 3: Add the Liquid View to your app\n\nYou can either add the view in the interface builder or programmatically.  To add the view:\n\n#### Android layout file\n\nYou can insert the view into any layout like so:\n\n```xml\n    \u003corg.liquidplayer.service.LiquidView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:id=\"@+id/liquidview\"\n    /\u003e\n```\n\n#### iOS Interface Builder\n\nDrag a `UIView` onto your storyboard in a `ViewController`.  Go to the identity inspector on the right and\nset its custom class to `LCLiquidView`.\n\n#### Android programmatic\n\n```java\nimport org.liquidplayer.service.LiquidView;\n...\n    LiquidView liquidView = new LiquidView(androidContext);\n```\n\n#### iOS (Swift)\n```swift\nimport LiquidCore\n...\n    let liquidView = LCLiquidView(frame: CGRect.zero)\n```\n\n### Step 4: Finish\n\nThis is all that is required to get up and running.  `LiquidView` defaults to using the dev server at port\n8082.  See the documentation for `LiquidView` (Android) and `LCLiquidView` (iOS) in the [LiquidCore](https://github.com/LiquidPlayer/LiquidCore) project for options.\n\n## Random Musings\n\nThis is very hastily thrown together documentation as this project is under active development.  So I am adding some\ndisorganized thoughts here.\n\n* `ReactNativeSurface` is not yet suitable as a general-purpose surface.  No (or very little) consideration has been made regarding security.  Only use whitelisted domains or better yet, use local resource bundles until there has been more work in the area of security.\n* On Android, the back button doesn't always work like you want it to.  This is a known issue.\n* Developer mode doesn't work on either Android or iOS.  It doesn't work at all on Android and only somewhat works on iOS.  For the moment, use old fashioned React Native to do your debugging until this is resolved.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliquidplayer%2Freactnativesurface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliquidplayer%2Freactnativesurface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliquidplayer%2Freactnativesurface/lists"}