use react-native-firebase

To get the push notification or login with facebook SSO in the react native project
It seems that we can not use the pure Expo environment to construct your app with Firebase Web API

react-native-firebase is a light-weight layer sitting on-top of the native Firebase libraries for both iOS and Android

Rather than using the create-react-native-app to create the project.
We need to use react-native-cli to init the project , then the iOS and Android folder will be included.

Then you can run the below command to install the react-native-firebase and link it.

npm install --save react-native-firebase
react-native link react-native-firebase

And you need to update dependency in  the gradle file or podfile .

Here is some configuration you also need to complete:

- Create a Facebook App in the Facebook Developer console , and setup the Android package name or iOS bundle ID there.

- If it's android , the hash value of key you sign the app also need to be added into the Facebook developer console app setting. You can use below command to get the hash value of your default android debug key.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

- Setup the Facebook App ID into the AndroidManifest or info.plist file

- Create a project in Firebase. Setup the Facebook App ID and Secret in the authentication tab of Firebase console . And add app setting with your Android package name or iOS bundle ID there

- Download the GoogleService-Info.plist into the ios/APP_NAME/ folder (you also need to include it in xcode) or the google-service.json into the android/app/ folder.

GraphQL and Apollo Client

I watch the GraphQL with React: The Complete Developers Guide course by Stephen Grider these days.
There are three major sections:

The first section teach you how to use express and graphql-js to build a GraphQL BE server.
He introduce the package json-server which can build a REST server in a super convenient  manner.
Then we can build a GraphQL server in front of the REST server easily without caring the data source.
This section includes how to write the schema to describe the data type , and how to write the resolver to construct the relation between types. We also need to use resolver to provide mutation to allow client to update/delete the data.

The way to write the schema in graphql-js is not that intuitive to me.

const UserType = new GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: GraphQLID },
    name: { type: GraphQLString }
  }
})

But just like what Stephen said , keep the resolver and the schema in the same place let developer easy to understand what fields this type can provide.

The second section introduce the way to use apollo-client and React to build a GraphQL client .
It includes:
- How to write the query and mutation in apollo-client, and how the response be used in React.
- How to use date.refetch or refetchQueries to trigger the query after mutation is executed.
- How to use optimisticResponse to predict the response to update the UI before getting the response
- Use dataIdFromObject to prevent refetch the API when you already got updated data in the mutation response

In the last section , it introduce how we can use passport-js to provide authentication in GraphQL.

And some gotcha need to be taken care of when you try to redirect the page once user login their account.

Because I already familiar with React , the React part in this course is too easy to me. But it's still quite helpful to have a full understanding to GraphQL. 

apollo-client actually provides a convenient way to access the GraphQL API, especially it cache the data in the query and prevent you to request same query needed in multiple component. 

React Server Side Rendering is cool!

I heard SSR in Syntax podcast for a while .
But I just realized there are so many interesting details after I watch the lesson by Stephen Grider today.

It use React to render the skeleton of components in the server side. 

After the browser load the rendered HTML, it load the client side Javascript.

It will update the DOMs and inject all the dynamic part.

I really like the courses provided by Stephen Grider. They're not only easy to understand but also cover how the mechanism works under neath.

Here are some interesting items of SSR.

- use different Router implementation in Server side vs Client side
- render the html in server side with the data loaded, the loaded data keeped in the store will be also printed in Javascript in the html. Then client bundle javascript will use the store as initial state as client side redux store.
- If the API need to be authenticated. If it's requested in the server side , the cookie need to be take from the HTML request . If the client request the API directly , it should request the API to the render server as a proxy. Because the cookie only works on the same domain.

There are two major benefits why SSR exist.
- It eliminate the time cost of the first API request and DOM rendering in the client side
- Open graph tag provided in server side has better compatibility in social media platform

But the developers really need to evaluate whether it worth , it's far more complicated to implement SSR React than the normal client side React. There are too many stuff need to be taken care.

The way to remount the Android Emulator

Start the emulator by the following command.

emulator -avd <AVD_NAME> -writable-system

Learn a new way to start a http server

python3 -m http.server 8000.

Little planets effect (小行星特效)

I got a task to implement this effect recently.
Before it's assigned to me, there was a fragment shader in the codebase to handle this effect.
But the view angle can not be rotated.

So I try to "google" whether there is any information about it.

Then I found this page .

It's a way to project a sphere to a plane.

It's called "stereographic projection";

Φ = asin( cos(c) sin(Φ₀) + (y sin(c) cos(Φ₀) / r )

λ = λ₀ + atan( x sin(c) / (r cos(Φ₀) cos(c) - y sin(Φ₀) sin(c) )

I can use the above equation to calculate the position correspond to the x,y coordinate on the plane. 

After I adjust the fragment shader by the equation, the user can watch this planet at any angle.

It's quite interesting to try the OpenGL shader, I can generate such amazing results by a few lines of code.

By the way, if you would like to try such kind of effect by your self, you can download  Insta360Player.

If I didn't find a way to implement the little planets effect, I will try to decompile it's apk.

Android OpenGL Texture memory occupied

I try to solve an interesting memory issue recently.

There is a viewer page in a project I owned recently.
The whole app will be closed without showing the "force close dialog" if we keep entering and leaving that page.
It seems like a memory leak , so I try to use LeakCanary to check it but found nothing related.

Then I try to use the  Memory Monitor  in Android Studio to monitor the memory usage.
But all the memory is released after the GC.

So I can only record the logs during that period and check it line by line.
Then I notice that many process is killed by Activity Manager during that period.
Even a process with OomAdj 0 (contain a foreground activity) is killed too.
It's quite abnormal that Activity Manager will kill so many process when I can't found any app spend lots of memory.
It pops into my mind there is a lesson learned I got in HTC .
In the early version of Android , the memory of a Bitmap can be allocated in the native layer.
Is it the reason it's not watched by the Memory Monitor?

So I try to survey whether there is any command I can use to check the memory usage in native layer.
Then I found the command below.

adb shell dumpsys meminfo <package_name|pid> [-d]

After I execute it, I LOL.
EGL mtrack is fucking high!!

It seems like the memory related to the OpenGL in this page is not released correctly.

After I found the hint, it's much easier to solve this issue.