a full stack enthusiast interested in Javascript / Typescript / Kotlin / Python / React / React Native / (Android & iOS) native / Cloud

Since this waste me a hour. I decided to publish my experience here to save your time.

For menus on React native. I still love ActionSheet, and I use @expo/react-native-action-sheet, yes, you can use it in non-Expo React native project, pretty good. An universal ActionSheet API for Android, iOS and Web. Great! The interface is 100% match the original RN ActionSheetIOS, with some additional settings for Android and Web.

Everything works perfectly, with a problem, the signature of that function showActionSheetWithOptions() generates too much boilerplate everytime I use it. It destroyed the simplicity of the ActionSheet.

In this blog, let’s make it simple again, if you just use RN’s ActionSheetIOS, this blog still helps you for cleaner code, if you are using Javascript, it helps too.

Today I ran into this issue while installing React native 0.64.1. The pod install always threw error: [Xcodeproj] Unknown object version. Even with a basic command react-native init. Let’s see how to solve it.

With the createSlice of redux toolkit, the actions could generated when writing reducer, which nearly eliminate all boilerplate from Redux to a MobX level.

But still, can we do better? Let me show you the dark side of a Redux usage that you may like or not like. But it will make your Redux life easier in the future. And I will show you how to use Typescript to make it even better.

Relay is a great GraphQL client side library made by Facebook. It has a Node query which allows you to have a universal endpoint for querying all your endpoints in your GraphQL. Let’s check how we do that, we will use Nexus, you can use the other GraphQL, but I found Nexus made me really productive.

You can use toGlobalID() and fromGlobalID from graphql-relay package. Then you can stop reading here. But I will use an easier way, which you can adopt for your green field project.

I am quite into Relay these days, for its opinionated, typesafe and performant approach. Especially for the effortless pagination.

For the backend, I use TypeGraphql, so easy to pick up if you already familiar with Typscript, typesafe, explicit, code-first, and very fast even it uses a js class approach. Today, I will show you how to define the Relay connection in TypeGraphql. I am using v1.0.0 here.

It’s not about actual implementation, since it is related to your data access layer. This blog is purely focused on defining the TypeGraphql class and how to use them.

Let’s cut to chase.

I use react-hook-form for both web and react native without a single problem. Great library. When using react-hook-form v6. I encountered an issue where the validation works perfectly in code, but in test, the errors object is always empty even for wrong value. Let’s see how to solve it. In this blog, I will demostrate how to test react-hook-form with react-native-testing-library for both iOS and Android within one test through jest-expo, and yes, we will use jest as the test runner.

Recent in my side-project. I’ve got an interesting requirement. I’ve a React Hook function useRxQuery(queryFunc) for getting data from RxDB. It takes a simple query function queryFunc as the argument takes an RxDB instance, and returns with data. Inside the hook, it does the preparation, executes that query function queryFunc, and returns the data: T.

So, how to auto-type the ReturnType<> of the hook function useRxQuery, such that whatever return from that query function queryFunc should be taken as the return type of the function useRxQuery automatically.

Let’s solve it with the infer keyword in Typescript, and you can make your code much more robust in the future.

I created a universal app with Expo for native mobile and web. It works wonderfully. I think a monorepo for local code sharing should efficient than publishing to a private package to Github registry (It works like a charm though).

I thought it’s just a 5 min setup. But I was wrong… Still very easy though. In this blog, we will use monorepo to share code between the backend(Serverless framework) and frontend(Expo).

I always try my best to introduce less overhead and less dependencies to solve a problem.

Our goals

• Yarn only without lerna: Less overhead. And We do not need lerna
• Yarn version: v1.22.4
• Typescript support for all three modules
• I just want to focus on coding without worrying about building pipeline
• No no no, no Babel, that’ll introduce loads of dev-dependencies, I want a clean tree.
• I will show you how to use as well

If you have ever receive this warning from the log of your lambda,

WARNING: Callback/response already delivered. Did your function invoke the callback and also return a promise? For more details, see: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html

I got this when implementing Cognito lambda trigger of the PreSignUp step.

Let’s see how to solve it.