DEV Community: Expo Lovers ♥️

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.

How to insert an Expo project in a Monorepo

Mauricio Reatto Duarte — Thu, 09 Apr 2020 01:10:29 +0000

Introduction

In this post, I'll cover about adding an Expo project inside a Monorepo project. I found on the internet so many people trying to do this, asking in some forums, or commenting something like "+1" at the Github issues. So, the purpose of this post is not to teach how to create a monorepo, is how to insert your Expo application inside a Monorepo.

Of course, you could help me by liking "+1" in this post.

Monorepo

I won't go deep in Monorepo's explanation, but basically, is an architectural concept. Instead of a lot of individual repositories, you keep all your isolated code parts inside one repository. It's very different from the monolithic repo.

Good examples and inspirations with Monorepo are:

After you understand the main monorepo structure, you start to see a lot of famous libraries that you or your team use that is Monorepo.

Let's get to work

First of all, you must create an Expo project (of course, if you haven't already created one) in some folder. To do this is simple like:

    # Install the command line tools
    # npm install --global expo-cli or
    # yarn global add expo-cli

    # ~/workspace

    # Create a new project
    expo init my-project

More info: https://docs.expo.io/versions/v37.0.0/

You can overwrite my-project with your the name of your choice (mine is expo-app), then select Blank Template (Managed).

So, move this Expo project folder inside the Monorepo folder:

    # ~/workspace
    mv expo-app monorepo/packages/expo-app

Now, the Expo project is inside the Monorepo. But, we need to adjust some things to be able to run Expo inside this Monorepo.

We need to set the package name at Expo project package.json :

    // ~/workspace/monorepo/packages/expo-app/package.json
    {
      "name": "@monorepo/expo-app",
      "main": "__generated__/AppEntry.js",
      // ...
    }

The "main" key is a special configuration from Expo, so we really need to set that.

After that, let's add two essential libraries to make our Expo project work. At the monorepo root folder, run this command:

    yarn workspace @monorepo/expo-app add expo-yarn-workspaces metro-config -D -W

Flags:

-W: Adds the libraries on the root
-D: The same as —-dev to add as devDependencies

Metro config

Let's configure our Metro, so create a file metro.config.js at monorepo/packages/expo-app:

    // ~/workspace/monorepo/packages/expo-app/metro.config.js

    const { createMetroConfiguration } = require('expo-yarn-workspaces');

    module.exports = createMetroConfiguration(__dirname);

So, we need to set insert some scripts at package.json again:

    // ~/workspace/monorepo/packages/expo-app/package.json

    {
      "name": "@monorepo/expo-app",
      "main": "__generated__/AppEntry.js",
      // ...
      "scripts": {
        // ...
        "postinstall": "expo-yarn-workspaces postinstall",
      },
    }

Extra configuration :: Typescript

If you don't want to add Typescript, you can skip this section.

Probably your monorepo root folder should contain a tsconfig.json, so let's add one to the Expo App package and extend the configuration on the root.

    // ~/workspace/monorepo/packages/expo-app/tsconfig.json

    {
      "extends": "../../tsconfig.json",
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noFallthroughCasesInSwitch": true,
        "noEmit": true,
        "noEmitHelpers": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "strict": true,
        "target": "esnext",
        "allowJs": true,
        "baseUrl": ".",
        // autocomplete paths
        "paths": {
          "*": ["src/*", "assets/*"],
          "assets/*": ["assets/*"]
        },
        "removeComments": true,
        "typeRoots": ["node_modules/@types", "./src/@types"]
      },
      "include": ["src"],
      "exclude": [
        "node_modules",
        "./node_modules",
        "./node_modules/*"
      ]
    }

You don't need to use "extends" key if your monorepeo doesn't contain a TS config yet.

Last step

To start building your product, you should clean/reset your monorepo project, because of the "postinstall" script inside the expo app package.

You can remove all node_modules or something like yarn --force on the root folder.

After that, you should run yarn install again, and you'll be able to develop & build your great product using Expo universal Apps :-]

References

You can look at my merged PR inserting an Expo Managed Workflow inside a Monorepo here.

Whats next?

Expo - Bare Workflow inside a Monorepo
Relay Client to use GraphQL
Or you can comment something to do with Expo

Thank you. \o/

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.

A PWA Expo Web using CRA - From ZERO to Deploy

Mauricio Reatto Duarte — Wed, 11 Mar 2020 19:42:37 +0000

Introduction

In this post, basically, I will init a Create React App using CRA CLI and inject the Expo SDK Tools to generate a PWA, and with the same codebase, have an iOS and Android App.

To begin, lets annotate the main tools that we'll use:

Create React App Boilerplate
Expo SDK
Expo HTML Elements
React Native
React Native Web
Styled Components
Netlfy/Now Deploy

Using the CRA Boilerplate

To get our first boilerplate, lets try this command:

You will get the full React Application provided by Facebook Team

    npx create-react-app pwaExpoTutorial

Adding React Native Ecosystem

For adding a React Native ecosystem we should add some libraries:

yarn add expo react-native react-native-web @expo/html-elements

After that, we can remove some irrelevant files

public folder
*.css files
*.test files (you can add your own test tool after)

Adding secondary libraries

expo install react-native-svg
yarn add react-native-web-hooks react-native-animatable styled-components

React Native SVG: SVG Support (Installed with Expo, because it uses Yarn and install the appropriate version to the Expo SDK)
React Native Web Hooks: React Hooks to be used in Web platform
React Native Animatable: A library to add animation to our SVG, simulating the initial CRA boilerplate

Babel configuration

It's good to configure Babel in our project, so install the expo preset and insert a babel.config.js on project root folder

yarn add -D babel-preset-expo

babel.config.js

    module.exports = { presets: ['expo'] };

Creating shared styled components

Create a file called componentsWithStyles inside something like src/shared

    import styled from 'styled-components/native';
    import * as Animatable from 'react-native-animatable';
    import { Header as H, P as Paragraph, A as Anchor } from '@expo/html-elements' ;

    export const Container = styled.View.attrs(() => ({
        as: Animatable.View
    }))`
      flex: 1;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
    `;

    export const Header = styled(H)`
      background-color: #282c34;
      flex: 1;
      justify-content: center;
      align-items: center;
      width: 100%;
    `;

    export const P = styled(Paragraph)`
      color: white;
    `;

    export const A = styled(Anchor)`
      color: #61dafb;
    `;

    export const Image = styled(Animatable.Image).attrs(() => ({
        animation: 'rotate',
        iterationCount: 'infinite',
        easing: 'linear',
        duration: 20 * 1000,
        style: { aspectRatio: 1 }
    }))`
      width: ${props => props.dimension*0.4}px;
      height: ${props => props.dimension*0.4}px;
    `;

Thinking in our logo (the SVG provided on initial CRA boilerplate), we need to set an aspect ratio to it, so create a file called AspectView.js inside some folder, I put it inside src/components

    import React, {useState} from "react";
    import {StyleSheet} from "react-native";
    import { Image } from '../shared/componentsWithStyles';

    export default function AspectView(props) {
        const [layout, setLayout] = useState(null);

        const { aspectRatio = 1, ...inputStyle } =
        StyleSheet.flatten(props.style) || {};
        const style = [inputStyle, { aspectRatio }];

        if (layout) {
            const { width = 0, height = 0 } = layout;
            if (width === 0) {
                style.push({ width: height * aspectRatio, height });
            } else {
                style.push({ width, height: width * aspectRatio });
            }
        }

        return (
            <Image
                {...props}
                style={style}
                onLayout={({ nativeEvent: { layout } }) => setLayout(layout)}
            />
        );
    }

Thank you @baconbrix to share it

I created an index.js in the same folder (src/components)

    export { default as AspectView } from './AspectView';

You can do the same with the folder src/shared (create an index.js file), but this is not the purpose of this post, you can improve on your own.

Let's dive into React Native

You can create a file in the application root folder called app.json to define some info about your app:

    {
      "expo": {
        "name": "PWAExpoWeb",
        "description": "A PWA using Expo Web",
        "slug": "pwaingexpo",
        "privacy": "public",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "splash": {
          "image": "./assets/splash.png",
          "resizeMode": "cover",
          "backgroundColor": "#ffffff"
        },
        "web": { "barStyle": "black-translucent" }
      }
    }

Then, create an App.js file on the root folder

    import React from 'react';
    import logo from './src/logo.svg';
    import { Code } from '@expo/html-elements';
    import { useDimensions } from 'react-native-web-hooks';

    import { AspectView } from './src/components';
    import {
      Container,
      Header,
      P,
      A,
    } from './src/shared/componentsWithStyles';

    function App() {
      const { window: { height } } = useDimensions();

      return (
        <Container>
          <Header>
            <AspectView source={logo} dimension={height} />
            <P>
              Edit <Code>src/App.js</Code> and save to reload.
            </P>
            <A
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </A>
          </Header>
        </Container>
      );
    }

    export default App;

Expo has a special configuration so you need to set entrypoint in package.json

    // ...
    "main": "expo/AppEntry.js",
    // ...

Continuing on package.json, we need to add our scripts:

    // ...
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject",
        "build": "expo build:web",
        "debug-prod": "expo build:web && npx serve ./web-build",
        "now-build": "yarn build && expo-optimize"
      },
    // ...

Did you notice that after the build, there is the expo-optimize, so let's insert it on our project:

yarn add -D sharp-cli expo-optimize expo-cli@3.13.0

It's using specific version of Expo CLI (v3.13.0) because, at the time of this post, the last version of the CLI was having a problem when being referenced by the Workbox, so, as a precaution, one of the last versions was added

Last but not least, we should increment some folders in .gitignore:

#expo
.expo
web-build

#IDE
.idea
.vscode

.expo: Cache folder
web-build: The web bundle
.idea & .vscode: IDEs folders

That's it, so you can try it running yarn debug-prod. =-]

Deploy via Netlify or Now

You can use this project as a Git repository, so on Netlify or Now, you can use the Github/Gitlab/Bitbucket repo synced with the master. You have only to set the build command as yarn now-build and the output folder as web-build/, so everytime you push commit to master, it will be deployed in the services (Netlify/Now).

Whats next?

Typescript - Expo has an incredible support for TS
Workbox
GraphQL

References

Thanks, 😎

Using cross tools with Expo Web and Native

Mauricio Reatto Duarte — Tue, 03 Dec 2019 02:57:00 +0000

first post of Expo series: https://dev.to/atalkwithdev/resolving-expo-multi-select-photos-with-react-hooks-487k

Continuing my series of posts about Expo, today we will discover how to use common development tools like Reactotron and Sentry in a cross-platform application using Expo.

Expo Web

Let’s suppose that you’re going to build a Web version of your app (an Android/iOS app, but now you want a Web platform of this app), what would you do?

First of all, let’s add a “web” option in the app.json as a platform:

"platforms": [
  "ios",
  "android",
  "web"
],

After that:

yarn add react-native-web react-dom

Now, you can just start your app :]

Maybe you got an error from ./RCTNetworking that doesn’t leave your app starts. Probably you’ll get this error if you are already using Reactotron solution.

Installing / Fixing Reactotron

Let’s install the Reactotron Client at our machine following this installation guide. Then, we can create our files to each platform only writing the file extension prefix. i.e.: index.native.js and index.web.js

The *.web.js means that code will build and run only in the Web platform, the same approach is to the *.native.js, but to the iOS/Android Platform.

Create a folder called reactotron on your app and then create the two files:

index.native.js
index.web.js

index.native.js:

import Reactotron, { openInEditor, asyncStorage } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';
import { NativeModules } from 'react-native';
import url from 'url';

const { hostname: host } = url.parse(NativeModules.SourceCode.scriptURL);

if ( __DEV__ ) {
  const tron = Reactotron.configure({ host })
    .use(reactotronRedux())
    .use(asyncStorage())
    .use(sagaPlugin())
    .use(openInEditor())
    .useReactNative()
    .connect();

  tron.clear();

  console.tron = tron;
}

yarn add url
yarn add -D reactotron-react-native reactotron-redux reactotron-redux-saga

index.web.js:

import Reactotron from 'reactotron-react-js';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';

if ( __DEV__ ) {
  const tron = Reactotron.configure()
    .use(reactotronRedux())
    .use(sagaPlugin())
    .connect();

  tron.clear();

  console.tron = tron;
}

yarn add -D reactotron-react-js reactotron-redux reactotron-redux-saga

After that, you have to add that configuration in somewhere.

App.js:

import React from 'react';
import 'path/to/your/reactotron';

// ...

registerRootComponent(AppContainer);

Now, if you build the app for Web, it will use the web configuration, if you build the app for Native, it will use the Native configuration.

You will apply the same approach to Sentra tool, but you can follow this guide :]

Configuring Sentry

Unfortunately, there is a bug issue with Sentry Expo v.2.x with the Web Platform, then let’s use an older version, and let’s add the Sentry Browser to the Web Platform too.

yarn add sentry-expo@1.13.0 @sentry/browser

After that, let’s configure our Sentry project, following the approach of the Reactotron, create a folder called sentry on your app and then create the three files:

sentry.native.js
sentry.web.js
index.js

sentry.native.js:

import Sentry from 'sentry-expo';
import env from 'path/to/your/constants/environment';

Sentry.config(env.SENTRY_PUBLIC_DNS).install();

export default Sentry;

sentry.web.js:

import * as Sentry from '@sentry/browser';
import env from 'path/to/your/constants/environment';

Sentry.init({
  dsn: env.SENTRY_PUBLIC_DNS,
  debug: false,
});

export default Sentry;

index.js:

import Sentry from './sentry';

export default Sentry;

When you want to use Sentry to capture exceptions, you just import it:

import Sentry from 'path/to/your/sentry';

// Sentry.captureException()

References

I hope you enjoy this post, and soon I will post more about Expo and how to deliver a great value to your company and your clients using it.

Thank you :]

Resolving Expo Multi Select Photos with React Hooks

Mauricio Reatto Duarte — Thu, 21 Nov 2019 15:18:31 +0000

Created: Nov 26, 2019 10:07 PM Tags: Expo, React Native, javascript

Introduction

Do you know the Expo project? Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Workflows

The two approaches to building applications with Expo tools are called the “managed” and “bare” workflows.

With the managed workflow you only write JavaScript / TypeScript and Expo tools and services take care of the rest for you.
In the bare workflow, you have full control over every aspect of the native project, and Expo tools can’t help quite as much.

We won’t tell about the bare workflow at this moment, only a problem with so many people using Expo SDK 33 or later.

Expo ImagePicker - launchImageLibraryAsync

There is the ImagePicker on the API for display the system UI for choosing an image or video from the phone’s library, but there isn’t a way to allow multiple selections of images, as you can see here. There are some feature requests here:

The solution with React Hooks

In React Native, you can use the Camera Roll API to get media from the phone’s library, then why not build a hook for that? :]

import { useCallback, useState } from 'react';
import { CameraRoll } from 'react-native';

export default function useCameraRoll({
  first = 40,
  assetType = 'Photos',
  groupTypes = 'All',
}) {
  const [photos, setPhotos] = useState([]);
  const [after, setAfter] = useState(null);
  const [hasNextPage, setHasNextPage] = useState(true);

  const getPhotos = useCallback(async () => {
    if (!hasNextPage) return;

    const { edges, page_info: pageInfo } = await CameraRoll.getPhotos({
      first,
      assetType,
      groupTypes,
      ...(after && { after }),
    });

    if (after === pageInfo.end_cursor) return;

    const images = edges.map(i => i.node).map(i => i.image);

    setPhotos([...photos, ...images]);
    setAfter(pageInfo.end_cursor);
    setHasNextPage(pageInfo.has_next_page);
  }, [after, hasNextPage, photos]);

  return [photos, getPhotos];
}

After that, you simply use it like this:

// path to your hooks
import { useCameraRoll } from 'shared/hooks';

// ...

function SomeComponent() {
    const [photos, getPhotos] = useCameraRoll({ first: 80 });

    // ...
}

You can use getPhotos in a FlatList onEndReached props , for instance. Problem solved :]

DEV Community: Expo Lovers ♥️

Create and Deploy Web Apps and PWAs with Expo

How it works 🛠

Our web app

Creating the project 💡

Run the project 🚗

Develop the app 💻

DEMO: write once, run everywhere!

Deploying the app 🚀

BUILD

DEPLOYMENT

*Our app is now live * 🎉🎉🎉🎉

Continuous delivery

Progressive Web Apps (PWA) 🎁

Automatisez vos déploiements Expo avec Bitbucket Pipelines

Comment publier ? 💻

Comment Automatiser ? ⏱

Etape 1 : Configuration de Expo 🔧🔨

Etape 2 : Configuration de Bitbucket 🔧🔨

Etape 3 : Déploiement 🚀

✅

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

Prérequis

Configuration Firebase

1. Créer un projet Firebase

2. Ajouter une app à votre projet Firebase

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

Application Expo

Installations des dépendances:

Initialisation de firebase

Navigation (V5)

VerifyScreen .js

Felicitations !

How to insert an Expo project in a Monorepo

Introduction

Monorepo

Let's get to work

Metro config

Extra configuration :: Typescript

Last step

References

Whats next?

Les notifications push avec Expo.

1. Installer le expo-cli

2. Créer le projet

3. Exécuter le projet

3. Tester l’application

4. Obtention du Expo Push Token

En pratique

4. Envoi de la notification

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

A PWA Expo Web using CRA - From ZERO to Deploy

Introduction

Using the CRA Boilerplate

Adding React Native Ecosystem

Adding secondary libraries

Babel configuration

Creating shared styled components

Let's dive into React Native

Deploy via Netlify or Now

Whats next?

References

Using cross tools with Expo Web and Native

Expo Web

Installing / Fixing Reactotron

Configuring Sentry

References

Resolving Expo Multi Select Photos with React Hooks

Introduction

Workflows

Expo ImagePicker - launchImageLibraryAsync

The solution with React Hooks

References

Our app is now live 🎉🎉🎉🎉