react native support? about grpc-web

[trungthanhnt]

Is there any update of trying grpc-web in React-Native?

[Pearcekieser]

+1 I'd like this too, I might be able to help support. What is the current state of this

[fr3fou]

any news?

[shotor]

For those waiting for this, if it helps: I was able to use grpc-web in a react-native expo app without any problems. Not sure how this relates to react-native without expo.

Code: https://github.com/tihu-nlp/tihu-native/blob/master/app/src/logic/api/speak.ts

[c100k]

@virtumonde I have the exact same version of envoy.yml as you. It works perfectly on iOS but not on Android emulator. I get an error with the message Http response at 400 or 500 level.

In the Flipper logs, I can see this stacktrace when the call is being sent.

53	22:24:21.027	unknown:ReactContextBaseJavaModule		Unhandled SoftException
java.lang.RuntimeException: Catalyst Instance has already disappeared: requested by WebSocketModule
	at com.facebook.react.bridge.ReactContextBaseJavaModule.getReactApplicationContextIfActiveOrWarn(ReactContextBaseJavaModule.java:67)
	at com.facebook.react.modules.websocket.WebSocketModule.sendEvent(WebSocketModule.java:62)
	at com.facebook.react.modules.websocket.WebSocketModule.access$100(WebSocketModule.java:40)
	at com.facebook.react.modules.websocket.WebSocketModule$1.onMessage(WebSocketModule.java:190)
	at okhttp3.internal.ws.RealWebSocket.onReadMessage(RealWebSocket.java:323)
	at okhttp3.internal.ws.WebSocketReader.readMessageFrame(WebSocketReader.java:219)
	at okhttp3.internal.ws.WebSocketReader.processNextFrame(WebSocketReader.java:105)
	at okhttp3.internal.ws.RealWebSocket.loopReader(RealWebSocket.java:274)
	at okhttp3.internal.ws.RealWebSocket$2.onResponse(RealWebSocket.java:214)
	at okhttp3.RealCall$AsyncCall.execute(RealCall.java:206)
	at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
	at java.lang.Thread.run(Thread.java:923)

EDIT (SOLVED)

I was calling the server (Envoy) with http://localhost:8080 in my App.tsx. It works well on iOS. But I had forgotten that the host is not at localhost but 10.0.2.2 on Android 🤦🏽‍♂️.

[SameeraMadushan]

Is there any work around for grpc-web with react-native cli app?

[wenbozhu]

It uses polyfill.

grpc-web uses Google closure as the runtime ... and the new firestore web client has proven working on RN after we fixed one incompatible behavior (in RN) related to xhr.

google/closure-library#858

I also attempted doing a "fix" in closure, which unfortunately broke <1% gmail clients (maybe due to plugins).

So, if you are familiar with RN, do give it a try and report back any issues.

Thanks.

[wenbozhu]

We will evolve the JS API for grpc-web, and Reactive Streams etc will certainly been taken into consideration.

I don't think we have any plan to support JS API for mobile platforms, but we should have the discussion.

Let's keep this issue open to track related future updates ... Thanks!

[mickeyreiss]

Thanks!

Just to clarify, this question is focused on support for Facebook's open source React Native framework, which allows you to write native apps using JavaScript. (This tool is unrelated to rx/reactive streams.)

[wenbozhu]

Thanks for clarification. Does React Native offer any api specs too?

[mickeyreiss]

@wenbozhu I think this is the closest thing to a spec for React Native: https://facebook.github.io/react-native/docs/javascript-environment.html

[wenbozhu]

Thanks for the links. We will evaluate if our client is portable to reactive native.

[jeffwillette]

I had https://github.com/improbable-eng/grpc-web working with plain React so I dont see why React Native would pose any problem, just make a gRPC call with the js library like normal. Did you run into issues?

[sixman9]

Any updates, did anyone get this working working with React-Native (RN)?

[Isko97]

I tried to get this running with React Native.
Snippet of my App.js
`var proto = require("./compiled.js");

export default class App extends React.Component {
constructor(props){
super(props);

    var service = new proto.proto.EchoServiceClient("http://localhost:8080");
    var unary_request = new proto.proto.EchoRequest();
    unary_request.setMessage("Test");
    service.echo(unary_request, {}, function(err, response){
        console.log("Unary echo response: " + response.getMessage());
    });
}
// render...`

At the end of the compiled.js I added the following to allow including the modal.
exports.proto = proto.grpc.gateway.testing;
I ran the backend server and nginx using docker.
Unfortunately, I am getting this error:
Unknown base64 encoding at char: :
c compiled.js:429:210

[stanley-cheung]

Did you compile Nginx from this repo or you use a standard Nginx?

[Isko97]

I followed the instruction of the INSTALL.md and of the echo example. The nginx version is nginx/1.11.13.

[ademcan]

I am also trying to get the grpc-web running on React-Native to avoid using code duplication for iOS and Android. I managed to generate the compiled.js file but everytime I want to "load" it I have an error. I tried both of the following options:
import './compiled.js';
var proto = require('./compiled.js');
But none of these work.
Did someone here managed to use the grpc-web with RN.
Thank you for your help.

[hugows]

Is there any update of trying grpc-web in React-Native?

[wenbozhu]

Sorry, we don't have any local expertise to debug grpc-web on RN. We do know that goog-closure and its networking module (that grpc-web depends on) work fine on RN (e.g. in firestore/web).

So, if any of you likes to spend some serious time debugging the environment and working with us to get to the bottom of this, let me know. Thanks.

[lyseiha]

+1

[dclipca]

@shotor is right, you are able to connect from React Native (with and without Expo). Here is a Docker example where the server uses Go.

docker-compose.yml

version: "3.8"
services:
  envoy:
    build: ./envoy
    restart: always
    expose:
      - "2301"
    ports:
      - "2301:2301"
  server:
    build: ./server
    depends_on:
      - envoy
    ports:
      - "2302:2302"
    restart: always

The gRPC service (server) listens for connections on 2302 while the envoy proxy listens on 2301 and redirects to 2302, which is the gRPC service.

Dockerfile for envoy:

FROM envoyproxy/envoy-alpine:v1.14-latest
COPY envoy.yaml /etc/envoy/envoy.yaml

envoy.yaml:

static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 2301 }
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.config.filter.network.http_connection_manager.v2.HttpConnectionManager
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route:
                  cluster: greeter_service
                  max_grpc_timeout: 0s
              cors:
                allow_origin_string_match:
                - prefix: "*"
                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                max_age: "1728000"
                expose_headers: custom-header-1,grpc-status,grpc-message
          http_filters:
          - name: envoy.filters.http.grpc_web
          - name: envoy.filters.http.cors
          - name: envoy.filters.http.router
  clusters:
  - name: greeter_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    load_assignment:
      cluster_name: cluster_0
      endpoints:
        - lb_endpoints:
            - endpoint:
                address:
                  socket_address:
                    address: host.docker.internal
                    port_value: 2302

As I am using an Apple laptop, I use host.docker.internal instead of localhost for address in socket_address.

[dclipca]

Here is the whole example:
dockerized_grpc_example.zip
server is supposed to be the folder with the service. In this case, it was a Go gRPC server, but I did not add the source for it.

[dclipca]

To start it, install docker and docker-compose. Run docker-compose up after either pasting your Go server source inside the server folder or another server. If you choose to upload a server in another language then you will have to change the Dockerfile inside the server folder.

[Yasaswini134]

Will grpc-web officially support React Native?

Here's some more information about what that javascript execution environment looks like on various platforms.

Thanks!

Will grpc-web officially support React Native?

Here's some more information about what that javascript execution environment looks like on various platforms.

Thanks!

Hi, i am getting PageNotFound.. can you please suggest me proper link

[sixman9]

Will grpc-web officially support React Native?
Here's some more information about what that javascript execution environment looks like on various platforms.
Thanks!

Hi, i am getting PageNotFound.. can you please suggest me proper link

Google is your friend:

https://reactnative.dev/docs/javascript-environment

;-)

[Yasaswini134]

Will grpc-web officially support React Native?
Here's some more information about what that javascript execution environment looks like on various platforms.
Thanks!

Hi, i am getting PageNotFound.. can you please suggest me proper link

Google is your friend:

https://reactnative.dev/docs/javascript-environment

;-)

thank u

[githorse]

@virtumonde @shotor I see some great examples of the server but I'm still missing the client-side code here. Could anyone post a simple working example of

1. a working protoc command to generate the js/ts files; and
2. a working import (or require) from the RN side that uses these files? (Preferably a simple example including both message and service.)

@shotor I'm trying to duplicate your example but React Native gives me Unable to resolve module errors using either import or require in App.tsx. Can you list the protoc command(s) you're using to generate your *_pb and *ServiceClientPb files? Do I need to package it à la the HelloWorld example?