Give me six hours to chop down a tree and I will spend the first four sharpening the axe.

From my perspective, you need to sharpen your tools like Lincoln. I recently was invited as a guest to the React Native Live Show on Twitch. With Jamon, we talked about our VSCode setup when you are working on a JavaScript stack.

Optimize your VS Code setup for React Native with Jamon and David

In this article, we are going to see which extensions you should install on Visual studio code, to become more productive with your React Native codebase.

On average I spend 150 hours a year working with a terminal. That's one of my main tool —because I don't like the integrated terminal in VSCode.

iTerm2 is a terminal emulator for macOS. I am using it for 3 reasons: 

Splitting windows horizontally or vertically 

Automatic copies into the clipboard when you select text

"smart selection" to highlight URLs, email addresses, filenames, ...

and many more other terminal features that make my life easier.

OhMyZSH is a toolchain for your shell. It's a powerful configuration that allows you to customize your terminal experience with tons of shortcuts and colors that sparks joy ✨

After publishing this article @bmichotte mentioned to me that he is using hyper terminal with fish shell. It's another option available on all platforms Windows, Linux, and macOS.

Note: if you want to test this setup on a "fresh" setup, you can install VSCode Insiders —the beta version of the software 

brew update
brew install --cask visual-studio-code
# or 
brew install --cask visual-studio-code-insiders

Quokka.js for VSCode is a JavaScript and TypeScript playground in your editor.

code --install-extension WallabyJs.quokka-vscode
# or 
code-insiders --install-extension WallabyJs.quokka-vscode

JavaScript/Typescript snippets for React, React Native and Redux in ES7+

code --install-extension dsznajder.es7-react-js-snippets

Make debugging faster by automating the operation of writing meaningful log messages.

code --install-extension chakrounanas.turbo-console-log

Autocomplete and validation for your app.json or app.config.js manifest.

code --install-extension byCedric.vscode-expo

ESLint will help you on catching bug and useless code.

code --install-extension dbaeumer.vscode-eslint

prettier is a codeformatter and will helps to have the same coding style across projects.

code --install-extension esbenp.prettier-vscode

Optional sometimes you have conflicts with other formatters. If it's not working just force the usage with `Prettier - code formatter`

If you are looking for a strict set of rules you should Install custom config from William eslint-config-react-native-wcandillon

Sublime-keybindings is a set of keybindings for VSCode.

code --install-extension ms-vscode.sublime-keybindings

How to setup your Visual Studio Code to be more productive

VSCode setup for productive React Native Developer

VSCode Tools recommendations from senior developer

When you work as a React Native developer, at some point you will google this: How to pass parameters to my SVG Component?


Featured on the React Native Newsletter
A few hours after publishing, this article was published in the React Native Newsletter. Check out issue #153 here.

As a developer, creating react-native components from plain SVG files makes us waste a lot of time. With svgr/cli we can automatically generate a component from one SVG file or from an entire folder.

In this article, we will see how to use svgr to generate react components compatible with React Native.

How to make a script to automate the creation of React Native components from SVG

I am a big fan of street fighter. Since my 13 years old I have known the concept of a hitbox. Basically, a hitbox is a representation of the area where you can hit your opponent.

Over the ages, I noticed a lot of professional designers don't know this concept. I don't understand why, because It's impossible to align vertically, horizontally, and scale icons if they don't have the same hitbox. For me, it's like being a graphic designer and not considering how the colors will be printed.

From a coding perspective, the hitbox is the SVG property viewBox. The value of the viewBox attribute is a list of four numbers: min-x, min-y, width, and height.

It's impossible to align vertically, horizontally, and scale SVG icons if they don't have the same viewBox.

The first step is to prepare all the icons. 

Double-check your SVG's have the save viewBox. if it's not the case open a new file on Figma and export the files again —in this example the viewBox will be 256x256.

Update your package.json with a new script "icons:create". It will allow you to run yarn icons:create later. 

// package.json
{   
  "scripts": {
     ...
     "icons:create": "npx @svgr/cli --native --typescript -d ./src/components/icons ./src/components/icons/source --config-file ./src/components/icons/svgr-config.json --template ./src/components/icons/svg-template.js",
   }
}

I will break down all the parameters for you.

npx @svgr/cli We will download locally the last version of svgr every time

--native forces to delete props that are not compatible 

--typescript who's not using TypeScipt these days?

-d ./src/components/icons ./src/components/icons/source destination / source folder

--config-file ./src/components/icons/svgr-config.json you can specify some configuration here

--template ./src/components/icons/svg-template.js the output template component


Add the svgr config file in the same folder as the svg file.

// src/components/icons/svgr-config.json

{
  "typescript": true,
  "removeViewBox": false,
  "replaceAttrValues": {
    "white": "{props.color || `#FFFFFF`}",
    "#FFFFFF": "{props.color || `#FFFFFF`}",
    "black": "{props.color || `#000000`}",
    "#111111": "{props.color || `#000000`}",
    "#000": "{props.color || `#000000`}"
  },
  "svgProps": {
    "width": "{props.width || 256}",
    "height": "{props.height || 256}"
  }
}

Noticed here we can fix poorly designed icons that are not using a consistent colors style and transform all colors to #000000.

Add the svg-template that will create React components for you.

// src/components/icons/svg-template.js

const comments = `
// Auto-generated file created by svgr-cli source svg-template.js
// Run yarn icons:create to update
// Do not edit
`;
const template = (variables, { tpl }) => {
  return tpl`
${comments}
${variables.imports};
${variables.interfaces};
const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
);
${variables.exports};
`;
};

module.exports = template;

From your terminal start the script to create SVG components.

You can now use your SVG components ad use the size and color you want.

import React from "react";
import { StyleSheet, ScrollView } from "react-native";
import {
  RoboticHand,
  VrProgram,
} from "./src/components/icons";

export default function App() {
  return (
    <ScrollView>
      <VrProgram color={"red"} />
      <RoboticHand color={"blue"} />
    </ScrollView>
  );
}

All the steps to dynamically transform SVG files to React Native components. It's useful for icons, logos, and animations because you can change props.

How to create components from an `svg` file with `svgr/cli` for React Native

Using SVGR with the command line to transform SVG files from Figma

During your life as a React Native developer, you are going to handle a lot of different scenarios using keyboards. You need to know all possible combinations to choose the one that corresponds to your situation.

In this article, we are going to define and compare all types of keyboards available in react-native.

Imagine it's Monday morning, you have a new bubble on slack, your lovely designer wants small feedback for his call to action...


It's a good practice for mobile Call To Action to be within the thumb reach.


💯 Indeed, but from a technical perspective, the React Native platform comes with some limits.

How to use the Input Keyboard type in React Native

This is an example of a controlled component in React Native.

import { TextInput } from "react-native";

const App = () => {
  const [inputValue, setInputValue] = useState("Example text");

  return (
    <View>
      <TextInput
        onChangeText={setInputValue}
        value={inputValue}
      />
    </View>
  );
};

TextInput props values for `keyboardType​` by example

Protip to toggle the iOS keyboard on macOS

If you are using the macOS simulator to work on iOS mobile, you will need to toggle the keyboard or it will never appear (IO > Keyboard > Toggle Software Keyboard)

All keyboardType examples (iOS on the left, Android on the right)

With all the screenshots above we are using this code and changing only keyboardType​ props. The source code is available on GitHub.

This is the basic keyboard when you just want to handle data from a TextInput.

Numeric keyboards are used when you need to take data as a number. As you can see the Android keyboard is a little bit different, the user can have access to string characters on his screen while apple doesn't show them.

When the user wants to write his password, the first letter is not always a capital letter that's why we need to use this type of keyboard for password input.

For the Email type, the keyboard is basic and we can easily have access to the "@" and the "." character.

As you can see the type defines the phone suggestion and I can select faster my mail address.

The phone-pad type is the keyboard that we use when we made a phone call. We have access to special characters like #,+,*.

Even if on Android the keyboard is a little bit different, this is the principal functionality of this keyboard.

When the user wants to find a website, he needs to have ".", "/" and the domain extension quickly

How to choose the right keyboard to handle text or numbers with React Native.

13 React Native keyboard examples on iOS and Android

An overview of all keyboard types available in React Native

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)

🚸 You will probably encounter this error if you relaunch "Warning: plugin zsh-syntax-highlighting not found". To fix the issue you can clone manually these repositories:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

git clone https://github.com/agkozak/zsh-z $ZSH_CUSTOM/plugins/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';
// import { createNativeStackNavigator } from "@react-navigation/native-stack";

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

const StoryBookStack = createStackNavigator();
// or the native one
// const StoryBookStack = createNativeStackNavigator();

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

import {NavigationDecorator} from '~/storybook';

storiesOf('ScrollTabBar', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .addDecorator(NavigationDecorator)
  .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. 

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

Mobile Design

UX and UI analysis form a React Native developer perspective.

8 details

7 details

5 details

4 details

Blog

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

VSCode setup for productive React Native Developer

How to create components from an `svg` file with `svgr/cli` for React Native

13 React Native keyboard examples on iOS and Android

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?