DEV Community: Elazizi Youssouf

Master React Native: 5 Open Source Projects to Learn From

Elazizi Youssouf — Mon, 31 Jul 2023 11:11:55 +0000

In my previous article titled "Github Feed is Underrated," I highlighted the importance of GitHub as a valuable platform for learning from top developers worldwide. It provides a valuable resource for finding new ideas and inspiration that may be challenging to come across in traditional learning formats like articles and courses.

Today, I will demonstrate how you can use GitHub to master React Native. I will share the top 5 open-source React Native projects from which you can learn. I have personally gained valuable knowledge from these projects, and I highly recommend that you take them seriously and make an effort to learn from them.

So let's get started!

1. Showtime Project

Showtime is a Web3 social network with a lot of features such as posting, commenting, liking, and following, among others. It's a production app that is utilized by a large number of users. Since they share the codebase between the web and mobile app, they use Solito, which allows them to use Expo for mobile and Next.js for the web.

I first learned about this project at the App.js Conf 2022 during Axel's presentation on creating a universal design system with React Native. To this day I'm still revisiting the project and uncovering new insights as the project is well maintained and updated regularly.

2. Expensify App

Expensify is a complete re-imagination of financial collaboration, centered around chat. A production application(available on ios and Android) used by a large number of users.

Same to the Showtime app, they share code between the web and mobile apps as well.

The project is based on React Native CLI and uses TypeScript. It is well-maintained and regularly updated. It has been heavily tested with unit tests and end-to-end (e2e) tests. This project offers valuable learning opportunities as well.

3. React Native Testing

This is not a real app, but rather a collection of examples demonstrating the correct way to test React Native apps. If are willing to test your React Native app using Jest and react-native-testing-library, this is the perfect place to start.

Believe me, what I learned about testing React Native apps from this project is priceless. How to mock native modules, API calls, and navigation. The right way to write your assertions, the correct setup, and much more are all covered in this project.

4. React Native Template Obytes

This is a React Native starter that we use at Obytes for new projects and is based on the Expo dev client and TypeScript. The starter comes with a lot of features out of the box, such as authentication, navigation, localization, form handling, environment variable validation, theme, GitHub Actions, and much more.

Normally, we build this project for everyone who wants to create a new project and start with a solid foundation. However, I have noticed that a lot of people have been using it as a source of inspiration and for learning purposes lately.

5. bluesky App

BlueSky is a social media app similar to Twitter. The project is based on Expo and supports web, iOS, and Android, with a lot of features similar to what you see on Twitter.

The project is also well-tested with unit tests and end-to-end (e2e) tests. It is well-maintained and updated regularly and uses Expo 48 SDK

This article was originally published in https://elazizi.com

That's it for today. I hope you found this article useful. If you have any other suggestions, please leave them in the comments section below.

How to learn TypeScript for react developers

Elazizi Youssouf — Sat, 08 May 2021 00:00:00 +0000

In the last couple of years, typescript gains a lot of popularity among the react community. We start seeing more and more people tweeting about using typescript as a default language for their react project. This fact convinces more people to use typescript and start asking about the best way to learn it.

Before digging into how you can start learning typescript for reactjs, it is important to know that typescript is only a superset of JavaScript, which primarily provides optional static typing, classes, and interfaces. This means you are not going to learn an entirely new language.

It’s been a year now when I start using typescript for my react and react-native projects. I am writing this article for everyone using react with javascript and want to start using typescript.

This article reflects precisely my way of learning new technologies. I usually start watching videos to make sure I will have a global vision of what I am trying to learn. I typically don’t care about practice in this step, and I watch multiple videos from different sources. When I feel confident I have an overview, I jump directly to official docs or use some good GitHub repo cheatsheets and start practicing on my projects.

1. Overview

In this step, our goal is to have an overview of typescript with react, what we can do, and how.

There is no one better than the fantastic Ben Awad to give you a fast and strict point overview about what you are trying to learn. Ben had a great tutorial about how to start using Typescript in your react code. Typing for props, hooks, and render props. A perfect video to have an overview about react with typescript.

Also, I would recommend reading the typescript section on the official react docs.

2. Practice using react typescript cheatsheets.

As we learn typescript in react, I wouldn’t recommend the official website, which doesn’t mean the typescript official doc is not good. From my experience using official docs, I feel like I am out of the context as I need to focus more on react.

Thanks to our amazing community, I found a GitHub repo cheatsheets with exactly everything you need to start using typescript with react from essential to advanced examples.

I used the cheat sheet for a month working on my first typescript project without looking to any other resources. Until now, I am still visiting the repo every few days :)

3. More Practice: Typescript challenge

At this point, I can work on every react typescript project without any problem. As I usually like reading open source code to learn more patterns and best practices, sometimes I feel lost trying to understand some high-level typing techniques.

That’s why I am trying to complete an online typescript challenge to understand better how the type system works, writing my utilities. Till now, I am having fun with challenges.

4. More More Practice: open source contribution.

In the last couple of months, and to evaluate my skill in a real challenge, I start working on migrating my open-source project reactjs-popup to typescript, and I released a new version completely written with typescript. I mention this because we still have many npm packages without typescript support, and I would recommend everyone contribute by adding typescript to those packages. Learning and helping the community at the same time :)

Conclusion

Steps to learn typescript for reactjs :

An overview from official docs & Ben Awad tutorial about typescript
React typescript cheatsheets.
Typescript challenge
Open source contribution

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts about this solution in The comments.

If you think other people should read this post. Tweet,share and Follow me on Twitter for the next articles.

Handling Errors in React Native: A Complete Guide

Elazizi Youssouf — Mon, 31 Aug 2020 00:00:00 +0000

One of the fundamental skills you need to learn in your development field is to learn how to deal with unthought errors. As a react native developer, shipping a new application with a high percentage bugs-free is a little bit challenging.

Through my experience using react-native, I think using a cross-platform solution to build an Application always comes up with a stability price. And to be honest, having at least 3 different languages to build a framework is not easy to make it bugs-free.

With all these facts, it does not mean that your app should quit or return a white screen whenever an error happened. It’s your responsibility to handle these errors and provide the best experience for the end-users. > I am here to help

This article will guide you through some techniques and tools to catch these unhandled exceptions, perform tasks to provide the best experience for users, and report these errors to make sure you are going to fix them on the next release.

Note to mention that using static typing such as typescript will help you avoid all errors caused by typos and typing errors as you write the code which leads to fewer errors to deal with in the execution.

I also encourage writing higher coverage tests for your app as testing is the only way to ensure everything works as expected.

As I already mentioned React Native has two sides, Javascript and Native, this fact will introduce two types of errors you need to deal with :

JS Exceptions: Errors produced by Javascript code including React.
Native Exceptions: Error produced by Native Modules

JS Exception

In general, javascript is not hard regarding error handling, and a try/catch is great but it only works for imperative code. However, React components are declarative (specify what should be rendered) which means you can't use a try-catch for react components errors.

To solve this problem, React 16 introduced a new concept of an Error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in the child component tree.

Make sure to read about Error boundaries from React official docs

The error boundaries API only works with class Component, and a class component becomes an error boundary if you define one of these lifecycle methods static getDerivedStateFromError() or componentDidCatch().

React-error-boundary is a simple reusable component based on React error boundary API that provides a wrapper around your components and automatically catch-all error from the children’s components hierarchy, and also provides a great way to recover your component tree.

My suggestion is to wrap every navigation screen in your Application with a react-error-boundary component and provide a fullback component to Make sure the user knows what’s happening, and maybe you can recover the screen with a rerender.

The best way to do it is to create an Errorhandler component like the following.

import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { View, StyleSheet, Button } from "react-native";

import { Text } from "components";

const myErrorHandler = (error: Error) => {
  // Do something with the error
  // E.g. reporting errors using sentry ( see part 3)
};

function ErrorFallback({ resetErrorBoundary }) {
  return (
    <View style={[styles.container]}>
      <View>
        <Text> Something went wrong: </Text>
        <Button title="try Again" onPress={resetErrorBoundary} />
      </View>
    </View>
  );
}

export const ErrorHandler = ({ children }: { children: React.ReactNode }) => (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    {children}
  </ErrorBoundary>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    alignContent: "center",
    paddingHorizontal: 12,
  },
});

As you can see I am using an error fullback component to provide more information to the user instead of a white screen.

I also added a try again button to programmatically re-render the screen as a way to recover it and solve the issue. when the user clicks the try again button the error boundary will trigger a rerender for the Screen Component which can help to avoid error and show the correct components.

Read More about Error Recovery

To mention, I am also wrapping the error boundary component for every component that may throw an error.

Is Error Boudry enough for JS Exceptions?

Unfortunately, it’s not, Error boundaries do not catch errors for :

Event handlers
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Errors thrown in the error boundary itself (rather than its children)

These limitations lead us to use a react-native-exception-handler to create a global handler for the App that can catch all uncaught Js errors.

react-native-exception-handler is a react native module that lets you register a global error handler that captures fatal/non-fatal uncaught exceptions.

To make it work you need to install and link the module then you register your global handler for Js exception like the following :

import { setJSExceptionHandler } from "react-native-exception-handler";

setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});

Native Exception

As I already mention Native Exceptions were produced from Native modules errors and Internal native react native code.

From my experience, we usually face few uncaught Native exceptions compared to Js ones, the good news is that we are going to use the same library( react-native-exception-handler) to handle native exceptions too but you cannot show a JS alert box or do any UI stuff via JS code. The only solution was to show a native alert provided by the library but native code has to be written in case you want to customize the alert.

To create a global handler for Native exception, you only need to register your handler using setNativeExceptionHandler function like the following :

import { setNativeExceptionHandler } from "react-native-exception-handler";

const exceptionhandler = (exceptionString) => {
  // your exception handler code here
};
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

Tracking Exceptions

Handling exceptions without tracking them has no sense because all the solutions we discussed only improve the user experience and give more information to the user about the error instead of a white screen or an app crash.

Sentry is a cloud-based error monitoring platform that helps us track all these errors in real-time. By creating a free account and installing react-native-sentry you can use it inside your handler (js and Native) to send the stack errors using captureException like the following:

// ErrorHandler.js
import * as Sentry from "@sentry/react-native";

const myErrorHandler = (error: Error) => {
  Sentry.captureException(error);
};

Now, Make sure to fix your errors 😉

Wrap Up

Libraries we use to handle errors in React Native :

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.

If you think other people should read this post. Tweet, share, and Follow me on twitter for the next articles.

More React Native Guides :

👉 17 React Native libraries you should use in 2020
👉 Authentication in React Native, Easy, Secure, and Reusable solution 💪.
👉 Forms in React Native, The right way
👉 Spotify Login Animation With React Navigation V5

17 React Native libraries you should use in 2020

Elazizi Youssouf — Thu, 30 Apr 2020 17:41:33 +0000

Originally published 👉 https://elazizi.com/

Having fundamental and advanced skills in the development field is important for sure to create height quality applications and find solutions for challenges, but it is not enough. I want to highlight an aspect that people mostly forget in their learning path despite that it is very important. This aspect is about having the overview of your stack ecosystems( libraries and tools) in your field, having this skill will help you decide the best package or tools you need to use for every situation you have.

Most questions people ask me on RN were not related to fundamental or advanced stuff, I noticed that most of them are in the following format.

Hey Youssouf what is the best library to handle XXXXX ( XXXXX here can be authentication, forms, API call…)

In today's article, I will try to collect the best dependencies and libraries I use on almost every react native project I worked on and I think you should give a try.

This list can be useful for reactjs dev too.

Before starting, I think it is not fair to give the list without some advice and
tricks to help get updated about new libraries and tools:

Try to be an early adopter developer, which means try to use new promising techniques and libraries in your Apps from the ecosystem. This is the only way to have experience very fast. To be honest most of the best practices resources will disagree with this advice as adopting new techs and libs come with an application stability price.
Follow the best people in your field on Twitter and be an active member on Reddit channel.
One of the useful tricks i do when i found an open-source project or even project of a friend, is that I search on the first place in package.json file, i take a look and i search for every package i don't know, believe me, you can't even imagine how such a simple habit will get you to know so many great tools and lib in your ecosystem 😎.

Back to our main subject and there are the packages I used in almost every project I worked on:

react-native-bootsplash for creating splash Screen

This is usually the first task we do in a new react native application, this package will help Show a bootsplash during app startup instead of the standard black screen, you can hide it when you are ready.

One of the reasons I prefer using react-native-bootsplash package over the most famous solution react-native-splash-screen is that this solution does not prevent you from seeing red screen errors.

bootsplash package also provides a CLI to resize assets, create the Android Drawable XML file, and the iOS Storyboard file automatically.

react-native-make to generate platform-specific app icons

react-native-make is a plugin for React Native CLI, Once installed, the plugin will be available through the React Native CLI and you can easily create your platform-specific icons using set-icon commend like the following:


react-native set-icon --path path-to-image

react-navigation as your first navigation solution.

Last year I wrote a blog post about how to choose the right React Native Navigation library and we ended up that using react-native-navigation is the best choice for navigation due to some issues you will face with react-navigation on heavy screens.

Starting from v3 the library uses react-native-reanimated and react-native-gesture-handler to implement performant animations and gestures. This helps us avoid issues related to transition and animation for heavy screens.

Moreover, react-navigation v5 introduces a new component API to Make it easy to use by new developers coming from reactjs web background and familiar with routing solutions such as react-router.

react-native-svg for icons

For a long time, I used react-vector-icon to create my custom Icons assets, this approach comes with some difficulty as I always find myself regenerating a new font whenever our designer changes an icon in the design system. Also, this approach has some limits on supporting some SVG properties.

Using react-native-svg will fix most of those issues, also I found it very simple to add new icons as Most of the design tools Nowadays export the SVG icon as React native component.

if you only have SVG icon you can use this playground tool that converts SVG files to React Native components

Forms With react-hook-form

I can’t imagine developing a new mobile app without dealing with forms, and to be honest forms in React native can be a little bit hard as you need to deal with form state, validation, error, API, and keyboard issues. That’s why i recommend checking my last article about Forms in React Native, The right way

react-native-keychain to save sensitive data

From my experience. I always noticed that people use async-storage to store API tokens and sensitive data, and I can understand if people only use it for demo purposes, unfortunately, I found a lot of people storing sensitive data using Async-storage in production.

The react-native-keychain library provides keychain/Keystore access to your React Native application, making your sensitive data secure.

API call using react-apollo or react-query

Dealing with API in a React Native or front-end application, in general, is a crucial task, and choosing the right stack can make your work easy and enjoyable.

Implementing features like caching, offline support or optimistic API wouldn’t be easy if you are using a Redux redux-saga stack.

My suggestion here is to use react-query or apollo-client (depend on your backend implementation) which comes with all the features we talk about out of the box.React-query for REST API and react-apollo for GraphQl.

Content Loaders

React-content-loader is one of the great libraries to easily create placeholder loadings, it is an SVG powered component with a lot of presets to use,you can easily use their playground to create your custom content loader.

Handling and Tracking Errors

Sentry is cloud-based error monitoring that can help you discover an error in real-time, by creating a free account and installing react-native-sentry you can quickly find and fix production errors.

In the same field, I would recommend using react-native-exception-handler, A react native module that lets you register a global error handler that can capture fatal/non-fatal uncaught exceptions. The module helps prevent the abrupt crashing of React Native Apps without a graceful message to the user.

I am planning to write a complete guide about Handling errors in React Native, Make sure to subscribe to my newsletter.

Patch packages

During my App development and due to some unmaintained community packages I used in some of my old applications, I found myself updating node_modules files to fix issues, and as you know when you update the code inside node_module and then you install a new package by running npm or yarn command you will lose your update. In this case using a patch-package library is life-saving.

Check this complete tutorial about patch-package by the amazing @benawad

Detox for E2E testing

native-testing-library is an implementation of the well-known testing-library API by the amazing @ketcdoods that works for React Native. The primary goal is to mimic the testing library API as closely as possible while still accounting for the differences in the platforms. Believe me, you will love it 🥰.

For end-to-end testing, I can recommend using Detox from Wix As a solution to automate end to end tests for your application using javascript. To be honest I faced some issues setting up the library but I think it is the best choice we have at least for now.

Wrap up

This is My complte list 👇

If you think I am missing some great libraries that can help me improve my React Native Application please make sure to let me know in the comments.

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.

If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles.

Reac More 👉 GraphQL: Front-End Superpower

Spotify Login Animation With React Navigation V5

Elazizi Youssouf — Wed, 22 Apr 2020 17:59:32 +0000

Originally published 👉 https://elazizi.com/

If you are using Spotify mobile application to listen to your favorites music, for sure you noticed the great and smooth login animation.

As a Front-end and React Native developer I easily fell in love with such kind of micro-interaction and I always aim to create my own version.

Before jumping into our use case, I just want to highlight that having such kind of micro-interaction in your mobile application is very important for users, Using those animations would help to improve the user experience and will make your application special in front of all standard animation we have in Mobile Platform.

Last weekend, during the quarantine time 🙃. I start thinking about Implementing the same behavior in one of the applications I am working on using react-navigation API.

This Article is my weekend work trying to implement Spotify login animation using react-navigation V5.

In case you are not familiar with Spotify and didn’t know how the Spotify login animation looks like. The login animation is a flip from the login screen to the home page. The flip Animation can be implemented easily using the react-native animation API, but the challenge here is to implement the animation using Navigation API.

Approach :

To Implement the Animation we should first prepare our login and home screens to make sure our example will reflect the exact Spotify app experience, then we should implement an AuthContext to handle our authentication flow.

Next, we are going to create our Navigators and set up the navigation experience with our authentication workflow.

Our last step is to create the custom flip animation using the new react-navigation API.

If you are Familiar with React-Navigation and you already woked with authentication flow before, you can skip all those sections to Create Spotify Transition.

Create Screens

To make it easy to follow, we are not going to create a Spotify clone, instead, we will only focus on creating the login and home screen with Albums.

Create the Login Screen using a Simple Form and a Login Button.

// screens/Login.js

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import { Button, TextInput } from "react-native-paper";

export const LogIn = ({ navigation }) => {
  const [loading, setLoading] = React.useState(false);

  const loginApi = () => {};
  return (
    <View style={styles.form}>
      <TextInput label="Username" style={styles.textInput} />
      <TextInput
        label="Password"
        style={styles.textInput}
        secureTextEntry={true}
      />
      <Button mode="outlined" onPress={() => loginApi()} style={styles.button}>
        {loading ? "Loading ...." : "LogIn"}
      </Button>
    </View>
  );
};

Make sure to read My previous post about the best way to handle forms in react native

Next step is to create the home screen with some albums cover images :

import * as React from "react";
import { StyleSheet, Image, ScrollView } from "react-native";
import { Button, TextInput } from "react-native-paper";

export const Home = ({ navigation }) => {
  return (
    <ScrollView contentContainerStyle={styles.albums}>
      <Albums />
    </ScrollView>
  );
};

Create Navigators and Auth Flow

To set-up our authentication flow we are going to use the same approach mentioned in react-navigation documentation with some changes on the navigation Part.

First, we are going to make an AuthContext & AuthProvider that will help us deal with all authentication flow.

For the navigation part, I think the best way for our case is to create two stacks, one for auth screens (login, signUp, …) and a second one for home screens ( albums, player …)

Finally, we use a root stack navigator that renders the correct stack based on user status ( loggedIn/Out).

// navigation/index.js
const AuthStack = createStackNavigator();
const AppStack = createStackNavigator();
const RootStack = createStackNavigator();

const AuthNavigator = () => {
  return (
    <AuthStack.Navigator
      headerMode="float"
      screenOptions={{
        cardOverlayEnabled: true,
        gestureEnabled: true,
      }}
    >
      <AuthStack.Screen name="Login" component={LogIn} />
    </AuthStack.Navigator>
  );
};

const HomeNavigator = () => {
  return (
    <AppStack.Navigator
      headerMode="float"
      screenOptions={{
        cardOverlayEnabled: true,
        gestureEnabled: true,
      }}
    >
      <AppStack.Screen
        name="Albums"
        component={Home}
        options={{
          headerRight: () => <SignOutButton />,
        }}
      />
    </AppStack.Navigator>
  );
};

export const RootNavigator = () => {
  const { status } = useAuth();

  return (
    <RootStack.Navigator headerMode="none">
      {status === "signOut" ? (
        <RootStack.Screen name="Auth" component={AuthNavigator} />
      ) : (
        <RootStack.Screen name="App" component={HomeNavigator} />
      )}
    </RootStack.Navigator>
  );
};

By the end, we should be able to login using the login screen.

Create Spotify Transition

React stack navigation v5 release introduced a new way to create custom Animation using declarative API and based on next and current screen progress.

Those transactions can be customized by using screen options prop for every screen, but in our case, we are going to implement the custom animation globally for our Root Navigator.

For stack Navigator There are 4 animation related options:

gestureDirection : to define your swipe gestures.
transitionSpec : An object which specifies the animation type (timing or spring) and their options (such as the duration for timing).
cardStyleInterpolator : This is a function that specifies interpolated styles for various parts of the card. Using this function we can interpolate styles for the container, the card itself, overlay and shadow, Our custom animation will be based on using this function.
headerStyleInterpolator : The same as cardStyleInterpolate but for header properties. To create a custom transition for our Root screens we need to create a custom transition object for our Transition and add it to screenOptions prop in RootNavigator

// navigation/SpotifyTransition.js
import { Easing } from "react-native";
import {
  TransitionSpecs,
  HeaderStyleInterpolators,
} from "@react-navigation/stack";

const AnimationSpec = {
  animation: "timing",
  config: {
    duration: 2000,
    easing: Easing.ease,
  },
};

export const SpotifyTransition = {
  transitionSpec: {
    open: AnimationSpec,
    close: AnimationSpec,
  },
  cardStyleInterpolator: ({ current, next }) => {
    return {};
  },
};

// navigation/index.js
export const RootNavigator = () => {
  const { status } = useAuth();

  return (
    <RootStack.Navigator
      headerMode="none"
      screenOptions={{
        cardOverlayEnabled: true,
        gestureEnabled: true,
        ...SpotifyTransition,
      }}
    >
      {status === "signOut" ? (
        <RootStack.Screen name="Auth" component={AuthNavigator} />
      ) : (
        <RootStack.Screen name="App" component={HomeNavigator} />
      )}
    </RootStack.Navigator>
  );
};

The first step in our transition is to rotate the focused screen(the screen we want to navigate to) according to Y-axis from 180deg to 0deg and at the same time, the next screen should rotate from 0deg to 180deg.

To Make it work, we need to update card Style and set rotateX as the following:

export const SpotifyTransition = {
  transitionSpec: {
    open: AnimationSpec, //TransitionSpecs.TransitionIOSSpec,
    close: AnimationSpec, //TransitionSpecs.TransitionIOSSpec,
  },
  cardStyleInterpolator: ({ current, next }: any) => {
    return {
      cardStyle: {
        transform: [
          {
            rotateY: next
              ? next.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: ["0deg", "180deg"],
                })
              : current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: ["180deg", "0deg"],
                }),
          },
        ],
      },
    };
  },
};

The highlighted lines mean that if we have the next value, we know that this card is behind the focused one, so we need to rotate from 0deg to 180deg.

As you can see the rotation is working as expected but the focused screen is always on the top and covers the old one immediately even if the Transition progress is still running.

To fix this issue, we are going to interpolate the navigation progress and use it for card opacity which will help us show the focused screen only when the progress is higher than 0.5 and show the old screen if it's not the case

export const SpotifyTransition = {
  transitionSpec: {
    open: AnimationSpec,
    close: AnimationSpec,
  },
  cardStyleInterpolator: ({ current, next }) => {
    return {
      cardStyle: {
        opacity: next
          ? next.progress.interpolate({
              inputRange: [0, 0.5, 1],
              outputRange: [1, 1, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0.5, 1],
              outputRange: [0, 0, 1],
            }),
        transform: [
          {
            rotateY: next
              ? next.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: ["0deg", "180deg"],
                })
              : current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: ["180deg", "0deg"],
                }),
          },
        ],
      },
      overlayStyle: {
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
    };
  },
};

Now it's time to make the transition smooth using a spring IOS Transition from React Navigation instead of a simple timing config.

export const SpotifyTransition = {
  transitionSpec: {
    open: TransitionSpecs.TransitionIOSSpec,
    close: TransitionSpecs.TransitionIOSSpec,
  },
  ...
  },
};

Github repo with snack demo 👉 https://github.com/yjose/spotify-login-animation-with-react-navigation-v5

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.

If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles.

Reac More 👉 Forms in React Native, The right way

GraphQL: Front-End Superpower

Elazizi Youssouf — Mon, 13 Apr 2020 19:57:58 +0000

Back to 2013 when people start using Facebook Graph API to build their Apps. I remember reading some articles and comments on how people were surprised by the API interface and how it is easy-to-use.

Without even seeing the API documentation, you can easily find the correct data you want with the autocomplete features, you just need to find how to describe the information you want and boom 💣 , here we go, the autocomplete feature is mind-blowing.

More than that, the API can respond with a useful error message in case you are trying to request unavailable data.

After that, people started wondering how this is even possible and how they can implement such a great experience in their own future applications.

In 2015 Facebook announced a new data query language called GraphQL and guess what? This was the secret behind the great experience developers had when they started using the Facebook API 2 Years ago from this date.

This article is not a GraphQL tutorial. Instead, I want to highlight the benefits of using GraphQL and why you need to give it a try in your next project.

This article only focuses on the positive sides of using GraphQL and that's not mean GraphQL is the best choice for all use cases and doesn't have any concerns.

What is GraphQL?

As described in the official website, GraphQL is a query language for API and runtime for fulfilling those queries with your existing data. In simple words, GraphQL is a syntax or a specification that describes how to request your data. A GraphQL query is simple as a string that is sent to a server to be interpreted and fulfilled, which then returns a JSON response to the client.

In the first place, GraphQL is a Facebook solution for over/under fetching problems. As the announcement blog post describes the problem is when Facebook started building its mobile app using the same API that is already used for the Web platform, they're confused by the difference between the data they need on the mobile-side and the server API already exists. Using the same means loading more unneeded data. Also, the mobile platform has its own problems regarding the big number of API requests so the solution is theoretically very simple: instead of having multiple REST endpoints, why can't we have a simple one that can understand a query from the client (web or mobile) and return the correct data. No unneeded data, no extra API calls.

I think GraphQL is one of the earliest adopted technologies I ever saw, after only 4 years we are seeing some big companies such as Github, Shopify, Twitter started using it. And this is huge because the API is one of the hardest parts in product development and migration like the following has a big risk. But all those companies are happy about their choice and they even encourage people to use it.

Why Front-end developer like using GraphQL

Well, this is a fact, the majority of front-end developers I met recently who already use GraphQL assured me that they will use it in their next project. More than that, one of them I remember told me that he will fight for it In case the team wouldn't use it😁.

The secret behind this is Due to multiple factors :

Great Developer experience

GraphQL ecosystem offers a great user experience to front-end engineers, because no matter how large or small your application is, for sure you will have to deal with fetching data from a server and If you are using a REST API and trying to combine it with your state management library such as Redux you need some extra work as adding redux-saga to handle data fetching, maybe some transformations to normalize data if you are trying to cache it, and using an optimistic UI strategy needs a lot of work to be implemented. However, when you try Apollo-client - one of the most popular GraphQL client libraries - you have all those features for free so you can focus more on your application logic and reduce code boilerplate. Apollo-client also offers helpful tooling for TypeScript, Chrome DevTools, and VS Code.

API documentation

Did you remember the Facebook API story, well, this is what front-end developers really want from the back-end - a smart tool to debug and read the API documentation - GraphQL comes with an integrated documentation system describing the schema that can be queried, a tool is shipped for free with almost every GraphQL implementation and it's called GraphiQl.

GraphiQl is a query playground to run and debug your queries and interactively explore your schema Documentation, so you don't need to ask your back-end team about a property type, add or modify something, etc.

GraphiQl playground

Performance

As we already described, QraphQl is a Facebook solution for under/over data fetching problems. Fetching data is one of the most matrices you need to improve if you aim to build a fast website and GraphQL specification will help you retrieve only what you need and has the ability to retrieve many resources in a single request which has a huge impact on the performance.

Take as an example, we are building a posts feed page and we need to show users and comments as well. Using a REST API means that we would probably need at least three API calls: /posts, /user?postId=X to retrieve user data and /comments?postId=X for comments.

With GraphQL we can simply retrieve all the data at once using a simple query:

{
  allPosts {
    content
    user {
      id
      name
    }
    comments {
      edges {
        id
        content
      }
    }
  }
}

A front-end superpower

At this moment, we agree that's GraphQL helps improve the developer experience by the great tooling ecosystem, and also improve web and Mobile performance by solving over/under data fetching, But in this particular section I want to highlight from my perspective how can GraphQL gives front-end a superpower over the rest of the team.

The idea is that because GraphQL is very adaptable with Serverless Architecture and as I thought for a long time ago: I hardly believe that Serverless architecture came to the market to help front-end developers make their own products without depending on the backend or DevOps developers.

Dealing with data is the hard part for me as a front-end engineer trying to build my own side project using Serverless Architecture, but with GraphQL I just need to describe my models and relationship between them, using service such Prisma, Hasura or Faunadb and a simple GraphQL schema and here we go. The experience is mind-blowing.

Warp up

Finally, GraphQL is a data aggregator and abstraction layer that improves development velocity, performance and makes developers happier especially front-end ones. In this blog post, I try to open your eyes to how GraphQL can help and improve your daily work, I believe you only feel it when you try it. That’s why it's your turn to give it a try as soon as possible.

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.

If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles.

Read More Articles 👉 http://elazizi.com/

Forms in React Native, The right way 😎

Elazizi Youssouf — Fri, 27 Mar 2020 18:37:51 +0000

Handling forms in react native is a crucial task in your journey as a react native developer, you can’t think about developing a new react native app without dealing with forms, at least for login and sign up screen in case your app is retrieving data in the most of the cases. Finding a solution for such a repetitive task will help you save a lot of time for your next sprint 😉.

Through My 2 years experience As a react native developer, I used to use different approaches to handle forms without feeling confident about the best solution that deserves a new article. Today I am confident to share with you the right way to handle forms in your next react native project. I would be more than happy to hear your remarks and thoughts about this solution ( this is why i am sharing this article)

This article is a step-by-step tutorial to create a generic form component that can be used whenever you need to deal with forms.

if you are impatient and want to go straight to the code, you can play around with the solution in this Snack Editor Project. 😀

Approach

The idea is based on empowering react-hook-form with a smart form component that can compose any Input child, collect data and handle errors automatically. Also, we are going to provide an automatic way to autofocus the next input after pressing the next keyboard button and adding a keyboard aware capability for our inputs.

To make it clear we need first to create a custom Input component with error handling. then create a smart Form Component that injects all react-hook-form properties correctly for each component, and finally implement the autofocus and keyboard aware features.

This is the end result of our Work.

You can’t record keyboard for secureTextEntry={true} Input, that's why you are seeing my password 😀

Video Demo

Befor starting I think you are wondering 👇

Why React-hooks-form

Form React-hook-form official documentation, one of the primary goals of React Hook Form is to reduce the amount of code that you have to write. As you can see from our final result, React hooks form is really easy to use and it takes a small amount of code. More than that if we can compare react-hook-form to the most used solution to handle forms in React such as Formik and redux-form, it seems clear that react-hook-form will be the winner regarding bundle size and performance.

React-hook-form home page contains a complete section illustrating why you should use it over other libraries.

Let’s get started

Create a Custom Input

In the first step, we are going to create a custom text input component with error handling, As you see we try to make the component as simple as possible but you could style your component as you want or even use a TextInput from built-in UI library such us react-paper or native-base, the solution will work as expected regardless of your Input implementation as long as the custom input implements the React forward API and has a required name property.

import * as React from 'react'
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  TextInputProps,
} from 'react-native'
import { FieldError } from 'react-hook-form'
interface Props extends TextInputProps {
  name: string
  label?: string
  labelStyle?: TextStyle
  error?: FieldError | undefined
}

export default React.forwardRef<any, Props>(
  (props, ref): React.ReactElement => {
    const { label, labelStyle, error, ...inputProps } = props

    return (
      <View style={styles.container}>
        {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
        <TextInput
          autoCapitalize="none"
          ref={ref}
          style={[
            styles.inputContainer,
            { borderColor: error ? '#fc6d47' : '#c0cbd3' },
          ]}
          {...inputProps}
        />
        <Text style={styles.textError}>{error && error.message}</Text>
      </View>
    )
  }
)

You can use The InputProps type from our component to implement your custom one and to make sure your component is ready for the next step.

Create Form Component

The idea behind the form component is to iterate component children and register all input by adding the correct properties.
The form component will receive its prop from the useForm hook and these are properties that we need to be passed to Make sure our Form Component works correctly.

register: This method allows us to register the input Ref with a unique name and validation rules into React Hook Form.

  register: ({name}: {name: string}, validation: ValidationOptions) => void;

setValue: This function will help us to dynamically set input value to the correct ref using name property. We need to use setValue because we are going to use a custom register call.

  setValue: (name: string, value: string, shouldValidate?: boolean) => void;

Errors: Object containing form errors and error messages corresponding to each input.
Validation: Object containing form validation rules for each input.

If you are not familiar with react-hook-form, check the docs here

In order to inject Props to Input children, we are going to use React.createElement API to create new Element for every child with a name property.

By using the name property We can filter all Input that needs to be part of our form data or return the child without creating a new one if it's not the case.

For each Input child, we use the register function to register inputs ref manually and inject validation rules.

By using the custom register call, we will need to update the input value manually with setValue using the onChangeText Input property.

Finally, we'll add the error and error message corresponding to each input.

export default ({
  register,
  errors,
  setValue,
  validation,
  children,
}: Props) => {
  return (
    <>
      {(Array.isArray(children) ? [...children] : [children]).map(child => {
        return child.props.name
          ? React.createElement(child.type, {
              ...{
                ...child.props,
                ref: () => {
                  register(
                    { name: child.props.name },
                    validation[child.props.name]
                  )
                },
                onChangeText: (v: string) =>
                  setValue(child.props.name, v, true),
                key: child.props.name,
                error: errors[child.props.name],
              },
            })
          : child
      })}
    </>
  )
}

Now, Our Form Component is Ready, but before closing the article I want to improve The form component by providing a way to autofocus the next input automatically after pressing next keyboard button, which I think is an important feature to ensure good user experience.

The only way to focus input in react-native is to have a ref for your input instance and call the focus method whenever you want the input to be focused.

To make this work we need to have access to all Inputs refs, detect the next input and call the focus method.

We can make this possible by using an Inputs React Ref in our Form component, then we push children Input Refs one by one.

To focus the next Input, we need to implement the onSubmitEditing property which will be called after pressing the next keyboard button. we need to focus the next input by invoking focus method for the next input Ref or call blur if the next input Ref doesn't exist.

Worth mentioning, that onSubmitEditing callback is called after blur event. So the keyboard may go crazy if it focuses on the next element immediately. It might be helpful to set blurOnSubmit={false} to all elements in the form.

import * as React from 'react';
import {TextInput} from 'react-native';
import {ValidationOptions, FieldError} from 'react-hook-form';

interface ValidationMap {
  [key: string]: ValidationOptions;
}

interface ErrorMap {
  [key: string]: FieldError | undefined;
}

interface Props {
  children: JSX.Element | JSX.Element[];
  register: ({name}: {name: string}, validation: ValidationOptions) => void;
  errors: ErrorMap;
  validation: ValidationMap;
  setValue: (name: string, value: string, validate?: boolean) => void;
}

export default ({
  register,
  errors,
  setValue,
  validation,
  children,
}: Props) => {
  const Inputs = React.useRef < Array < TextInput >> []

  return (
    <>
      {(Array.isArray(children) ? [...children] : [children]).map(
        (child, i) => {
          return child.props.name
            ? React.createElement(child.type, {
                ...{
                  ...child.props,
                  ref: (e: TextInput) => {
                    register(
                      { name: child.props.name },
                      validation[child.props.name]
                    )
                    Inputs.current[i] = e
                  },
                  onChangeText: (v: string) =>
                    setValue(child.props.name, v, true),
                  onSubmitEditing: () => {
                    Inputs.current[i + 1]
                      ? Inputs.current[i + 1].focus()
                      : Inputs.current[i].blur()
                  },
                  blurOnSubmit: false,
                  key: child.props.name,
                  error: errors[child.props.name],
                },
              })
            : child
        }
      )}
    </>
  )
}

Our Last step is To Use react-native-keyboard-aware-scroll-view component that handles keyboard appearance and automatically scrolls to focused TextInput.

Yep! Our Form Component is Ready for Production 😎And you can play around with it in thisSnack Editor Project.

//App.tsx

type FormData = {
  name: string
  email: string
  password: string
}

export default () => {
  const { handleSubmit, register, setValue, errors } = useForm<FormData>()

  const onSubmit = (data: FormData) => {
    Alert.alert('data', JSON.stringify(data))
  }

  return (
    <KeyboardAwareScrollView contentContainerStyle={styles.container}>
      <Hero />
      <View style={styles.formContainer}>
        <Form {...{ register, setValue, validation, errors }}>
          <Input name="name" label="Name " />
          <Input name="email" label="Email" />
          <Input name="password" label="Password" secureTextEntry={true} />
          <Button title="Submit" onPress={handleSubmit(onSubmit)} />
        </Form>
      </View>
    </KeyboardAwareScrollView>
  )
}

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts about this solution in The comments.

If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles.

Originally published on https://obytes.com/

GatsbyJs Showcase: Contributors List For Open-source Project

Elazizi Youssouf — Tue, 17 Mar 2020 23:54:28 +0000

Originally published on https://elazizi.com/

Today I am sharing my journey developing a new Geeksblabla feature. Meanwhile, I think it would be the perfect way to share my passion using GatsbyJs and how I can always find a solution for my challenges using GatsbyJs APIs. This article is a GatsbyJs showcase on how we can add a contributors list to any community project website.

In the last couple of weeks, we started working on updating our Geeksblabla website design and adding some new features. During our design process, we came up with this idea to thank our wonderful project contributors by making a contributors section on the main website. We think this kind of credit will encourage the community members to contribute As they will see their names as part of the contributors' family.

GeeksBlabla is one of the DevC Casablanca community products. It's 3 to 5 people show talking about a specific dev topic or interviewing a successful Moroccan person in IT. Briefly, it's a Geeks blabla.

we agree that adding a new feature to the project should be easy to maintain and handle by anyone of the team without any issues.

The Approach

GeeksBlabla source code is hosted on GitHub under the DevC Casablanca organization. It's public, so everyone can contribute to the project.

To Make a list of all contributions we are going to implement the all-contributors project that comes with a great Github bot that helps to add people using a GitHub comment.

The all-contributors spec will create a .all-contributorsrc JSON format file in the project root with all contributors, the idea is to create a GatsbyJs resource from this file and use it as a graphQl query for our contributors section component. And to automate the workflow, we are going to setup all-contributors GitHub bot that we can trigger any time using GitHub comment.

Setup All-Contributors

All-Contributors is a specification for recognizing contributors to an open-source project in a way that rewards each and every contribution, the tool also provides an emoji key to determine the contribution type (code, design, content….)

With All-contributors we have two options to add contributors: CLI to init the project and a smart GitHub bot to automate the process of adding new contributors using GitHub comment.

To Get Started, we need to Install all-contributors CLI as development dependency for our project:

yarn add --dev all-contributors-cli # or npm

Then we need to init the all-contributors spec using init command:

yarn all-contributors init

This command asks a few questions and sets up the project for all-contributors. This setup includes creating a .all-contributorsrc configuration file and creating a contributor table in the files you specify, a README file in our case.

Now we can start adding contributors to our list by running the following command where username is the user's GitHub username, and contribution is a,-separated list of contributions.

#all-contributors add <username> <contribution>

all-contributors add yjose code,design

If everything goes as expected you should see a new .all-contributorsrc file in the project root with your contributor’s list :

{
  "projectName": "geeksblabla.com",
  "projectOwner": "DevC-Casa",
  "repoType": "github",
  "repoHost": "https://github.com",
  "files": ["README.md"],
  "imageSize": 180,
  "commit": false,
  "commitConvention": "none",
  "contributors": [
    {
      "login": "yjose",
      "name": "Youssouf EL AZIZI",
      "avatar_url": "https://avatars0.githubusercontent.com/u/11137944?v=4",
      "profile": "https://elazizi.com",
      "contributions": ["code", "doc", "content", "review"]
    },
    {
      "login": "Amine-H",
      "name": "Amine Hakkou",
      "avatar_url": "https://avatars1.githubusercontent.com/u/6276978?v=4",
      "profile": "https://hakkou.me",
      "contributions": ["code", "content"]
    },
    {
      "login": "souffanda",
      "name": "Soufian El ",
      "avatar_url": "https://avatars2.githubusercontent.com/u/24813026?v=4",
      "profile": "https://github.com/souffanda",
      "contributions": ["code", "doc", "content", "ideas"]
    }
    //......
  ],
  "contributorsPerLine": 5
}

Learn more about all-contributor cli 👉 link

Create allContributors source

A GatsbyJs source is the simplest version of a source plugin that is essentially out of the box integration between Gatsby and various third-party systems such as file-source-plugin to pull data into your Gatsby application from a local filesystem. In our case We are going to use Gatsby’s source to bring All-contributors file data to the Gatsby system then we can transform it to create our nodes that can be fetched as graphQl data.

To create a new source we need to export sourceNodes function from our gatsby-node.js file.

First, we load the data from .all-contributorsrc file using node filesystem API.Then, we parse the data using the JSON built-in API as we know that .all-contributorsrc is a JSON format.
Our last step is to create a new node for every contributor using GatsbyJs node API.

//gatsby-node.js
const fs = require("fs");
// ....
exports.sourceNodes = async ({
  actions,
  createNodeId,
  createContentDigest
}) => {
  let data = JSON.parse(fs.readFileSync("./.all-contributorsrc", "utf-8"));

  data.contributors.forEach(contributor => {
    const node = {
      ...contributor,
      id: createNodeId(`contributor-${contributor.login}`),
      internal: {
        type: "Contributor",
        contentDigest: createContentDigest(contributor)
      }
    };

    // Create the actual data node
    actions.createNode(node);
  });
};

Learn more on how to create a Gatsby source plugin 👉 link

Restart the server and if everything works as expected you should see the allContributor query in the graphQl playground with the correct contributor’s list.

GraphQl Playground

Create All contributors Component

The Above GraphQl playground comes up with a great utility called Code Exporter which generates a snippet for our GraphQl query with the correct imports.

We are going to create a Contributor component that can be used to display all contributors in our root component like the following.

// Contributors.js
import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Contributor from "./Contributor";

const contributorsQuery = graphql`
  {
    allContributor {
      edges {
        node {
          id
          login
          name
          profile
          avatar_url
          name
        }
      }
    }
  }
`;

export default () => {
  const data = useStaticQuery(contributorsQuery);
  const contributors = data.allContributor.edges;
  return (
    <div className="contributors">
      <div className="container list">
        {contributors.map(({ node: { id, ...node } }) => (
          <Contributor {...node} key={id} />
        ))}
      </div>
    </div>
  );
};

Setup all-contributor Github bot

First, go to this link to install All-contributors bot in your project repo,Then make sure to follow the installation steps. Once Done, You can comment on issue or pull request and ask @all-contributors to add a contributor using the following format:

# @all-contributors please add <username> for <contributions>
@all-contributors please add yjose for content

Workflow in Actions

To see the workflow in Actions, We are Going to choose a contribution from Mohamed (@bondif ) and try to make sure the Workflow works as Expected:

Step 1 : Comment to pull Request and ask @all-Contributor to add @bondif to the contributors’ list. @all-contributor bot will reply to my comment with a link to the new PR.

Comment

Step 2 : Netlify preview will deploy a preview version of our website. We just need to Make sure our new contributor has been added to the contributors’ section.

PR with Netlify preview

Step 3 : Done! PR Merged 😄.

Github Repo : https://github.com/DevC-Casa/geeksblabla.com

Thanks for reading! I hope you found it interesting, informative, and entertaining. If you think other people should read this post, Make sure to tweet, share and follow me for upcoming stories.

Originally published on https://elazizi.com/

Create React Modal with 22 lines of code

Elazizi Youssouf — Tue, 25 Jun 2019 10:34:50 +0000

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications.
In this tutorial, we will build A simple React Modal using only 22 lines of code.

The gif below will help you understand what we are trying to build

Let's started

Create React Project

First, create a simple react project using create-react-app cli

npx  Create-react-app  SimpleModal

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Create React Modal in X line of code </h1>
      <button>Click Me</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In this tutorial, we will use the react-popup package which is a simple and Powerfull react component with a lot of benefits :

Modal, Tooltip, Menu: All in one 🏋️
Full style customization 👌
Function as children pattern to take control over your popup anywhere in your code. 💪
IE Support. 🚀
TypeScript Support 👌
All these clocks in at around 3 kB zipped. ⚡️

This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers.

yarn add reactjs-popup

Create React Modal

Import Popup Component from reactjs-popup and start using it like the following.
Add trigger property as a simple React Button element and set modal property to true.

import React from "react";
import ReactDOM from "react-dom";
import Popup from "reactjs-popup";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Customizing and Styling React Modal

we need to create a Content.js file for Modal Content component and add some style

//content.js
import React from "react";

export default ({ close }) => (
  <div className="modal">
    <a className="close" onClick={close}>
      &times;
    </a>
    <div className="header"> Modal Title </div>
    <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div>
  </div>
);

/* index.css */ 
.modal {
  font-size: 12px;
}
.modal > .header {
  width: 100%;
  border-bottom: 1px solid gray;
  font-size: 18px;
  text-align: center;
  padding: 5px;
}
.modal > .content {
  width: 100%;
  padding: 10px 5px;
}
.modal > .actions {
  margin: auto;
}
.modal > .actions {
  width: 100%;
  padding: 10px 5px;
  text-align: center;
}
.modal > .close {
  cursor: pointer;
  position: absolute;
  display: block;
  padding: 2px 5px;
  line-height: 20px;
  right: -10px;
  top: -10px;
  font-size: 24px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #cfcece;
}

Now it's time for some magic

Because reactjs-popup provides a child as function pattern, you have full control on Popup state

we will update our example to use a function as a child instead of a react element to implement close button.

//index.js
import React from "react";
import ReactDOM from "react-dom";
import Popup from "reactjs-popup";

import Content from "./Content.js";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Final Result

reactjs-popup : https://react-popup.elazizi.com/
repo : https://github.com/yjose/create-react-modal-with-22-line-of-code
codesandbox :https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t

Make sure to visit react-popup home page

Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post.

Remember to follow me, so you can get notified about my future posts.

Choose the right React Native Navigation library

Elazizi Youssouf — Sat, 16 Mar 2019 21:53:59 +0000

If you ever had a chance to program a mobile app, you would have probably noticed that there are two major components that are mostly used: “Lists” and “navigation”. Therefore, mastering those two components is quite crucial in a way that they will spare you many challenging problems during your programming. Eventually, they will ensure delivering a friendly mobile app.

As a React Native developer, I used to face several challenges using “navigation” and “list” during mobile apps programming. Although, I find “list” is now quite easier to manipulate, especially after the release of FlatList with great performance improvement. But when it comes to “navigation”, we still don’t have a powerful solution that the community use as an official navigation system.

In this article, we will take a look at the possible solutions to make the best navigation experience for users and developers too. We will discuss the most popular solutions and help you make the right choice.

Before we start looking for these solutions, you must be wondering :

Why don’t we have an official navigation component for react-native?

If you have already taken a look at navigation section in the official React Native documentation, you will find that React Native team suggests some community solutions only. You will find an introduction to react-navigation. And if you want to achieve a native look-and-feel for your app, you will find a small section for react-native-navigation as a solution suggestion. And If you are only targeting IOS, a NavigatorIOS solution is suggested in the documentation as well. Therefore, I believe that the key to answering the question above is to have a look at how Facebook uses React Native internally. For all we know, Facebook uses React Native in some screens within an existing native apps (Instagram, Facebook) that already manages navigation natively. Therefore, Facebook doesn’t see the use in investing in a cross-platform solution that looks challenging.

Back to our main topic of this post.

As I already mentioned, in the official React Native documentation we have two options to consider: react-navigation from React Native community and react-native-navigation from Wix. In this deep comparison, we will discuss multiple aspects from the first impression using each one of them to performance and issues.

But first, I would like to say a few words about these two solutions along with some statistics before diving into comparison.

React Navigation (RN) 172,148 d/W, 14862 stars, 285 contributors

RN is born from the react native community, it is a full JavaScript library for routing and officially promoted by Facebook and react native documentation as the primary solution for routing.

React native navigation (RNN) 129,586 d/w, 9764 stars, 269 contributors

RNN is a native navigation implementation developed by Wix. it’s not a Javascript based implementation, The new version V2 has a lot of improvements after the whole rewrite to fix some critical issues in v1.

Let’s get started

Getting started

I think the aspect of an easy “getting started” approach is fundamental, considering the diversity of the NPM package ecosystem at this moment. Also, as a developer, you must know that it is important to program a new open source solution that another developer can easily read and eventually use.

Getting started with react-navigation is enjoyable and easy, you just need to add RN as a simple dependency like installing any js one. However, RNN needs a native link and some extra work to be done natively. So it requires diving into Xcode and Android studio to complete the setup. Which is not the best experience for new React Native developers. Linking the library on IOS is an easy task but for the Android, you need to follow the 9 steps carefully.

FYI : RNN does not work with Expo due to Native link.

Documentation and Tutorial

RN has a more stable API and has a lot of maintainers and contributors which is a result of multiple facts. A full js solution is simple to use compared to a native solution that requires at least mastering three languages to start working on it as maintainer.

RN has great documentation website that covers the basic usage to some complicated cases such as authentication flow. RNN has also good documentation, but sometimes I find myself digging into the code to find out how I should use some features.

The same thing for tutorials, you will find that the majority of react-native tutorials use RN because it’s simple to start with during programming.

Performance

We recently migrated one of our Apps from RN to RNN. And we were happy to see some improvements in the performance of the app, especially in terms of navigation transition that has become faster. This is good news for Android users, that form 80% of our app users. Whereas, we noticed just a slight improvement in IOS apps performance.

This performance improvement relies on how each solution handles stacks.

RN renders all screens on the same native container. Which is not the best way if you have a complicated stack with some heavy calculation. Whereas, RNN creates a native container for every screen you registered as a screen.

Right-to-left (RTL) layout support.

Maybe supporting RTL is not in your concern depending on your customers. But in my experience, At some moment, the client wants his app to support Arabic for example. Therefore, choosing a library that supports RTL from the beginning can be a great time-saving.

As the RN official docs mentioned, you might face some problems using RTL layouts. But nothing to worry about, there are many tricks that are used to help you avoid those problems. In fact, while I’m writing this post I just saw a new pull request just merged to support RTL in RNN as a default option.

Conclusion.

Both libraries RN and RNN are one of the best navigation solutions for React Native. They both have their cons and pros. So, I hope this post can help you make a good choice of the solution that is going to satisfy the needs of your app.

If your programming an app that has some complicated stacks and some heavy calculation even with some complexity setup, RNN is a go-to. It will provide your app with the best performance.
Use RN for less complicated apps.

I personally decided to go for React Native Navigation in my projects.

Bonus:

We are currently using React Navigation, Do you encourage us to migrate to React Native Navigation?

That’s a question usually react navigation users ask!

I used both of them and as I already mentioned we recently migrated an app from RN to RNN.

so I recommend doing the following.

Test your app with a real old android phone. If you are seeing some issue go to the next step, All is well congrats
Add react-native-screens to your app, a simple solution that aims to expose native navigation container for your stacks screen. Of course, you will see some improvements. Not enough go to step 3.
Try to use the Interaction Manager on the place when you have a heavy calculation.
Try to update android JSC
Migrate to RNN: This migrate will take from 3 weeks to 5 weeks depending on your project.

Thanks for reading! If you think other people should read this post and use this project, like , tweet, and share the post.

Remember to follow me on dev.to so you can get notified about my future posts.

Read more stories https://elazizi.com/

React Native: The missing piece in the beginner’s guides.

Elazizi Youssouf — Mon, 17 Sep 2018 00:33:44 +0000

This article was originally published on the Obytes blog.

For the past few months, I have been working with Barmej’s team to build a mobile app using React native. It occurred to me to write this helpful article about this project and share my perspective, ideas and some answers to the questions that beginners usually ask. This article is for every developer with React web background. It is basically about how to start building apps with React Native.

In this paper, I will not talk about setup and basic stuff. Instead, I will respond to some critical questions that you would certainly ask during your React Native app building.

This article is sorted in parts. In each part, you will have the answer to questions related to React Native development.

Let’s get started!!

Be ready

If you are here reading this article, you’re already ready! But first, let me explain what I mean by ‘Be ready’. It is commonly known that most of React Native developers are also web developers. More than 70% of react-native developers have been working on web development and Reactjs stuff. If it’s your case — probably it is — then I am sorry to tell you that you are going to miss your amazing Web development experience. Because the experience on mobile will not be the same.

That doesn’t mean that Reactjs mobile part is not ready yet, but I think this because of the amazing stuff that happened on the web platform every Day. However, I guarantee you that this experience will be much fun than developing on Native languages ( Android and swift ).

As mentioned in React Native official documentation, React Native uses Hot Reloading to build apps faster. Instead of recompiling, you can reload your app instantly. I am sure you’re already familiar with it if you come from the React web development world and it worked well with you. However, in the mobile app building, you are likely to lose the Hot Reloading functionality if you are not careful enough! Especially when your mobile app is growing a little bit because the HMR does not support functional components on React Native.

That’s why you need to be ready!

React Native Difficulty Curve ( Is React native difficult ?)

If you are familiar with Reactjs in the web, well you are exactly where you are supposed to be! If not, I think the best way to start with react-native is to build a simple React web project so you can learn some fundamental Reactjs and Reactjs ecosystem stuff without suffering from platform issues that can block your React Native fresh learning path.

The next important idea that I want to highlight in this section is the Difficulty Curve, and when you will find the difficulty during your React Native project.

As a developer with Reactjs background, I believe that we start with few struggles with React Native. Getting something to just appear on the screen is straightforward, it’s not challenging but anything more complicated like start a navigation or some native challenging stuff, You are going to start using some third-party libraries. And using some of them will not be the best experience you’d like.

The graph below explains exactly my React Native experience. When I start a new project with some basic stuff it looks like ‘’wait what is simple like that ‘’. Then, after using some third party libs, the project’s progress goes slowly and I face many problems related to those libs upgrade. It’s a normal thing because maintaining a React Native open source project is not a simple task. You need to have a strong background in JS, Java, and Swift. Those third-party libs are developed by great people who might be doing this as a hobby. They have not been paid for them so the quality is not always at its peak. (Speaking of it, I want to give credits to the React Native community for their great work!)

React Native init vs expo

To start a new project with React Native you need Android Studio and XCode. Android Studio means a java environment setup. XCode means you simply need to have a MAC Laptop, yea !! when the expo comes to the React Native ecosystem, they introduce a new way to build a whole mobile app without even using Android Studio or Xcode. I believe they do a great work to allow non-MAC-OS users start building iOS app as well. Not only that expo comes with some great features such as Push Notifications, Asset Manager and sharing the app with your testers without any difficulty. expo comes with a major issue that it does not support native module. This issue is one of the reasons why I choose react-native init over Expo. And to be honest, I don’t want to add an extra layer to my app.

That doesn’t mean ”don’t use expo!”, Expo is super useful for a lot of people and the React Native team implements react-native-create-app with the expo SDK. I think it is the best choice to create your first app and then migrate to the ‘react-native init’ way. You can read more about this topic in this open discussion issue on the Reactjs community GitHub repo.

iOS or Android ( Do I need to learn java/swift stuff)

I highly recommend having some experience with java and swift. It would be very helpful and it will give you more control over your work. If you have some time I suggest to watch some tutorials that introduce the basics of app architecture and configuration with Java and swift. This experience can be a gamechanger for some critique situations in your app building. For example, upgrading some third-party libs for your projects or adding some features to a native module need some experience with Gradle configuration at least.

one last advice related to this section is that I highly recommend starting development for iOS first. It’s related to iOS stability over the Android platform. Developing on iOS platform is much easier than Android.

State Management and API

This is the part which needs your Reactjs experience, perhaps you are using Redux or Mobx to manage your app state, you can use them too. But the mobile platform has some specific requirements over the web platform. That means extra features that must be implemented such as the offline ability, caching strategies and some optimistic update.

During the Barmej development, we opted for a redux & redux-observable & redux-persist stack, and using the same rest API as the web app and also we tried to use some web app code as much as possible. Then, after a while, we’ve found out that the app is not on the best performance we want it to be. Because of the huge number of API's call that we needed to make, the normalization process for caching and the offline support.

To be a part of such a great team that takes the risk to migrate the REST API to a GraphQl API make my job more simple. Using a GraphQl client such as apollo-client that comes with almost every feature we need out of the box helps to make the app building smoother and feels more native.

At this point, we are convinced by the GraphQl stack over the redux one. And we are on our way to remove the redux stack dependencies and use the context API for local state management and the apollo-client for the APIs.

Conclusion

This article has come to an end for now. It is normal to have challenging situations during your app development. We are using React Native for a while now and we are convinced by our choice.

I will post another article soon about React Native development, so stay tuned and don’t forget to follow me.

Thanks for reading! If you think this article was helpful to you then it will definitely be helpful to many others, then go ahead and share it because “ sharing is caring”!

This article was originally published on the Obytes blog.

The best way to structure React Native git project?

Elazizi Youssouf — Thu, 23 Aug 2018 22:39:24 +0000

Hi devs, for the last couple weeks, I was working on a react native project and at this point, I think I need to think seriously about the best ways to structure my git repo especially after implementing a circleCi for releasing App.

As you know we choose the react native to build a cross-platform app ( android and ios ) so we have multiple build types

Beta version for android ( deployed on fabric.io)
Beta and Prod version for IOS ( using testflight)
Prod version for android ( google play)

CircleCI can run builds only based on the branch.

I am searching for the best ways to structure my git repo ( branches ) and git workflows.