In one of my previous articles, I shared how to open an email app with react-native. With another client, I need to execute exactly the same feature. But this time, I am working with a stack-based on expo. 

I don't want to send a mail with the Linking API. I just want to launch the mail app and let users read messages. Especially the verification email we just sent during the new account flow.

As a user
I can launch the main email app on my device (iOS or Android)
So that I confirm my email

We are going to use 3 differents libraries:

Platform from react-native for specific code

Install the libraries with expo to be sure it's aligned with the version of your expo SDK.

expo install react-native-email-link expo-intent-launcher

On iOS you need a real device because there is no mail.app on iOS Simulator.

Platform Specific Code for react-native https://reactnative.dev/docs/platform-specific-code

Android Intent https://developer.android.com/reference/android/content/Intent#ACTION_MAIN

Expo IntentLauncher https://docs.expo.dev/versions/latest/sdk/intent-launcher/

Do you want to be able to launch the main email app on a user's device (iOS and Android) from a react-native app built with Expo? here is the solution using `react-native-email-link` on iOS and `expo-intent-launcher` on Android

Launch and open email app with Expo Managed Workflow

Open an email app with react-native expo for magic link onboarding

In my previous article, we saw how I use Zsh shortcuts with git. It working great if you are alone on your project. But if you want to be effective in a team, you will need to have a workflow around GitHub.

gh is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code.

You can install the CLI tool with brew if you are on macOS or from other sources.

When it's done you need to authenticate with your GitHub account.

If you already used git init and pushed your code, you can clone a repository or preview it on a webpage.

Open your current GitHub homepage project in a web browser.

Working as a team, you need to branch out your work from the main (or master) branch. With gco -b you can checkout and create a new branch at the same time.

# Create a new branch, and switch to it
gcb feature/new-stuff

Work and manage pull requests from the terminal.

# Create a new pull request on GitHub
gh pr create

# Launch your web browser 
gh pr view --web

Push your files to Github from the terminal.

# View your files status
gss

# Add all your modifications
gaa

# Commit with a message 
gcmsg 'message'

# Push your modification
gp

Browse all the commands on the official documentation.

Avoid context switching and manage your GitHub workflow from the terminal.

Become a command-line power user with GitHub and gh

The ultimate GitHub cheat sheet to work with your team at lightning speed

I created my GitHub account in 2010, 2 years after the end of my studies. I was already a Linux user and I realized I was more productive using the terminal VS clicking everywhere. As a React Native developer, I switched to macOS and I still use the terminal for everything. Today I will share with you my setup to be super-efficient with git and GitHub.

This article provides insight into some of the best tools to use in your day-to-day workflow with the git command line and gets you started with a totally customized setup.

All UNIX-based operating system comes with a shell called Bash. There are alternatives to Bash that make using the terminal faster and more comfortable for web developers. One of the most popular is Oh My ZSH.

Installing Oh My ZSH is very simple. Simply run the following command and restart your terminal:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

ZSH allows you to extend built-in functionality by adding plugins. To enable a plugin,  open your .zshrc file and add these: 

# Useful oh-my-zsh plugins
plugins=(git gitfast common-aliases zsh-syntax-highlighting history-substring-search zsh-autosuggestions zsh-z)

Create new or download existing repository

# Create a new folder
take awesome_app

# Initialize a new repository
git init
git remote add origin git@github.com:username/repo.git

Show commit history with various options:

git status can tell you if your folder has some modified files, but with Oh My ZSH we are using this shortcut

# Check the status of your files
gss

# See unstaged changes made to all files and inspect exactly what changed
gd

Saving your work is a 3-steps job. Check the status, git add all and write a commit message

# Check the status of your files
gss

# Stage all modified or deleted files,
gaa

# Make a commit
gcmsg 'feat: add history button closes #123'

Notice using "closes #123" in the commit message will automatically close the issue on GitHub

Sometimes you forgot to push something or you want to edit your previous commit.

gc! 	git commit -v --amend
gca! 	git commit -v -a --amend
gcan! 	git commit -v -a --no-edit --amend

# Push changes, forcing overrides
gp -f    

All the git basic commands shorcuts I use to be a productive React developer on macOS.

Become a command-line power user with git and Oh My Zsh

The ultimate git cheat sheet to work at lightning speed

Designing at scale is not an easy task —especially on mobile. User flows rapidly become complex and it takes a ridiculous amount of time to test every single scenario.

As a React Native developer working freelance, I code on different stacks. Today I will cover the problem I faced when I wanted to connect these tools together:

Since 2017, I follow the "Component Driven Development" way of working. Like Lego bricks, all my components are loosely-coupled and independent. I assemble them to test behavior with Storybook. But if you want to have access to the navigation you will encounter this error: {navigation} object is not defined.

If you’ve tried creating a story component that uses the useNavigation hook, you’ve likely seen this error message:

Couldn’t find a navigation object. Is your component inside a screen in a navigator?

This happens because the useNavigation hook needs to retrieve the navigation prop from a parent Screen component, and you’re most likely rendering the component in isolation.  This leads to an error since the hook is not able to retrieve the navigation prop.

Solution: Wrapping your Story component with a decorator

You could create a MockedNavigator component as described on this tread on GitHub.

// storybook/StoryNavigator.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

/**
 * Helper component tor create a Dummy Stack to access {navigation} object on *.story.tsx files
 *
 * @usage add this decorator
 * ```
 * .addDecorator(reactNavigationDecorator)
 * ```
 */

const StoryBookStack = createStackNavigator();

export const reactNavigationDecorator = (story) => {
  const Screen = () => story();
  return (
    <NavigationContainer independent={true}>
      <StoryBookStack.Navigator>
        <StoryBookStack.Screen
          name="MyStorybookScreen"
          component={Screen}
          options={{header: () => null}}
        />
      </StoryBookStack.Navigator>
    </NavigationContainer>
  );
};

import {reactNavigationDecorator} from '~/storybook';

storiesOf('ScrollTabBar', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .addDecorator(reactNavigationDecorator)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="ScrollViewWithTabBar" usage="children">
        <ScrollViewWithTabBar>
          <DummyContent />
        </ScrollViewWithTabBar>


The benefit of this approach is that it provides an actual navigation prop to the component.

Solving the error "couldn't find a navigation object. Is your component inside a screen in a navigator?" with React Native and Storybook.

How to add navigation object on Storybook with React Native

Yesterday I was speaking with Frank von Hoven about tooling for React Native. These days there are plenty of tools available like Amplify, Firebase, and Hasura to speed up the development of your mobile application.

Imagine you need to ship a social mobile application with a news feed like Twitter, Instagram, or Dribble. Under the hood you need to use WebSockets to have real-time updates, having a strong backend team of engineers, and spend months building the API.

Or you can use the stream API to ship your app with React Native in hours.  

When you are building a newsfeed, you need to use the prop refreshControl, the Linking component, and implement the logic yourself.

With expo-activity-feed, you can have an activity feed with pull to refresh and Linking in 5 minutes. It's super effective.

You need to wrap your application with StreamApp, add your API credentials, and add the FlatFeed.

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';

import { StreamApp, FlatFeed } from 'expo-activity-feed';

function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        <StreamApp
          apiKey={GETSTREAM_API_KEY}
          appId={APP_ID}
          token={GETSTREAM_API_TOKEN}
        >
          <FlatFeed feedGroup="timeline" userId="user-one" />
        </StreamApp>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

export default App;

You are happy but the marketing team needs a like button.

You can add a Footer render prop with LikeButton to your activity component.

import { LikeButton } from 'expo-activity-feed';

function CustomActivity(props) {
  return <Activity {...props} Footer={
    <LikeButton {...props} />
    } 
  />;
}

...

<FlatFeed
  feedGroup="timeline"
  userId="user-one"
  Activity={CustomActivity}
/>

If you want to add a publish a status feature, guess what? it's available on the stream API.
You need to use StatusUpdateForm with the same feedGroup name.

import { StatusUpdateForm } from 'expo-activity-feed';  

<StatusUpdateForm feedGroup="timeline" />

Did you notice the problem here? Despite using SafeAreaView we have an issue with the keyboard. 

It's normal. In the React Native world, you spend a ridiculous amount of time fixing bugs with the Keyboard on iOS AND Android.
I tested on the iPhone 12 Pro Max first, I didn't encounter the issue with the iPhone SE.

ProTip: Always toggle the software keyboard when you are using a simulator to test behaviors.

At this point, some backend work is involved. On the React Native code, you can just add the notify props to your FlatFeed

If you want to quickly spawn a News Feed mobile application, stream API is definitely a good choice. When I am writing this article there are no typescript definitions which drives me crazy because I can't use the auto-import feature with the keyboard shortcut ⌘  . 
But at the end of the day, this is a really tiny detail compared to the time spend to create this little application with Expo and React React Native.

React Native workshop repository on GitHub

Use stream API to create a News Feed Social Media application with real time events in hours instead of months.

Create a timeline feed with expo-activity-feed for your React Native application

Building a News Feed application with React Native

TLDR;
You can check the diff of the commit on GitHub

If you landed on my previous article about Gatsby and TypeScript, who already know the benefits of the tool. It saves you a lot of time because the instruction are updated and your are working directly from the teminal.

Today the mission was to migrate my codebase to tailwind because I am using it on another project and I am lasy to deal with thousands of UI frameworks. Before checking the online documentation, I ran this from the terminal:

You can choose your recipe with the arrow up or down:

Select a recipe to run
  Add Gatsby Theme Blog
  Add persistent layout component with gatsby-plugin-layout
  Add Styled Components
>>Add Tailwind
  Add Sass
  Add Typescript

Hit enter and Boom you start the installation.

Setup Gatsby with Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Proposed changes

NPMPackage:
 * Install tailwindcss@latest
 * Install gatsby-plugin-postcss@latest

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-postcss in gatsby-config.js

Accept the diff and continue the install.

Proposed changes

File:
 * Write postcss.config.js
---
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}
---

File:
 * Write tailwind.config.js
---
module.exports = {
  purge: [
    './src/**/*.js',
  ],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
---

File:
 * Write src/styles/tailwind.css
---
@tailwind base;
@tailwind components;
@tailwind utilities;
---

File:
 * Write src/pages/usingtailwind.js
---
import React from 'react'
import '../styles/tailwind.css'

export default () => (
  <h1 className="text-3xl">This is a 3xl text</h1>
)
---

If everything is correctly setup you should have this output

✅ Installed NPM package tailwindcss@1.9.6
✅ Installed NPM package gatsby-plugin-postcss@3.1.0
✅ Installed gatsby-plugin-postcss in gatsby-config.js
✅ Wrote file postcss.config.js
✅ Wrote file tailwind.config.js
✅ Wrote file src/styles/tailwind.css
✅ Wrote file src/pages/usingtailwind.js

Thanks to netlify preview deploy build I noticed one thing: all the tailwind css is missing.

If you are using TypeScript —like me— you need to update the purge config.

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.js", "./src/**/*.tsx"], //here
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

And double check your configuration, it should be like this

// gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ... ALL OTHER PLUGINS HERE ...
    {
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: false,
        develop: false,
        tailwind: true,
      },
    }
  ],
}

How to use Gatsby recipes to install the tailwindcss framework to your codebase from the terminal.

The fastest way for adding tailwind to your Gatsby website

Hey Gatsby! Can you add tailwind to my codebase?

This morning, I encountered a build issue during the release of my React Native application on iOS. 

It’s not the first time and I think it’s coming from the last Xcode upgrade.
Here is how I solved the problem.

To identify if the problem is not coming from your machine you need to upgrade the expo cli tool:

When I want to release my build to production, I use these commands:

expo build:ios --release-channel production
expo upload:ios --latest

But today, the God of Cryptic Error Messages was on my side. 

The call to the iTMSTransporter completed with a non-zero exit status: 1. This indicates a failure.

If you pay attention to the message, you need to use the Transporter.app

We recommend using Transporter.app instead of the expo upload:ios command if you have any trouble with it.

Fixing the issue and upload with Transporter

Transporter is a simple and easy way to deliver content on the Apple Store Connect. Here is a half automated workflow to speed-up the process. First, we want to log the download URL for the standalone iOS binary:

curl -o archive.ipa “$(expo url:ipa)”

Drag and drop your archive.ipa to the Transporter App:

Problem solved.
You can start to roll-out to Production.

Releasing a mobile application to the store can be tricky. Here is how to solve your upload problem with standalone iOS build release.

Release standalone iOS build to Apple Store Connect with React Native Expo

Uploading new build to TestFlight for React Native with Expo

This demo shows you how to take pictures from your phone, upload them to the cloud, from there Google analyzes them and returns text-based information about your image.

I was reading the Google Vision documentation, and to have an API_KEY you need to complete theses 2 steps:

Select Google cloud vision and you should be able to Create Credentials to get your API_KEY.

Don't forget to keep your API_KEY, we are going to use it later.

To be able to use the camera, you need to ask some users permissions. From a brand new React Native Expo application (after running expo init), import the library:

import * as ImagePicker from 'expo-image-picker';

And ask users permissions to use the camera

  const [permissions, setPermissions] = React.useState(false);
  const askPermissionsAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraPermissionsAsync();

    if (permissionResult.granted === false) {
      alert('Permission to access camera roll is required!');
      return;
    } else {
      setPermissions(true);
    }
  };

we are going to use the launchCameraAsync feature from expo-image-picker

  const [image, setImage] = React.useState(null);
  const [status, setStatus] = React.useState(null);
  const takePictureAsync = async () => {
    const { cancelled, uri, base64 } = await ImagePicker.launchCameraAsync({
      base64: true,
    });

    if (!cancelled) {
      setImage(uri);
      setStatus('Loading...');
      try {
        
        // Call the Google API here

      } catch (error) {
        setStatus(`Error: ${error.message}`);
      }
    } else {
      setImage(null);
      setStatus(null);
    }
  };

Getting results from the Google Vision API

The last thing we need to add is calling the API to preview the results.

// Remplace "Call the Google API here" with this
const result = await callGoogleVisionAsync(base64);
setStatus(result);

{image && <Image style={styles.image} source={{ uri: image }} />}
{status && <Text style={styles.text}>{status}</Text>}

Your first mobile application with Machine Learning

If everything is correctly set up, congratulation! You can play with your new mobile app and try to identify everything.

All the code source is available on my GitHub repository.

Use the Google Cloud Vision API with React Native to identify the content of an image from your phone camera.

Machine Learning with Google Vision in Expo React Native

Using Machine Learning from your iOS or Android phone

When you ship a new feature, moving back and forth between the documentation, the terminal, and the codebase is kind of a pain.

And I need a cli tool because I am an automation nerd.

Let me introduce you to gatsby recipes 👨‍🍳. Open your terminal and run this command on the folder of your website:

and 💥 you just have to follow the steps of the cli to migrate your JavaScript codebase to TypeScript.

Select a recipe to run
  Add a custom ESLint config
  Add Jest
  Add Gatsby Theme Blog
  Add persistent layout component with gatsby-plugin-layout
  Add Theme UI
  Add Emotion
  Add support for MDX Pages
  Add support for MDX Pages with images
  Add Styled Components
  Add Tailwind
  Add Sass
>>Add Typescript
  Add Cypress testing
  Add animated page transition support
  Add plugins to make site a PWA
  Add React Helmet
  Add Storybook - JavaScript
  Add Storybook - TypeScript

Proposed changes

NPMPackage:
 * Install typescript@latest
 * Install gatsby-plugin-typescript@latest
 * Install @typescript-eslint/parser@latest
 * Install @typescript-eslint/eslint-plugin@latest

Installs the plugin gatsby-plugin-typescript in your gatsby-config.js.

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-typescript in gatsby-config.js

Adds a tsconfig.json file to control how TypeScript processes your code.

Proposed changes

File:
 * Write tsconfig.json

After installing this recipe, you can add TypeScript code, components, and pages in your sites src directory.

We learned how gatsby recipes can improve your workflow with up-to-date and clear instructions.

You can spend a lot of time accross the documentation, online tutorials and boilerplate. OR you can use an automated tool for the job.

Migrate your Gatsby website to TypeScript —the fast way

When dealing with SMS validation code form, don't forget to add the autocomplete attribute with the value "one-time-code".

It allows iOS to autofill the input with the incoming SMS.

For iOS 12+ oneTimeCode can be used to indicate that a field can be auto-filled by a code arriving in an SMS.

import { TextInput } from 'react-native';

<TextInput
  textContentType="oneTimeCode"
  ...
/>

How to add a nice micro-interaction for your onboarding when you check the phone number.

Allows iOS to autofill the TextInput with the incoming SMS on React Native

Last month, I was invited by codecontrol as a freelancing expert, and I want to share it today with those of you who haven’t watched it. This talk isn’t about JavaScript or CSS. It's about how to kickstart your journey as a freelancer.

Watch: How to Get Started as a Freelancer Today 

How to build a portfolio of exciting clients

Biggest learnings & insights over the years

If we missed something or you need some clarification, feel free to drop me a line. I am always happy to share my knowledge.

I hope you’ll enjoy watching this talk as much as I enjoyed participating. I would like to thank Tristan Lim and the team for organizing this webinar.

The benefits of being a freelancer are clear - independence, flexibility, better pay, & ultimately more control over your career. We get it - it's a daunting challenge to jump right into it. Taking the leap of faith means changing the way you work, your routines, leaving your old colleagues behind...

Get Started as a Freelancer Today

In freelancing, your first job is finding new clients

One of my biggest concerns as a freelance is finding new clients.

I am a solo entrepreneur. If I am not looking for new job opportunities every week, I am in a risky position. 
One day —for a random reason— I can quickly lose all my clients.

Literally, that's what happened 2 weeks ago, with something that no one could have predicted: a global world pandemic.

Talent Summit 2020: "Your Freelancing on Autopilot with Airtable" by David Leuliette

To anticipate this problem, I have a mindmap to remember my sales routine:

Never stop selling (almost half of my time)

These pieces of advice are nice but how can I work on my client's projects and sell my services in the meantime?

Let me introduce you to all my automation protips.

But first, you need to create some accounts on several services.

Mailchimp (you need a paid account for the automation funnel)

Let's start with a landing page as an entry point to generate new leads.

We need to create a relevant and impactful speech:

Why? 
Why did you create this service to help customers in their life?

What? 
The product/service you are selling

Call to action 
with something valuable like a free consultation, a pdf with an infographic poster...

On my case, https://davidl.fr have a call to action to https://davidl.fr/onboarding

If someone sends me an email or a request on LinkedIn, I use this template:

Thank you for contacting me. I am working remotely as a freelance developer.

In terms of timeline, I am currently accepting new projects for {current_date + 3 month}.

If you want to keep in contact, I created a small website for our next collaboration.
https://davidl.fr/onboarding

You will be the first informed when I’m available again.

We have a landing page. It's great as a first step.
But we want to collect some data from our leads.

We can use a simple email, but it's not really efficient and scalable if we want to collect our leads information.

They are plenty of solutions available like Typeform, or Google form.

I am using Airtable because I built my custom CRM for all the things related to my freelance.

If you don't know the product, think of Airtable as a spreadsheet on steroïd.

All my tips for creating your own CRM and scale your activity. Use Airtable as a database, send automated emails with Mailchimp and organise your meetings with Calendly.

Mobile Design

UX and UI analysis form a React Native developer perspective.

2 details

8 details

11 details

5 details

Blog

Articles about design, developement, automation and how to ship product for mobile users.

Launch and open email app with Expo Managed Workflow

Become a command-line power user with GitHub and gh

Become a command-line power user with git and Oh My Zsh

How to add navigation object on Storybook with React Native

Create a timeline feed with expo-activity-feed for your React Native application

The fastest way for adding tailwind to your Gatsby website

Release standalone iOS build to Apple Store Connect with React Native Expo

Machine Learning with Google Vision in Expo React Native

Migrate your Gatsby website to TypeScript —the fast way

Allows iOS to autofill the TextInput with the incoming SMS on React Native

Get Started as a Freelancer Today

Build an automated funnel of new clients with Airtable, Zapier and Mailchimp

How to open the email application with React Native

CSS Grid by examples for React projects

Simple automated release workflow for React Native with Expo

Subscribe?