Some pain point when I using React Native

Although Airbnb was just sunsetting the usage of React Native on their mobile app. But I still choose it to develop a side project app.

As an Android developer, React Native is very attractive to me. I can construct both iOS and Android app but only maintaining the same code. React is also a cool web technology I study for a while.

 

But after some effort, I found there are some pain point to use it to develop the mobile app.

• The documentation is poor. When I try to use the KeyboardAvoidingView to handle the keyboard and user input. Not only the official document is limited, I can't find useful info on the Internet. I need to try and error to figure out how the component behave in iOS and Android device.
• It introduce some effort to use the native feature provided by 3rd party library. The way using 'react native link' to configure iOS and Android is not always reliable. When I used react-native-i18n , the link commend cause the 'jest-haste-map: @providesModule naming collision' issue between the pod package and the node-module package.
• - The way that facebook handle the issues is disappointing. For example, Chinese input is not handled correctly after v0.54, but it still not fixed in v0.56.

Although there are still such pain points, but it's still a great cross platform framework to build mobile applications. I will keep trying to get familiar with it.

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.