DEV Community: Mouhamed aly Sidibe

Add dark mode to your react native app

Mouhamed aly Sidibe — Sat, 15 Aug 2020 19:31:01 +0000

Dark Mode was introduced in iOS 13. It adds a darker theme to iOS and allows you to do the same for your app. It’s a great addition to give to your users so they can use your app in a darker design.

In this blog post, we are going to see how to add it in your react native app very quickly with React navigation v5 and Expo.

Create the expo app

if you dont have the expo-cli installed run this before:

npm install -g expo-cli

and then :

expo init

Adding navigation

Let’s install React navigation(latest version v5)

yarn add @react-navigation/native

We need to install a few more libraries for this to work.

In the project directory, run

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

This will install versions of these libraries that are compatible.

We have React navigation installed in our project we can start using it by creating a simple stack navigator with 2 screens.

Install the stack navigator

 yarn add @react-navigation/stack

Imports

_import_ { createStackNavigator } _from_ “@react-navigation/stack”;
_import_ { NavigationContainer } _from_ “@react-navigation/native”;

Create the stack

const _Stack_ = _createStackNavigator_();

Adding dark mode support

Now we want to provide light and dark themes based on the user preference.

Let’s install react-native-appearance to detect the operating system color scheme preferences.

expo install react-native-appearance

Then, in app.json, under the ios key we need to add "userInterfaceStyle": "automatic"

"ios": {"userInterfaceStyle": "automatic"}

Now we can import AppearanceProvider and useColorScheme(return the operating system color scheme)

_import_ { AppearanceProvider, useColorScheme } _from_ “react-native-appearance”;

React navigation provide by default a Dark theme and a defaultTheme we can import it and use it

_import_ { DefaultTheme, DarkTheme } _from_ “@react-navigation/native”;

IphoneXr

When I change the color scheme of my operating system, the theme of my app changes automatically. Cool 😍

But we can notice that the text is not displayed when the theme is dark because this is a black text in a black background. We can adjust the text color by using the current theme color text.

To gain access to the theme in any component that is rendered inside the navigation container: we can use the useTheme hook. It returns the theme object.

The colored text automatically adapts to the current schema.

Custom themes

Instead of using themes provided by React navigation we can create our own themes.

A theme is a JS object containing a list of colors to use. It contains the following properties:

dark (boolean): Whether this is a dark theme or a light theme
colors (object): Various colors used by react navigation components:
primary (string): The primary color of the app used to tint various elements. Usually you'll want to use your brand color for this.
background (string): The color of various backgrounds, such as background color for the screens.
card (string): The background color of card-like elements, such as headers, tab bars etc.
text (string): The text color of various elements.
border (string): The color of borders, e.g. header border, tab bar border etc.
notification (string): The color of Tab Navigator badge.

When creating a custom theme, you will need to provide all of these properties.

Done ✅

This is what i wanted to share with you today, thanks for reading.

Visit my blog or my youtube channelfor more content.

How I Created My Blog With Gatsby

Mouhamed aly Sidibe — Fri, 26 Jun 2020 19:31:00 +0000

This post was originally published in my blog

As a software developer, one of the best mediums you can use to market yourself is a blog. It’s my firm belief that every software developer who cares about their career should invest in creating a blog.

These words come from a book i am reading : Soft skills , the software developer’s life manual. I definitely recommend you this book if you want to know how to succeed in your career as a developer.

Soft Skills

This book talk a lot about blogging and how it is important. Specially when you are a freelancer or consultant like me, you‘ll find that a successful blog can bring many clients your way instead of having to go find them by yourself.

Writing articles can also help you become a better developer and communicator because there is a huge work of researching, coding, learning, behind a blog post.

There’s another good job that’s inspired me a lot: The Prosperous software consultant by Nader Dabit, he talk about how you can “build bridges” by making content on your blog:

This also goes back to “Building Bridges”, when you learn something new, give that knowledge away, it helps the community and it helps you!

You should definitely read this one too.

In just 3 or 4 months of consistent writing, I’ve seen a lot of good results. Recently, my article on the Expo for the web was published on the official Expo blog and I was very happy about it.

I started writing on medium, which is really great and easy to write on. You can do a lot of cool things like importing articles, statistics, etc. But it seems that it’s not really a platform for developers.

I also tried dev.to which is a very good platform for developers because 99% are programmers or people learning to code. You can follow me there by the way : https://dev.to/mouhamedaly

Finally I decided to create my own personal blog. Having my own platform will bring me a lot of benefices:

I am not dependent on any other platform
I can monetize my blog: maybe displaying ads
I can customize it as i want.
I can still publish on medium or dev.to and redirect readers to my personal blog.
Etc

I procrastinated for quite a while before starting the development of my blog.

I wasn’t motivated to make my website with classic html css or CMS like wordpress(Im not really fan).

But one day while doing research I discovered Gatsby and I fell in love.I realized that Gatsby was the perfect tool to create a personal or business website. So i decided to learn it. And for me, the best way to learn is by practicing.

GATSBY

What is Gatsby ?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Gatsby is generally defined as a powerful static site generator, but very different from other SSGs like jeykill, hugo etc. The particularity of Gatsby is that it allows you to create extremely fast static, progressive and high performance web applications.

How it works ?

Gatsby does all the data fetching during build time. No matter where your data come from you can access it in the same way. Gatsby normalize your data into a graphql api so you can read and display them easily.

At the end gatsby will compile all of this into static assets and then allow you to deploy very quickly your app to a CDN of your choice rather than a traditional server.

Here is a graphic that summarize it:

Getting started

Gatsby CLI

npm install -g gatsby-cli

The above command installs Gatsby CLI globally on your machine so you can use all these commands.

Create new project

gatsby new gatsby-site

Start project

gatsby develop

Build project

gatsby build

Gatsby Starter

The Gatsby CLI tool lets you install starters , which are boilerplate Gatsby sites maintained by the community and intended for jump-starting development quickly.

For example if you want to create a blog, you can use the blog starter instead of starting coding from scratch. All the gatsby starters can be found here.

I found a very nice starter blog which I used to quickly get up-and-running.

With this starter I have access to a lot of features like netlify CMS that we will see in the next section, that’s what’s cool about gatsby starters.

I initialized a new project with this starter by running:

gatsby new blog [https://github.com/W3Layouts/gatsby-starter-delog](https://github.com/W3Layouts/gatsby-starter-delog)

This command downloads the files and initializes the site by running npm install.

After that i can run my app :

cd blog 

gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000.

Customizing:

By default the starter looks like this:

After some customization it’s now look like this. I changed colors , added a avatar, changed the fonts etc :

You can customize your app as you want , it’s just html, css and react.

By the way I created my own starter if you want to start a Expo/Gatsby project.

Gatsby Plugins

Basically Gatsby plugins are just Node packages, so you can install them like other packages in node using NPM.

You need Google analytics? There’s a plugin for that.

npm install — save gatsby-plugin-google-analytics

You need offline support? There’s a plugin for that.

npm install — save gatsby-plugin-offline

In short there is a plugin for everything you want to do.

Netlify and Netlify CMS

Netlify

Definition : Netlify is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps.

There are really a lot of advantages to using netlify in a gatsby site.

Continuous integration : Every time i push my code to github, netlify build a new version of my app and deploy it. I have nothing to do, that’s super cool.
Forms : I have a contact form in my website, so that users can write me. Netlify comes with built-in form handling. I just have to add thenetlify attribute or data-netlify="true" to the tag, and i can start receiving messages in my Netlify site admin panel.
Domain Settings : I added my custom domain mouhamedaly.dev directly from the netlify admin panel. In just a few minutes my domain was available

Netlify CMS

Definition : Netlify CMS is an open source headless content management system which can be used with any static site generator to construct a faster and flexible web app. Netlify CMS is fully extensible, platform agnostic, easy to install and provides a friendly UI to the users.

A CMS is useful because you can add content like blog posts from a dashboard on your website, instead of having to add posts manually with Markdown.

Netlify CMS is preinstalled in this starter, no configuration needed. After starting the app i can access to my netlify cms dashboard at http://localhost:8000/admin and add new post.

Every time I add a new post, the content will be stored in my repository and versioned on GitHub because Netlify CMS is Git-based. Also, thanks to Netlify’s Continuous Deployment, a new version will be deployed every time i add or edit a post. This is awesome.

SEO

The better you optimize your blog for SEO , the higher your website will be listed on search engine result pages, so more people can find your website.

Using Gatsby makes your site fast and efficient for search engine crawlers to index your pages.

Gatsby is Good at SEO because gatsby pages are server side rendered and all the page content is available to search engine crawlers

Right click -> View page source

Some tricks i used to improve my SEO

React Helmet

Meta tags are very important for SEO. They tell search engines important information about your web page, such as how they should display it in search results.

React helmet is the plugin i used to add meta data into my web pages.

React helmet

With this plugin, attributes you add to your components, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.

Sitemap

An sitemap is a XML file that lists all your website pages, making sure Google can find and crawl them all, also helping it understand your website structure.

The gatsby-plugin-sitemap plugin allows you to automatically generate a sitemap with Gatsby and then bots can discover all your pages.

Eh voila :

LightHouse SEO Test

PWA

I really like progressive web apps. It was very important for me to have a pwa for my personal blog so users can download it like a native app.

The starter I used already had offline support, so I didn’t have to configure anything.Gatsby is usually is best defined as a pwa generator instead of a static site generator.

They give you all your need to build a true PWA :

gatsby-plugin-manifes t : This makes it possible for users to add your app to their home screen.

gatsby-plugin-offline ** :** Even in offline mode , the user can still navigate into my app and read my blog posts.

PWA TEST

Adaptive loading

Adaptive Loading is a web performance pattern where sites not just respond based on screen size — they adapt based on actual device hardware.

To be a good developer you should also be mindful on all aspects, not only those that the end user see. You must care about performance independently of who is using the app, which device loads it or the time you have to wait for it to be ready.

After reading many articles about Adaptive loading i decided to include it in my website but this pattern has nothing to do with gatsby. You can add in any react app.

There is a library called react-adaptive-hooks that provided a suite of React Hooks for adaptive loading based on a user’s network, data saving preferences, device memory and logical CPU cores.

I can use this React library inside my gatsby project because gatsby is a React framework.

So I can check the type of internet connection of the users and according to that decide what to display to them.

Installation:

yarn add react-adaptive-hooks

Import :

import { useNetworkStatus } _from_ “react-adaptive-hooks/network”;

Hook :

const { effectiveConnectionType } = useNetworkStatus();

Usage : If the user has a slow connection i show a SVG avatar image instead of showing my PNG avatar.

Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.

Image optimization

Large, unoptimized images dramatically slow down your site.

If you want to optimize your images, there is gatsby-image for you.

Gatsby image solve this problem by bringing this solution.

I can lazy load my images and have a nice blur up effect:

For more info on how to install and use the gatsby-image plugin : visit this page.

There are so many cool things I haven’t mentioned in this article but you can go further and discover gatsby. Their documentation is very well done and the community is very nice.

Why you should use gatsby ?

Gatsby is a very good framework if you want to build blazing fast websites and apps very quickly.

Gatsby make it Simple

Getting started with modern web development is complicated, you have to care about a lot of thing like webpack, postcss, app performance, deployment etc.

Things are easy with gatsby, you don’t need to worry about all that boilerplate.
There a plenty of free starters available you can use to quickly get started.
There is a plugin for everything you want to do.
SEO friendly
Progressive web apps generator

Gatsby is fun

Gatsby is built on popular technologies like React and Graphql, so you won’t need to learn a new stack from scratch. If you like creating websites with React and Graphql, you’ll love Gatsby.

Gatsby lets you pull your data from wherever you want: API , markdown files, databases, CMSs like Wordpress and make it available through a graphql API, that’s pretty cool.

Gatsby is performant

Stop worrying about performance in your web app, Gatsby take care of it for you. Gatsby sites are very very fast.

Here’s what makes gatsby sites very performant:

Gatsby follows Google’s PRPL architectural pattern: Push , Precash , Prerender , Lazyload. and other performance best practices
Generates only static assets : no server needed
Normalizes third party data
It supports code splitting, enabling progressive rendering for your content.

Gatsby does a lot of optimization for us out of the box.

As a developer, my experience with Gatsby has been wonderful. I really enjoyed building my website with Gatsby ❤️. You should try it, you won’t be disappointed.

You also might like to take a look at my other articles: https://mouhamedaly.dev

Thanks for reading.

References:

Create and Deploy Web Apps and PWAs with Expo

Mouhamed aly Sidibe — Fri, 15 May 2020 17:11:01 +0000

Note: This article was originally written in French by our guest blogger, Mohamed aly sidibe, who translated it to cross-post here. Thanks, Mohamed!

Expo is an amazing tool which lets you create not only Android and iOS mobile applications but also web apps and progressive web applications (PWA) very easily from one single Javascript and React codebase 😍.

In this article, we will explore all the steps from the creation of an Expo web project to its deployment on Netlify.

If you’re new to Expo, I’ve made a series of videos about Expo available on Youtube.

How it works 🛠

Developing for the web is just like you‘re developing your Expo mobile app. You’ll use the same components (View, Text, etc.) that will be executed on the web. In addition, you have access to almost all the Expo SDK Features.

Our web app

In this guide, we’ll create a simple web app that lets users to upload a picture from their computer, and (if they choose) rotate the image.

Creating the project 💡

We need to install expo-cli to create a Expo project:

npm install -g expo-cli

This lets us use expo-cli to create a fresh Expo project by running:

expo init

Done ✅

If you look in the app.json file under platforms, you can see that our app is executable on the web. That’s pretty cool.

Run the project 🚗

Now let’s run our Expo project on the web:

expo start -w

When you run this command, your app will automatically launch in your browser:

That’s cool: we just created our first web app with Expo! 🎉🎉🎉🎊

Develop the app 💻

We’ll need to install two of the Expo SDK modules for the app we have mind:

expo-image-picker, to pick an image from the user’s gallery or camera

expo install **expo-image-picker**

expo-image-manipulator, to manipulate images (flipping, rotating, etc.)

expo install **expo-image-manipulator**

After that, we can import them into our app.js file:

import \* as ImagePicker _from_ 'expo-image-picker';

import \* as ImageManipulator _from_ 'expo-image-manipulator';

Let’s declare our state, which will contain the uri of the selected image.

const [selectedImage, setSelectedImage] = React.useState(“”);

Our upload function will look like this:

Upload function

And our rotate function:

Rotate function

A simple view containing our upload button, our rotate button and the selected image:

Render

DEMO: write once, run everywhere!

The same code is runs here on the web and also on an iOS phone — Expo is multi-platform!

Web app

Native Mobile app

Deploying the app 🚀

Now, we’re going to deploy our app so others can use it.

BUILD

Building with Expo is so easy: you can build your app in just one command:

expo build:web

This command builds our app and savse the final product inside the build folder: web-build

Build

If you want to test your app locally, just run

npx serve web-build

and open : http://localhost:5000

DEPLOYMENT

We can easily deploy our app with Netlify.

Install the netlify-cli globally:

npm install netlify-cli -g

Deploy:

netlify deploy

Déploiement netlify

Our app is now live 🎉🎉🎉🎉

App live

Continuous delivery

Netlify enables continuous delivery: with this setup, every time you push your code to git, Netlify will automatically deploy your site with the newest code. Here’s how it works:

Start a new Netlify project
Pick your Git hosting service and select your repository
Click Build your site

You can test our final app here.

Progressive Web Apps (PWA) 🎁

Something really cool with building web apps with Expo is that by default your web app is a progressive web app — you don’t need to do anything special to enable PWAs. That’s awesome 🎊

PWAs are installable:

It’s now essentially a desktop app:

PWA

When you access the site via a smartphone, you can also install it so that the app is accessible from the home screen of your phone like a Native app.

This is just a default PWA with basics configurations; there’s a guide if you want to customize your PWA.

And that’s all you need to do to create and deploy a mobile app, web app and a PWA with Expo.

The code is available on GitHub. Thanks Evan Bacon for this amazing work. Thanks for reading and share if you found this article helpful. 😀🚀

This article was written by our awesome guest-blogger, Mohamed aly sidibe. You can follow him here on Medium or on Twitter to keep in touch.

Automatisez vos déploiements Expo avec Bitbucket Pipelines

Mouhamed aly Sidibe — Sun, 26 Apr 2020 20:01:42 +0000

L’un des avantages d’utiliser Expo c’est de pouvoir tester votre application sur Android ou IOS très facilement sans avoir à acheter un apple developer account à 99$/an 😞, ou à générer un APK qu’il va falloir transférer par Dropbox ou Drive 😩.

Grace au Expo client ❤️ vous pouvez rendre disponible votre application à travers un lien. Vous avez juste à partager ce lien avec vos Beta-testeurs pour les permettre de tester rapidement votre application. 📱

Quand vous modifiez votre code et vous publiez à nouveau tous vos utilisateurs vont recevoir la nouvelle version de votre app sans pour autant réinstaller l’app ou installer la MAJ depuis les stores, C’est le Over the air 💨

Vous voulez connaitre la magie derrière ? Je l’explique ici 🧐

Dans cet article nous allons voir comment automatiser le processus de publication d’une nouvelle release afin qu’elle soit directement disponible dans le Expo client à chaque nouveau push. ☁️

Comment publier ? 💻

Pour publier une application dans le Expo client et ainsi la rendre disponible à travers un lien on exécute qu’une seule commande:

$ expo publish

Ici nous ne spécifions pas de release channel. donc notre app sera déployée dans la _release channel _default.

 expo publish équivaut à expo publish --release-channel default

Les releases channel sont la pour créer différents environnements de travail pour vous. Vous pouvez avoir autant de release channel que vous voulez.

Dans cet article nous allons utilisé 2 releases channel, une pour un environnement de test : staging , et l’autre pour notre environnement de production : production.

En général les releases channel sont liés à nos branches. On va naturellement donc avoir notre branche master(production) et une branche develop(staging).

Du coup si on veut déployer en staging on fait :

expo publish --release-channel staging

Et si on veut déployer en production on fait :

expo publish --release-channel production

Ici le problème c’est que ce n’est pas automatisé. Nous développeurs nous aimons automatiser les choses parce qu’on est paresseux 😂.

L’idée c’est d’automatiser le processus de telle sorte que quand on push sur develop notre app est directement déployée sur Staging , quand on push sur master notre app est déployée en production.

Comment Automatiser ? ⏱

Les pipelines Bitbucket nous permettent d’automatiser notre process de déploiement très facilement. Il existe d’autre providers comme Github actions , gitlab , Circle CI etc. Dans cet article nous allons utiliser Bitbucket 🤪.

Etape 1 : Configuration de Expo 🔧🔨

Créer un compte Expo: Il nous faut un compte expo pour pouvoir publier nos apps. Pour créer un nouveau compte on se rend sur expo.io
Créer un projet expo avec la commande expo init ou utilisez un projet existant.

Etape 2 : Configuration de Bitbucket 🔧🔨

Créer un repo bitbucket.
S’assurer de faire un npm i qui va générer un fichier package.lock.json avant le push.
Faire un push du code source sur le repo distant.
Activer les pipelines dans l’onglet pipelines de votre projet et choisissez le JS comme langage de programmation

Après avoir choisi le JS comme langage, un fichier bitbucket-pipelines.yml sera généré , c’est le fichier de configuration et c’est la que tout va se passer. Ne modifiez rien pour le moment et faites juste le commit.

Sauvegardez vos identifiants expo dans vos variables d’environnement. On en aura besoin dans le bitbucket-pipelines.yml pour nous connecter à expo. Allez dans > Repository settings > Repository variables puis ajoutez votre username et votre mot de passe 🔑.

Variables d’env

Etape 3 : Déploiement 🚀

Pour automatiser notre déploiement nous allons principalement nous baser sur le fichier de configuration bitbucket-pipelines.yml. Dans ce fichier nous allons décrire étape par étape ce qu’il faut faire quand il ya un nouveau push en fonction des branches.

Le fichier est déjà dans votre projet vous pouvez l’ouvrir et y coller ceci : cliquez ici pour copier.

Dans cette configuration nous spécifions deux branches master pour déployer en production et develop pour déployer en staging.

Vous pouvez créer une branche develop à partir de master et faire un commit pour tester , vous verrez que votre app sera déployée sur expo avec le lien :

https://exp.host/@USERNAME/PROJECT?release-channel=staging 🌏

de même que la branche master

https://exp.host/@USERNAME/PROJECT?release-channel=production 🌏

Déploiement en Staging

Déploiement en production

Et dans l’onglet déploiements vous pouvez voir vos déploiements

Déploiements

✅

Cette configuration est assez basique mais vous pouvez bien l’adapter vous à votre workflow.

Abonnez vous sur ma chaine youtube ️🔔 je prépare une série de videos sur Expo.

Merci ✌️

Authentification par numéro de téléphone avec Expo(SDK37) et Firebase.

Mouhamed aly Sidibe — Mon, 13 Apr 2020 18:01:23 +0000

Le 31 mars 2020 Expo a annoncé leur première release de l’année : LE SDK 37. Dans cette nouvelle version, Expo propose beaucoup de nouvelles fonctionnalités. Vous pouvez aller jeter un coup d’oeil ici pour tout savoir sur le SDK 37.

Parmi les nouveautés nous avons l’authentification par numéro de téléphone avec Firebase. Désormais Expo nous permet d’intégrer très rapidement ce module dans notre application mobile.

De nos jours cette forme d’authentification est beaucoup utilisée pour vérifier les utilisateurs rapidement et de manière sûre.

Dans cet article nous allons voir étape par étape comment mettre en place ce système dans notre application expo.

Prérequis

Pour suivre ce tutoriel vous aurez besoin de:

Créer un projet expo avec le “managed workflow”. Si vous ne savez pas comment créer un projet expo vous pouvez lire mon dernier article.
Créer un projet Firebase. Rendez vous sur https://firebase.google.com/ accédez à votre console et créez un nouveau projet. Nous verrons comment créer un nouveau projet dans la section suivante.

Configuration Firebase

Les configurations suivantes se feront dans la console Firebase.

1. Créer un projet Firebase

Rendez vous dans la console Firebase et connectez vous à votre compte google.
Cliquez sur Add Project
Donnez un nom à votre projet
Cliquez sur Create Project

2. Ajouter une app à votre projet Firebase

Au niveau de la page d’accueil, cliquez sur web,

Ou bien cliquez sur project settings et ensuite add app

Choisissez un nom

On va copier nos configurations et les garder quelque part on en aura besoin plus tard.

3. Activer l’authentification par numéro de téléphone

Cliquez sur Authentification au niveau du menu , sélectionner phone puis appuyez sur le bouton activer.

L’authentification par numéro de téléphone a été bien activée, nous pouvons donc l’utiliser dans notre application mobile.

Vous pouvez ajouter des numéros de test et des codes par défaut associés aux numéros pour ne pas utiliser votre quota.(voir le pricing firebase)

C’est tout ce qu’il y a à faire coté firebase, nous pouvons maintenant nous concentrer sur notre application expo.

Application Expo

Installations des dépendances:

Nous avons besoin d’un certain nombre de dépendances pour utiliser l’authentification par numéro de téléphone, installons les:

$ **expo** install [expo-firebase-recaptcha](https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/) [react-native-webview](https://docs.expo.io/versions/latest/sdk/webview/) [firebase](https://docs.expo.io/versions/latest/guides/using-firebase/)

En installant le expo-firebase-recaptcha nous avons le composant qui va nous permettre de créer le Recaptcha qui sert à valider si l’utilisateur est bien un humain et pas un robot.
Le expo-firebase-recaptcha s’affiche dans une webview raison pour laquelle il nous faut installer react-native-webview.
Et ensuite firebase pour pouvoir utiliser les services/fonctions d’authentification par numéro de téléphone.

Initialisation de firebase

Pour utiliser firebase il faut d’abord l’initialiser. Pour ça nous allons créer un fichier Firebase.js dans notre projet et on va y initialiser firebase avec notre configuration.

Navigation (V5)

Nous aurons donc deux écrans, un écran pour récupérer le numéro de téléphone de l’utilisateur, afficher le Recaptcha et ensuite envoyer le code , puis un autre écran pour vérifier le code.

Dans notre fichier App.js nous allons définir un simple StackNavigator qui contiendra ces deux écrans :

Nous avons créé notre navigation et nos deux composants PhoneNumberScreen et VerifyScreen.

Dans ce composant on récupère le numéro de téléphone que l’utilisateur renseigne dans le champs numéro tel et on le stocke dans le state. Nous ajoutons aussi le modal Recaptcha dans notre méthode Render.

Quand l’utilisateur clique sur Envoyer la fonction sendCode() s’exécute. Elle permet d’afficher le Recaptcha et d’envoyer le code par sms si tout se passe bien.

Voici le code final du composant:

VerifyScreen .js

Dans cet écran on doit vérifier que le code que l’utilisateur a renseigné est bien le code envoyé.

Voici la fonction qui permet de faire cette vérification:

Voici le code final du composant:

C’est tout, nous pouvons maintenant tester notre application dans le Expo client.

Voici une démo de notre application:

https://medium.com/media/dbbda8259f33a26390312f6d2200cf38/href

Quand on vérifie sur Firebase on voit bien notre utilisateur.

Felicitations !

Vous pouvez retrouver les sources du projet ici

J’ai découvert un outil très cool qui s’appelle doorman et permet d’intégrer l’authentification par numéro de téléphone très facilement sans avoir à beaucoup coder. Ils fournissent un backend et un UI complet. J’écrirais un article sur cet outil bientôt.

N’hésitez pas à utiliser l’authentification par numéro dans vos applications.C’est l’un des meilleurs moyens de vérifier vos utilisateurs et d’être sûr que c’est pas des robots grâce au Recaptcha. En termes de UX c’est généralement mieux qu’un système de email/mot de passe.

Merci et à bientôt.

Les notifications push avec Expo.

Mouhamed aly Sidibe — Mon, 06 Apr 2020 19:48:04 +0000

Les Notifications Push sont les messages qui apparaissent sur l’écran de votre smartphone lorsque vous n’utilisez pas l’application.C’un bon moyen de rappeler l’existence de votre application à vos utilisateurs. Lorsqu’elles ne sont pas trop intrusives et restent utiles pour l’utilisateur, elles permettent d’augmenter très rapidement le taux de rétention.

Expo nous permet d’intégrer très facilement les notifications push dans notre application react native. Nous allons voir pas à pas comment envoyer des notifications à nos utilisateurs depuis notre application expo.

1. Installer le expo-cli

Expo vous procure un outil en ligne de commande qui vous permet de gagner en productivité. Vous devez l’installer globalement sur votre machine comme suit:

$ npm install -g expo-cli

2. Créer le projet

Une fois le expo-cli installé, vous pouvez maintenant l’utiliser pour créer votre projet. Vous pouvez choisir un template pour aller plus vite mais dans notre cas on va juste choisir le blank template.

$ expo init ExpoPushNotifications

Expo va installer toutes les dépendances nécessaires pour votre app.

3. Exécuter le projet

Vous pouvez vous déplacer vers le dossier de votre projet et exécuter votre projet.

$ cd ExpoPushNotifications && expo start

Ou bien

$ cd ExpoPushNotifications && yarn start

Si tout se passe bien vous aurez quelque chose qui ressemble à ça:

3. Tester l’application

Maintenant que vous avez exécuté votre projet, vous avez besoin d’avoir un rendu de votre application. Pour ça il faut télécharger le Expo client sur Play store ou App Store.

Une fois l’application téléchargée, connectez vous sur le même réseau que votre ordinateur et vous verrez votre projet ExpoPushNotifications dans l’application expo client.

Vous pouvez cliquer sur le projet pour l’ouvrir, normalement vous aurez un écran qui ressemble à ça:

Votre application est prête. Vous pouvez effectuer des changements au niveau du App.js et voir directement le résultat dans l’application.

4. Obtention du Expo Push Token

Expo a besoin de savoir à quel appareil il doit envoyer la notification. Le Expo Push token sert à identifier chaque appareil. Ce token est unique et généré à chaque fois que votre application est installé sur un smartphone.

Vous pouvez donc récupérer ce token, le lié à un utilisateur et le stocker sur votre serveur.

En pratique

La première chose à faire c’est d’importer Notification et expo-permissions pour pouvoir utiliser les services de notifications.

import { Notifications } from ‘expo’;

import \* as Permissions from ‘expo-permissions’;

Nous allons maintenant écrire une fonction qui va nous permettre de demander la permission d’envoyer des notifications, si on nous l’accorde on peut récupérer le Expo push token.

Voici notre classe:

Nous avons notre Expo push token:

**ExponentPushToken[UwO2W\_L5ryJt1Cji5Ta8Qy]**

4. Envoi de la notification

Nous avons récupérer le Expo push token, il nous reste qu’à envoyer la notification à cet appareil en question. Normalement une notification vient d’un serveur. Expo fournit une API RES T que vous vous pouvez appeler depuis votre backend en lui passant juste le Expo push token.

Ce qui est cool encore c’est qu’il y a des packages déjà codés que vous pouvez utiliser coté backend en fonction du langage que vous utilisez: PHP , JAVA, PYTHON etc, vous pouvez trouver la liste complète ici.

Mais dans cet article nous allons utiliser le Expo push notification Tool pour envoyer nos notifications facilement sans coder.

C’est une app développée par expo qui permet d’envoyer des notifications push en renseignant le Expo push token , les données que vous voulez envoyer et d’autres paramètres facultatifs:

L’appareil qui possède le expo push token qu’on a renseigné va recevoir la notification:

4. Affichage des données de la notification dans notre app

Nous arrivons à envoyer la notification, ce qu’on veut maintenant c’est afficher les données qu’on envoie dans notre application.

Nous allons envoyer une nouvelle notification, mais cette fois ci avec des données: {“name”: “mas”}.

Pour afficher les données dans notre app il nous faut faire une souscription qui permet à chaque fois qu’on recevra une notification de faire un traitement spécifique:

Voici notre fonction _HandleNotification() qui s’exécute chaque fois qu’on recevra une notification:

Cette fonction reçoit l’objet notification qui contient nos données et le stocke dans le state.

Ainsi nous pouvons afficher les données reçu dans le render:

Et Dans l’application on voit bien les données envoyées:

On peut après utiliser ces données pour en faire ce qu’on veut. COOL !!

J’espère que cet article vous a aider à comprendre comment fonctionnent les notifications push avec Expo et vous encourage à utiliser Expo pour vos applications React native.

Merci.