How to Reset React Native Cache — NPM, iOS, Android, and More

Things can get… funky in React Native. Here’s how to start fresh and reset a React Native app cache.

There are a lot of things in play in a React Native app including:

• NPM/Yarn
• Cocoapods
• Watchman
• Metro bundler
• React Native
• iOS Build
• Android Build

When things start to get weird/unexpected what do you do? Track down how to clear each one of those folders? Just clear one out?

Here’s the easiest method…

How to Use React Native Clean Project to Clear Your React Native App

React Native Clean Project is a CLI plugin that will clear out all the things that could be causing you grief with your React Native app.

First, install the package as a development dependency:

yarn add react-native-clean-project --dev

or

npm install --save-dev react-native-clean-project

Then you’ll want to set up some scripts in your package.json. You've got two options here - interactive or auto.

// package.json

{
  "scripts": {
    "clean": "react-native clean-project",
    "clean:auto": "react-native clean-project-auto"
  }
}

You can then run those via your command line

yarn clean OR npm run clean 
yarn clean:auto OR npm run clean:auto

Why Interactive?

Interactive is going to let you choose what you clear from the cache. If you suspect it’s one thing, or it’s only affecting one platform, you can just focus there.

Benefit: Faster build times because you don’t need to reinstall and rebuild all the caches.

Drawback: You have to monitor it and make decisions.

Why Auto?

Auto mode is going to use the CLI defaults to get the app back to a “freshly-cloned, never-started repo”.

Benefit: Run it and forget it. No decisions or monitoring required.

Drawback: Slower initial rebuild time because you have to rebuild every cache.

Why is this necessary? Why does this happen?

Like I said before, there are a lot of moving parts in a React Native app.

We’re working with a multiple ecosystems (NPM, Cocoapods), multiple platforms (iOS, Android, Web), and multiple tools (React Native, Metro, Homebrew). 💩 happens and sometimes we need to clean it up.

Originally published at https://www.reactnativeschool.com.

How to Reset React Native Cache — NPM, iOS, Android, and More was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Get Started with React Query — Migrate from Fetch

Fetching data from a remote source is a must in just about every app you’re going to build. Unfortunately, fetching data is rarely as simple as just fetching the data and rendering it. A few things to consider:

• What do we do when we’re waiting for the data to load?
• What if an error occurs?
• How do I keep my data up to data?
• What if my user has a poor/slow internet connection?

This post was originally published on React Native School! If you’re interested in hundreds of React Native tutorials and courses be sure to check it out!

These are all things that React Query can help you with.

Today we’ll be migrating a basic demo app from using the fetch API to using React Query.

The final code can be viewed on Github.

App Overview

Let’s take a look at our app. We can request a list of posts and then display them. When tapping on a post title we navigate to a new screen where we can also see the comments, which come from a separate request.

Right now that data is fetched via the fetch API.

// App/screens/List.js

import React from 'react';
import { View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';

import { Text } from '../components/Text';
import colors from '../constants/colors';

const styles = StyleSheet.create({
  /// ...
});

export const List = ({ navigation }) => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((response) => {
        setData(response);
      });
  }, []);

  return (
    <FlatList
      data={data}
      style={styles.container}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => navigation.push('Post', { post: item })}
        >
          <View key={item.id} style={styles.item}>
            <Text>{item.title}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
};

// App/screens/Post.js
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';

import { Text } from '../components/Text';
import colors from '../constants/colors';

const styles = StyleSheet.create({
  ...
});

export const Post = ({ route }) => {
  const post = route?.params?.post;
  const [comments, setComments] = React.useState([]);

  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/comments?postId=${post.id}`)
      .then(res => res.json())
      .then(response => {
        setComments(response);
      });
  }, []);

  return (
    <ScrollView style={styles.container}>
      <Text type="header">{post.title}</Text>
      <Text>{post.body}</Text>
      {comments && comments.length > 0 && (
        <>
          <Text type="header" style={{ marginTop: 20 }}>
            Comments
          </Text>
          {comments.map(comment => (
            <View key={comment.id} style={styles.item}>
              <Text>{comment.body}</Text>
              <Text>{comment.email}</Text>
            </View>
          ))}
        </>
      )}
    </ScrollView>
  );
};

Let’s fetch it with React Query instead.

Configuring React Query

One of the great things about React Query is that it’s just one dependency. If you know me you know I like to minimize dependencies.

And, since it’s purely JS, you only need to worry about installing it from NPM.

npm install --save react-query

Once that’s complete we need to set up the QueryClient and QueryClientProvider. These are used to manage the "magic" that React Query provides us (such as caching).

So, at the root of my project, I’m going to set up the provider:

// App/index.js

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { QueryClient, QueryClientProvider } from 'react-query';

import { Main } from './navigation/Main';

const queryClient = new QueryClient();

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <NavigationContainer>
        <QueryClientProvider client={queryClient}>
          <Main />
        </QueryClientProvider>
      </NavigationContainer>
    </>
  );
}

Posts Query

With that done let’s migrate over the request that grabs all of the posts.

// App/screens/List.js

import React from 'react';
import { View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { useQuery } from 'react-query';

// ...

export const List = ({ navigation }) => {
  /*
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(response => {
        setData(response);
      });
  }, []);
  */
  const { data } = useQuery('posts', () =>
    fetch('https://jsonplaceholder.typicode.com/posts').then((res) =>
      res.json()
    )
  );

  // ...
};

You can see the difference there (unchanged code is removed for brevity).

The code is a little bit more succinct but that’s not the main benefit of React Query.

As you can see with useQuery the first argument is a simple string. This caches and tracks the result of that query.

It’s important to note that the key needs to be unique to that request (to https://jsonplaceholder.typicode.com/posts).

The second argument is how we actually get the data. It either needs to resolve data or throw an error.

But still, the caching isn’t the only benefit here…

The initial fetch implementation was super basic. We don’t manage:

• request states (loading, fetching, error)
• errors

Let alone refetching data or caching it.

And guess what! That’s all stuff that React Query gives you for free.

If we take a look at the object returned from userQuery we can see all that is available to us

Comments Query

The comments query is a little bit more complex… Let’s get it set up.

// App/screens/Post.js

import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { useQuery } from 'react-query';

// ...

export const Post = ({ route }) => {
  const post = route?.params?.post;
  /*
  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/comments?postId=${post.id}`)
      .then(res => res.json())
      .then(response => {
        setComments(response);
      });
  }, []);
  */

  const { data: comments } = useQuery(['comments', post.id], () =>
    fetch(
      `https://jsonplaceholder.typicode.com/comments?postId=${post.id}`,
    ).then(res => res.json()),
  );

  return ...;
};

Syntax is a bit different here… why? Well the query key (the first argument to useQuery) can be anything serializable (string, array, object). So in this case we’re creating a key that will cache comments per post (rather than globally).

Let’s try this out… I’m going to turn on Network Link Conditioner (which you can learn more about in our post about progressive image loading) so I have a painfully slow connection.

Watch the gif below… what do you see?

When we make our first request to a post’s comments the request is slooow. But when we make our second request? Instant!

Why?

Because we’re not making a request — we’re using cached data. Caching we get for free from React Query.

We just barely scratched the surface of React Query today but I’m finding it to be a powerful library that handles a lot of the simple, and not so simple, things that need to be done when making remote data requests.

Be sure to dive into the official docs. I’m struggling to find a reason why not to use this library.

Questions/comments/concerns? Let us know on Twitter.

Final code.

Originally published at https://www.reactnativeschool.com.

How to Get Started with React Query — Migrate from Fetch was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

Interaction

In order to rotate a view as you drag it, it is required to get information about where you touch and drag. PanResponder in React Native makes you able to do it. Here’s a simple example of interactive view:

As you drag the view, handlePanResponderView function is consistently called and change the style of the view: rotateX and rotateY. dx and dy are the distance of the gesture since your touch started and we want to rotate the view further as you drag further. Simply, rotateX and rotateY can be set as dx and dy. Don’t forget that rotateX and rotateY takes only string format of ‘XXdeg’.

dx and dy are assigned to y and x respectively since the view will rotate horizontally around y-axis as it is dragged horizontally and vice versa. Similarly, the reason of additive inverse of dy shown in line number 27, is to make the view rotate in the same direction of your touch. It is totally up to you how you will rotate it!

Using setNativeProps method upon the view, it is possible to directly change its style without using state/prop and triggering a re-render of the entire subtree, which is useful regarding performance especially when we are about to change the style rapidly as dragging. This is s0-called direct manipulation.

Cool! Now, it rotates in three-dimensional space following your gesture. Have you noticed it is rotating around it’s center in xy-plane? Yes, it is the default origin where rotateX and rotateY use. In order to achieve cube-like rotation, we will shift it’s origin somewhere behind it in z-axis. Forget rotateX and rotateY from now on, but rather, we are going to use matrix.

Shifting Origin

React Native supports matrix in Transforms where you can change origins. If you are not sure about how rotation matrix works, I recommend you to read this post first which was mentioned earlier.

Since it is rotating about two arbitrary axes, the following general rotation matrix will be used. Don’t freak out. It is a simple plugging-in work. You can plug in zero to one of three variables: alpha, beta, and gamma.

Here, I have plugged in zero to gamma and assigned dx and dy to alpha and beta which are rotation degree in x and y axes respectively.

Similar to rotateX method used in react-native-foldView, this rotateXY will spin a view around x and y axes. Then, this method suppose to be invoked as you drag.

Considering the square as the front side of a cube, its origin should fall back half-length of the side in z-axis. Now, it is ready to spin the square around shifted origin! Here is the demo:

Comparing this to the previous, it is clear that it rotates around its origin shfited back by half-length of the side in z-axis. Let’s fill the other sides too.

Since dx and dy we are assigning to rotateXY method can be considered as rotation degrees, you can render left, right, and back side of a cube by simply adding -90, 90, and 180 to dx respectively. Here’s the demo again:

It is a little different story for rendering the top and bottom. If you render them by simply adding and substituting 90 to dy, it won’t rotate as you expected since they are on different plane. I used xz-plane by plugging in zero to beta from the general rotation matrix shown above. Here’s another rotate method for the top and bottom.

Add the following gist in your handlePanResponder method and your top and bottom views will spin perfectly.

Perfect! Were you able to play with the cube I have shown in the first demo? You can check the complete code here for your convenience.

Implementing Cube in React Native was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

Faster downloads, lower latencies, disconnect tolerance, now in your iOS/Android and react-native app!

Wait, there is an HTTP3?

Currently in a draft stage, IETF and the QUIC working group are working on finishing HTTP3 and the QUIC specification.

In the simplest of terms, HTTP3 is HTTP2 over QUIC.

So what exactly is QUIC?

QUIC is a network layer protocol implemented over UDP. Simply put, QUIC is an improvement over TCP. It provides much of what TCP does, i.e. a reliable network channel that handles losses, reordering, retransmission, and congestion control/fairness. On top of that, QUIC also provides:

• Dramatically reduced connection establishment time
• Improved congestion control
• Multiplexing without head of line blocking
• Forward error correction
• Connection migration

This results in high performance in high latency channels, such as those on mobile devices. You can learn more about the advantages of using QUIC here:

Here is my own test implemented in react-native to compare cronet performance on a high latency, low bandwidth channel.

What is Cronet?

The best description comes from the Cronet README:

Cronet is the networking stack of Chromium put into a library for use on mobile. This is the same networking stack that is used in the Chrome browser by over a billion people. It offers an easy-to-use, high performance, standards-compliant, and secure way to perform HTTP requests. Cronet has support for both Android and iOS.

Cronet is a very well implemented and tested¹ network stack that provides almost everything that a standard app needs from a network layer library, things like DNS, Cookies, SSL/TLS, HTTP(S), HTTP2, Proxy/PAC, OSCP, Websockets, and F̶T̶P̶ (soon to be removed). It also supports HTTP over QUIC, soon to be called HTTP³². This makes it a very attractive library to use as the network layer for your mobile app.

Who is using it?

Cronet is used by Google Chrome, YouTube, Google App, Google Photos, and Maps — Navigation & Transit.

HTTP3/QUIC is already being used or is in development by facebook (mvfst), Uber, Cloudflare, Fastly, most of GCP Load Balancers and CDN and many more, including Apple, Microsoft, and Mozilla.

How do I use QUIC in my app?

The simplest way is to integrate cronet and have a backend server or CDN or a proxy like cloudflare that supports QUIC. Most google & GCP services including Youtube support QUIC by default. Cloudflare, Akamai, and Fastly support QUIC but needs to be manually enabled.

Using Cronet In Your App

Based on whether your app is a native Android app, native iOS app or a react-native app, jump to the appropriate section.

Using Cronet in Android

If you are starting from scratch, using cronet as the network layer is documented on the android developer docs. You can use it directly instead of using HttpUrlConnection or OkHttp.

It comes down to adding a library dependency in your build.gradle file.

dependencies {
    implementation 'com.google.android.gms:play-services-cronet:16.0.0'
} 

Then checking if cronet is available to use:

CronetProviderInstaller.installProvider(reactContext).addOnCompleteListener(new OnCompleteListener<Void>() {
  @Override
  public void onComplete(@NonNull Task<Void> task) {
    if (task.isSuccessful()) {
      // Setup your code to use cronet here.
    }
  }
});

After that follow the instructions to create an instance of the engine and send a request.

Using Cronet in Android using OkHttp

If you already have an app, you are likely using OkHttp and very likely don’t want to rewrite every piece of code that interacts with the OkHttp API.

Fortunately, it is possible to use cronet with OkHttp. Follow the steps above and then, depending on what other libraries you use, follow one of the two steps below.

1. If you are using Retrofit. You can use Retrofit.Builder.callFactory to pass in a custom call factory that you can write that works with cronet.

An example implementation is available here: RNCronetOkHttpCall.java

2. If you are NOT using Retrofit, you can use an OkHttp interceptor to make cronet work for you. This is a less ideal solution, but works mostly fine.

An example implementation is available here: RNCronetInterceptor.java

Note: Though the files says RN, the code doesn’t use anything react-native specific.

Using Cronet in iOS

Although cronet works perfectly fine on iOS, it lacks substantial documentation. You can get started by reading Cronet.h and cronet_consumer sample code. However, once built, using cronet is much easier on iOS than Android.

Cronet is not officially available as a framework or cocoapod, but you can build it from source following the build instructions. For your convenience, I have created a podspec that you can include:

pod 'Cronet', '78.0.3888.patch.0.pre'

After this you can initialize the engine and have NSURLSession and NSURLConnection use cronet internally. This is fairly straightforward to do:

#include <Cronet/Cronet.h>

...

[Cronet setHttp2Enabled:YES];
[Cronet setQuicEnabled:YES];
[Cronet setBrotliEnabled:YES];
[Cronet setHttpCacheType:CRNHttpCacheTypeDisk];

[Cronet addQuicHint:@"www.google.com" port:443 altPort:443];

[Cronet start];

[Cronet registerHttpProtocolHandler];

Sample code to get you started is here: AppDelegate.m

Using Cronet in React Native

I have made a react-native library that should make using cronet very simple. Just add it into your package.json

yarn add react-native-cronet

That is all you need to do for iOS.

On Android, you need to configure Fresco to also use it by adding the following in your MainApplication.java. This depends on a PR waiting to be merged in react-native-community/cli. In the meantime, you can use patch-package with that patch.

import com.akshetpandey.rncronet.RNCronetFrescoImagePipelineConfig;
import com.facebook.imagepipeline.core.ImagePipelineConfig;
import com.facebook.react.shell.MainPackageConfig;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected List<ReactPackage> getPackages() {
      ImagePipelineConfig pipelineConfig = RNCronetFrescoImagePipelineConfig.build(getApplicationContext());
      MainPackageConfig config = new MainPackageConfig.Builder().setFrescoConfig(pipelineConfig).build();
      List<ReactPackage> packages = new PackageList(this, config).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new RNCronetNetworkingPackage());
      return packages;
    }
  }
}

¹- What is a better way to test a network stack than in Chrome, whose primary job is to fetch assets and data over the network and display them to the user?

²- QUIC is a general purpose transport layer network protocol built on top of UDP with a user space congestion control and packet loss recovery algorithm that is still being improved. HTTP3 is an application layer protocol that speaks HTTP over QUIC.

Hire Me

I am looking for new opportunities, you can learn more about me on LinkedIn and see more of my work on GitHub

Using HTTP3/QUIC with Cronet In Your Mobile App was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

I had the opportunity to talk about this during a lightning talk at react-europe 2019 so if you’re more of a video type of person: here you go!

Being a React Native developer has been a great experience lately. More and more bugs I was facing are getting fixed and React Native itself is about to get to the next level.

But I always had some really specific things I couldn’t be satisfied with the way they were. It went from rendering Markdown, to navigating from screens to screens, to fetching data declaratively, etc.

Today we’ll be talking about a new problem I’ve been dealing with lately: modals.

The Context 🧐

Modals are the most common UI elements we use as developers. As soon as we want to display an error, loading, success state, any important message or a specific part of your app: they’re more often than not the answer to our question.

When I talk about modals, in this particular context, you could also consider alert, dialog, popup, etc as valid synonyms.

In the case of mobile applications, it’s fair to say that modals are even more important/used than on the web. Alerts, errors, date pickers, time pickers, etc all of them could be labeled as modals.

As of today, I’ve mainly tried 2 tools that help you display modals: React Native’s Modal component and React Native Community’s react-native-modal. These two are great solutions! Modal uses nativeRCTModalHostView component and react-native-modal uses Modal under the hood and it’s fair to say that: they get the job done.

However, they didn’t quite match our needs, as we’re about to see in the following section.

The Problems 🤒

One day, Irem Lopsum, coworker and good friend of mine came to me with a problem:

“I can’t find a React Native modal library that just get the job done properly.”

We’re working together at colorfy (a design studio based in Berlin and specialized in IoT hardware & software) and I’ve seen him working one very specific app that exacerbated this need. That app has extensive use of modals and dealing with several <Modal /> components, updating local states to toggle their visibility, changing their content, etc: it was just too cumbersome. That’s why his main requirement was:

1. “Write once, call from anywhere with minimal effort.”

Next issue (and maybe the most complex one) one was the impossibility of displaying several modals and stacking (😉) them. This sentence may not make a lot of sense, “why would you display multiple modals at once ?!”, but bear with me for this one: we needed it! Unfortunately, both React Native’s Modal and react-native-modal can’t do that (mainly because of how RCTModalHostView they both use works). But this was actually the second requirement:

2. “Ability to render multiple modals and stack them.”

Last one: animations. We really loved the fact that react-native-modal allows you to define your own custom animations (through react-native-animatable). However, besides the amazing work done by the community with React Native Animatable, we felt that that approach was still a bit too complicated for what we were starting to have in mind.

As you may have understood, by that time, we already had a pretty solid idea of what we wanted to have and we actually found a perfect example of the API we’d like to have: React Navigation’s! I’m going to explain why in the next section of this article, but getting inspiration from React Navigation’s API would tick a lot of boxes. It would also help us match another requirement that we couldn’t with the 2 abovementioned existing solutions:

3. “Easy control over transitions and animation relationship between modals within the stack.”

All of this so that we could have “overall flexibility to not be limited with what one can do” as Irem Lopsum told me. You control what’s rendered, how, when, from start to finish and even after that (stacking!). And after a few days of hacking, failing, bouncing ideas back and forth, we finally came up with something that totally satisfied both of us.

The Solution 💡

React Native Modalfy!
This is our answer to all the problems Irem Lopsum was facing. The API we came up with is something that we hope you’ll see as:

Simple, fast to implement yet totally flexible.

Using react-native-modalfy could be summed up in 3 steps:

1. You add <ModalProvider />

It’s a normal Provider that’s going to give you access to your modal across your whole app thanks to React’s Context API.

2. You set up your stack with createModalStack()

This is where all the magic happens. You’ll have to set up all your modals so that the library can access them before render time. From there you’ll feed ModalProvider the output ofcreateModalStack() through it’s only variable: stack. If you’re familiar with React Navigation, this API might actually ring a bell and that’s why we took inspiration from it: looked really straightforward to us!

3. You use your modals with openModal() / closeModal()

From there you can open as many modal as you want from wherever you want in your app. React Native Modalfy lets you use this function (and other things) from the modal prop. You can access this prop from your modal component props, or if you’re anywhere else in your app, just use withModal HOC or useModal hook to get the job done!

And that’s it! While still being really simple to set up, React Native Modalfy gives you so much flexibility on where to display your modals, what to display and even how, as we gonna see in a minute!

Examples 🔬

As I mentioned above, the most interesting part of the library is what createModalStack() allows you to do. I gave you a little glimpse of what it could do earlier but here it is in full bloom:

And I want to bring your attention over transitionOptions because you can have a lot of fun with this one. It basically sets transitions based on the animated value React Native Modalfy uses under the hood to animate your stack. Based on that animated value, you’ll be able to setup custom interpolations that will be applied to your modal component.

So let me illustrate with a few examples what you can achieve with that and how easy it would be:

or you could do something like:

maybe a little bit of:

and how about:

As you can see: your imagination is the only limit! All this only took Irem Lopsum between 35 and 40 lines of code. As soon as you know how to use React Native styles and interpolation: that’s it, you’re good to go! 🙌

And that’s it, folks! We’re totally opened to any feedback, idea, critic, PR you may have. Just chime in on the repo or ping us @Charles_Mangwa/@iremlopsum. Until then, simply run yarn add react-native-modalfy and have fun!

What & why

Oh btw! If you’re interested: colorfy is actively hiring in Berlin! We’re looking for people into React Native, but also back-end, marketing, product design, hardware, project management, and even more. Just check out our careers section and maybe see you there soon (tell them Charles sent you 😁)!

Jobs - colorfy

Stacks on stacks in React Native was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

Nothing beats getting real feedback from your users — but how should you go about capturing that feedback? In this tutorial we’ll discuss when you should prompt them, how you should prompt them, and what tools you can use to capture that feedback.

This tutorial was originally published on React Native School. Give it a visit if you want to see 75+ React Native tutorials!

I’ve got a pet peeve — when apps ask for feedback/a review at bad times/in bad ways:

• When I first open the app
• In the middle of an important action (like checking out)
• They hijack my screen and don’t let me do anything unless I do their feedback thing

Thanks to Instabug for sponsoring this lesson! If you’re looking for an all-in-one solution to capture user feedback, bug reports, crash reports, and more check them out! I’ll have more info on how you could use them in the context of capture user feedback later in the lesson.

Good Times & Ways to Ask for Feedback

Before we get into the hands on part, lets just drop a few times/places you could ask for feedback and get good responses:

1. When the user completes an important action (like checking out). This means detecting when an action is complete and not just asking for feedback after a given amount of time.
2. When they take a similar action many times. Say your app gives them a random joke. Say they’ve pressed the “New Joke” button 15 times. That would be a good opportunity to ask why they aren’t rolling on the floor gasping for air from your quality jokes you jacked from the latest Netflix stand up special.
3. When they’re vigorously shaking their phone out of frustration. Maybe ask if they’re having issues? I mean how often do you see people shaking their phone out of joy?

Navigation Setup for Capturing User Feedback

What’s this look like in practice? Let’s look at it.

The Example App

First we’ll set up our example app. It’s a revolutionary new app called Clargue that will, on demand, generate a random color for you. Here’s the code we’re starting with.

import React from 'react';
import { Text, View, Button, AsyncStorage } from 'react-native';
import randomColor from 'random-color';
import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
} from 'react-navigation';

class RandomColor extends React.Component {
  state = {
    backgroundColor: randomColor().hexString(),
  };

  newColor = () => {
    this.setState(state => ({
      backgroundColor: randomColor().hexString(),
    }));
  };

  signOut = () => {
    AsyncStorage.removeItem('isOnboarded');
    this.props.navigation.navigate('Onboarding');
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: this.state.backgroundColor,
        }}
      >
        <View
          style={{
            backgroundColor: 'rgba(255, 255, 255, 0.5)',
            borderRadius: 10,
            paddingHorizontal: 10,
            paddingVertical: 5,
          }}
        >
          <Text
            style={{
              fontSize: 20,
              color: '#000',
            }}
          >
            {this.state.backgroundColor}
          </Text>
        </View>
        <Button title="New Color" onPress={this.newColor} />
        <Button title="Sign Out" onPress={this.signOut} />
      </View>
    );
  }
}

class Entry extends React.Component {
  componentDidMount() {
    AsyncStorage.getItem('isOnboarded').then(isOnboarded => {
      if (isOnboarded == 'true') {
        this.props.navigation.navigate('Main');
      } else {
        this.props.navigation.navigate('Onboarding');
      }
    });
  }

  render() {
    return null;
  }
}

const Onboard1 = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{ fontSize: 30, marginBottom: 10 }}>Welcome to Clargue</Text>
    <Text>The Biggest Innovation in</Text>
    <Text>Random Color Generation</Text>
    <Button
      title="Learn More"
      onPress={() => navigation.navigate('Onboard2')}
    />
  </View>
);

const Onboard2 = ({ navigation }) => (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 40,
    }}
  >
    <Text style={{ marginBottom: 30 }}>
      We use big data and machine learning to get money from investors...
    </Text>
    <Text>and a basic algorithm from Github to select your colors.</Text>
    <Button
      title="Get Started"
      onPress={() => {
        AsyncStorage.setItem('isOnboarded', 'true');
        navigation.navigate('Main');
      }}
    />
  </View>
);

const Navigator = createSwitchNavigator({
  Entry: {
    screen: Entry,
  },
  Onboarding: createStackNavigator(
    {
      Onboard1: {
        screen: Onboard1,
      },
      Onboard2: {
        screen: Onboard2,
      },
    },
    {
      headerMode: 'none',
    }
  ),
  Main: {
    screen: RandomColor,
  },
});

export default createAppContainer(Navigator);

The Feedback Screen

You can present the request for feedback/bug report/review in a variety of ways. I think the easiest is going to be by adding a global modal screen that you can access and present from anywhere in your app. For our app I’ll do this by creating a new screen (which in a real situation would likely have a form of some sort) and then adding a stack navigator as our new root navigator.

// ...

const Navigator = createSwitchNavigator({
  Entry: {
    screen: Entry,
  },
  Onboarding: createStackNavigator(
    {
      Onboard1: {
        screen: Onboard1,
      },
      Onboard2: {
        screen: Onboard2,
      },
    },
    {
      headerMode: 'none',
    }
  ),
  Main: {
    screen: RandomColor,
  },
});

const FeedbackForm = () => (
  <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 40 }}>
    <Text>
      How are you liking Clargue? We'll use your feedback to file an issue on
      the open source library - but don't worry! We'll say it's a priority
      because our business depends on a fix!
    </Text>
  </View>
);

const Modals = createStackNavigator(
  {
    Navigator: {
      screen: Navigator,
    },
    Feedback: {
      screen: createStackNavigator({
        FeedbackForm: {
          screen: FeedbackForm,
          navigationOptions: ({ navigation }) => ({
            headerTitle: 'Feedback',
          }),
        },
      }),
    },
  },
  {
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(Modals);

With this setup we can now open the Feedback screen from anywhere in our app via this.props.navigation.navigate('Feedback') and it will appear over top of the current screen.

Presenting Feedback Form after a Given Number of Actions

We’ll just cover one of the scenarios I outlined before: requesting feedback after a given number of actions.

We’ll just do it based on actions in a single component but you could do this on a larger scale. Say you want to ask for feedback after 20 total actions instead of 5 single actions. You could track the number of actions in Redux/Context/whatever and as that value hits the desired number prompt them (just don’t do it if they’re doing something important)!

All I’m going to do is increment a clickCount on state whenever they take an action. When it hits my desired number it will reset the number and open the feedback screen.

// ...

class RandomColor extends React.Component {
  state = {
    backgroundColor: randomColor().hexString(),
    clickCount: 0,
  };

  newColor = () => {
    if (this.state.clickCount > 5) {
      this.props.navigation.navigate('Feedback');
      this.setState({ clickCount: 0 });
    } else {
      this.setState(state => ({
        backgroundColor: randomColor().hexString(),
        clickCount: state.clickCount + 1,
      }));
    }
  };

  // ...
}

// ...

Give the User a Way Out

Finally, don’t forget to give the user a clear way to get out of submitting feedback! Maybe that don’t have the time, don’t want to, or just don’t know WTF is going on. Make it clear to get out. Leave a good impression.

Remember, you’re building an app that provides value to them. Feedback/reviews will come eventually. Don’t force it.

That said, let’s add a close button to the header.

const Modals = createStackNavigator(
  {
    Navigator: {
      screen: Navigator,
    },
    Feedback: {
      screen: createStackNavigator({
        FeedbackForm: {
          screen: FeedbackForm,
          navigationOptions: ({ navigation }) => ({
            headerTitle: 'Feedback',
            headerRight: (
              <Button title="Close" onPress={() => navigation.pop()} />
            ),
          }),
        },
      }),
    },
  },
  {
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(Modals);

Making Life Easier: Outsourcing Feedback & Bug Report Capturing

Obviously this is just one part of capturing feedback and bug reports. You also need to setup something on the backend to capture that feedback and present it to developers/product owners. That’s more work for you and more code for you to maintain.

I like to keep my focus on the product I’m building, not so much the support system that keep things going. Capturing feedback and bug reporting is one of those things that’s necessary but I don’t want to build.

That’s why I reach for tools like Instabug to handle that for me. Not only can you capture user feedback and bug reports but also use it to detect production exceptions and crashes — an absolutely critical piece of the puzzle for any production app.

I’ve been happy with their service — it works when I need it and stays out of the way the rest of the time.

If you’re interest in seeing how to actually integrate and use their service check out the How to Debug React Native Apps in Development and Production class here on React Native School!

Links & Resources

• Instabug
• Detecting Device Shake

Final Code

import React from 'react';
import { Text, View, Button, AsyncStorage } from 'react-native';
import randomColor from 'random-color';
import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
} from 'react-navigation';

class RandomColor extends React.Component {
  state = {
    backgroundColor: randomColor().hexString(),
    clickCount: 0,
  };

  newColor = () => {
    if (this.state.clickCount > 5) {
      this.props.navigation.navigate('Feedback');
      this.setState({ clickCount: 0 });
    } else {
      this.setState(state => ({
        backgroundColor: randomColor().hexString(),
        clickCount: state.clickCount + 1,
      }));
    }
  };

  signOut = () => {
    AsyncStorage.removeItem('isOnboarded');
    this.props.navigation.navigate('Onboarding');
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: this.state.backgroundColor,
        }}
      >
        <View
          style={{
            backgroundColor: 'rgba(255, 255, 255, 0.5)',
            borderRadius: 10,
            paddingHorizontal: 10,
            paddingVertical: 5,
          }}
        >
          <Text
            style={{
              fontSize: 20,
              color: '#000',
            }}
          >
            {this.state.backgroundColor}
          </Text>
        </View>
        <Button title="New Color" onPress={this.newColor} />
        <Button title="Sign Out" onPress={this.signOut} />
      </View>
    );
  }
}

class Entry extends React.Component {
  componentDidMount() {
    AsyncStorage.getItem('isOnboarded').then(isOnboarded => {
      if (isOnboarded == 'true') {
        this.props.navigation.navigate('Main');
      } else {
        this.props.navigation.navigate('Onboarding');
      }
    });
  }

  render() {
    return null;
  }
}

const Onboard1 = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{ fontSize: 30, marginBottom: 10 }}>Welcome to Clargue</Text>
    <Text>The Biggest Innovation in</Text>
    <Text>Random Color Generation</Text>
    <Button
      title="Learn More"
      onPress={() => navigation.navigate('Onboard2')}
    />
  </View>
);

const Onboard2 = ({ navigation }) => (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 40,
    }}
  >
    <Text style={{ marginBottom: 30 }}>
      We use big data and machine learning to get money from investors...
    </Text>
    <Text>and a basic algorithm from Github to select your colors.</Text>
    <Button
      title="Get Started"
      onPress={() => {
        AsyncStorage.setItem('isOnboarded', 'true');
        navigation.navigate('Main');
      }}
    />
  </View>
);

const Navigator = createSwitchNavigator({
  Entry: {
    screen: Entry,
  },
  Onboarding: createStackNavigator(
    {
      Onboard1: {
        screen: Onboard1,
      },
      Onboard2: {
        screen: Onboard2,
      },
    },
    {
      headerMode: 'none',
    }
  ),
  Main: {
    screen: RandomColor,
  },
});

const FeedbackForm = () => (
  <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 40 }}>
    <Text>
      How are you liking Clargue? We'll use your feedback to file an issue on
      the open source library - but don't worry! We'll say it's a priority
      because our business depends on a fix!
    </Text>
  </View>
);

const Modals = createStackNavigator(
  {
    Navigator: {
      screen: Navigator,
    },
    Feedback: {
      screen: createStackNavigator({
        FeedbackForm: {
          screen: FeedbackForm,
          navigationOptions: ({ navigation }) => ({
            headerTitle: 'Feedback',
            headerRight: (
              <Button title="Close" onPress={() => navigation.pop()} />
            ),
          }),
        },
      }),
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
  },
  {
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(Modals);

Best Practices for Capturing User Feedback in React Native was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post I would like to walk you through how to add a support of deep linking to your React Native application. I would like to tell you about a react-native-deep-link, a package written by me, created to reduce amount of code needed to implement this functionality. The package allows you to concentrate on writing application logic.

In this tutorial I am going to write a simple “Colors” application using react-native-deep-link package. The app will be able to handle incoming urls, containing the name of a color, and navigate a user to a screen of the corresponding color.

Before we start I would like to explain what deep linking is. Mobile app deep links (also known simply as “deep links”) point to content inside an app. It is useful sometimes to navigate user to a certain screen on app start rather than open a home screen. A general structure of a deep link is the following schemename://path?query_string. Scheme is an equivalent of a protocol in web. It is essential to choose a unique scheme name according to your brand to avoid conflicting schemes across different applications. Real deep links examples: twitter://timeline, fb://profile.

In this application I will be using the next url format example://colors/<color>?textColor=<text_color>, where color and textColor are parameters we will use to configure the appearance of a color screen, color sets a background color of the screen, textColor sets the color of the text with a color name at the center of the screen. I am going to write code for Android platform, but you can run the same code on iOS device, the difference will be shown in the configuration section.

The final code is available here.

Implementing basic components

First of all, we should create a new react-native project.

react-native init example

Then we need to install some packages.

npm i --save redux react-redux react-navigation react-native-deep-link@0.0.3

We will use react-navigation package to add navigation to our application. First of all, we need to add HomeScreen.js file to the project. It will be an initial screen of the application.

// HomeScreen.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Welcome to colors app!
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'stretch'
    },
    text: {
        fontSize: 24,
        marginBottom: 18
    }
});

In our application we want to have a support of deep linking. When we receive a url we want to navigate user to a separate screen with an appropriate background and text at the center of the screen. Let’s add this screen to our project, name this file ColorScreen.js.

// ColorScreen.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const DEFAULT_BACKGROUND_COLOR = 'white';
const DEFAULT_TEXT_COLOR = 'black';

export default class ColorScreen extends Component {
    static navigationOptions = ({ navigation: { state: { params: { color } } } }) => {
        return {
            title: color
        }
    };

    render() {
        const { navigation: { state: { params: { color, textColor }}}} = this.props;

        return (
            <View style={[styles.container, { backgroundColor: color || DEFAULT_BACKGROUND_COLOR }]}>
                <Text style={[styles.text, { color: textColor || DEFAULT_TEXT_COLOR }]}>
                    {color.toUpperCase()}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        fontSize: 54
    }
});

We will use navigation state parameters provided by react-navigation package to pass information about the color and text color to the screen.

// ColorScreen.js

...
const { navigation: { state: { params: { color, textColor }}}} = this.props;
...

So, now we have two screens and we want to add navigation to our project. We need to create a root navigator. Add AppNavigator.js file to the project.

// AppNavigator.js

import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ColorScreen from './ColorScreen';

const AppNavigator = StackNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            title: 'Home'
        }
    },
    Color: {
        screen: ColorScreen
    }
});

export const AppRouter = AppNavigator.router;
export default AppNavigator;

We will add navigation state to redux store. Add reducer.js file to the project with the following code.

// reducer.js

import { AppRouter } from './AppNavigator';
import { combineReducers } from 'redux';

const initialState = AppRouter.getStateForAction(AppRouter.getActionForPathAndParams('Home'));

const navReducer = (state = initialState, action) => {
    const nextState = AppRouter.getStateForAction(action, state);

    return nextState || state;
};

export default combineReducers({
    nav: navReducer
});

We can use created navigator component in our project. Open App.js file created by react-native-cli and replace the content with the following code.

// App.js

import React from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import AppNavigator from './AppNavigator';

function App({ dispatch, nav }) {
    return (
        <AppNavigator navigation={addNavigationHelpers({
            dispatch,
            state: nav
        })}/>
    );
}

const mapStateToProps = (state) => ({
    nav: state.nav
});

export default connect(mapStateToProps)(App);

We have added a reducer, but we have not created a Redux store for the application. Add the follwoing code to index.js file created by react-native-cli.

// index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';
import reducer from './reducer';

const store = createStore(reducer);

function Root() {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
}

AppRegistry.registerComponent('example', () => Root);

Now we can launch the application. But we have not added support of deep linking yet.

Adding deep linking

We are going to use react-native-deep-link package to add support of deep linking to the application.

But do not worry, it is extremely easy, the package will set everything up for us. All we need to do is import a createDeepLinkingHandler function from react-native-deep-link and pass an array of scheme configs to the function. The function will return a higher-order component, we will use it in our App component later. Add file with the following code to the application.

// withDeepLinking.js

import { createDeepLinkingHandler } from 'react-native-deep-link';
import { NavigationActions } from 'react-navigation';

const handleColorScreenDeepLink = ({ params: { color }, query: { textColor }}) => ({ dispatch }) => {
    dispatch(NavigationActions.navigate({
        routeName: 'Color',
        params: { color, textColor }
    }));
}

export default withDeepLinking = createDeepLinkingHandler([{
    name: 'example:',
    routes: [{
        name: '/colors/:color',
        callback: handleColorScreenDeepLink
    }]
}]);

createDeepLinkingHandler takes an array of objects. Each object should be a scheme config, which includes the name of scheme and array of route configs. Each route config has properties name and callback . Callback is a function which will be invoked in case of successful mapping of the deep link url to a route expression specified in property name. Route callback is a higher-order function which receives the result of url parsing and returns a function. This returned function receives component props. A result of url parsing is an object with the next set of properties:

{
    scheme: 'example:',
    route: '/colors/:color',
    query: {}, // Query string parameters
    params: {} // Url parameters
}

In our application we defined one route ‘/colors/:color’ and a callback to handle incoming urls. In this callback we receive color and textColor parameters using params and query provided by react-native-deep-link package.

So ,all we need to do now is to pass App component to withDeepLinking higher-order component.

// App.js

...
import withDeepLinking from './withDeepLinking';

...
// Definition of App component
...

export default connect(mapStateToProps)(withDeepLinking(App));

That is all. Now we take dispatch function provided by connect and pass it to the component returned from withDeepLinking(App). The full code of App.js file.

// App.js

import React from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import AppNavigator from './AppNavigator';
import withDeepLinking from './withDeepLinking';

function App({ dispatch, nav }) {
    return (
        <AppNavigator navigation={addNavigationHelpers({
            dispatch,
            state: nav
        })}/>
    );
}

const mapStateToProps = (state) => ({
    nav: state.nav
});

export default connect(mapStateToProps)(withDeepLinking(App));

Now our application logic is implemented, all we need to do is configure the app.

Configuring Android

Now when we have implemented deep linking we want to test the application. But before it we need to add some code to AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example"
          android:versionCode="1"
          android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
            android:minSdkVersion="16"
            android:targetSdkVersion="22"/>

    <application
            android:name=".MainApplication"
            android:allowBackup="true"
            android:label="@string/app_name"
            android:icon="@mipmap/ic_launcher"
            android:theme="@style/AppTheme">
        <activity
                android:name=".MainActivity"
                android:launchMode="singleTask"
                android:label="@string/app_name"
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter android:label="filter_react_native">
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data android:scheme="example" android:host="colors"/>
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
    </application>

</manifest>

Configuring iOS

First of all, you need to register a URL scheme for your app in your Info.plist. After that you need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

// iOS 9.x or newer
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

Save changes and run the application.

Testing

Now you can send urls to the application using the next command, which you can run in a terminal window.

$ adb shell am start -W -a android.intent.action.VIEW -d “example://colors/green?textColor=red” com.example

Let’s add the list of urls to the home screen of our application. We are going to use Linking.openURL(url) to open them.

// HomeScreen.js

import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Linking } from 'react-native';

const URLS = [
    'example://colors/green',
    'example://colors/%23fff400',
    'example://colors/green?textColor=red'
];

const ListItem = ({ url, onPressItem }) =>
    <TouchableOpacity
        style={styles.listItem}
        onPress={ () => onPressItem(url) }>
        <Text style={styles.listItemText}>{ url }</Text>
    </TouchableOpacity>;

export default function HomeScreen() {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Press one of the links below
            </Text>
            <FlatList
                data={ URLS }
                keyExtractor={(item, index) => index}
                renderItem={({ item }) =>
                    <ListItem onPressItem={ url => Linking.openURL(url) } url={ item } />
                }
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'stretch'
    },
    text: {
        fontSize: 24,
        marginBottom: 18
    },
    listItem: {
        marginBottom: 8
    },
    listItemText: {
        textDecorationLine: 'underline'
    }
});

The final code of this example can be found here.

If you like the react-native-deep-link package, please star it on github!

Do not hesitate to open issues if you face problems using the package, create pull requests and help to improve the package.

Handle deep links in React Native apps was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

2017 is coming to an end and I have one more thing to share with you! Something I’ve been working on for the past 10 months. Something I’m really proud of. Something I’ll be able to think about in 10 years and tell myself: “You did something great there, son”.

🎉 Introducing Spotern: the app that helps you find all the products you’ve seen in movies, series, music clips and TV shows! 🍾

Project: Spotern 🔍

Spotern is a one-year old startup based in Paris, France. Its founder Nicolas got the idea while watching The Girl With The Dragon Tattoo: he really liked the jacket Daniel Craig was wearing in a scene, but didn’t know how or where to find it.

But wait. What if we could have a platform where we could find every single product that appears on screen? And if we don’t find it there: just ask the community to find it for us? Maybe gather some infos about an artist, a movie, a TV series, … in a single place? Well, that’s the 3 core elements of Spotern in a nutshell: Spots, Wanted & Medias.

The team quickly felt the need for a mobile app that could backup the already existing web app. This is where yours truly comes into play.

My mission was to build a mobile app for our 50 000 contributors, on both iOS & Android, using React Native.

I used to work on small iOS-only projects, with other developers helping me, so this one was a big undertaking for me: being all by myself on a project of that scale.

So this post is not going to be particularly technical like my previous ones. This time, I’ll try to write a bit more about how I built things with React Native. I really want to focus here on the tools I used to build Spotern.

Language: JavaScript ⚛️

Spotern is one of those apps that would have been a living nightmare to build solely with native. We had around 30+ screens to implement and doing it twice for both iOS & Android would have been really cumbersome. From there, React Native was probably the most obvious option. I’ve already written a post where I detail some benefits of this framework and (subjectively) compare it to its competitors, back in January.

Tales of a React Native Beginner: After a Year Of Learning

Navigation: React Router Navigation ⛵️

This one also was a simple choice. I’ve been working for a few months with Léo Le Bras on a new router for React Native that allows you to use React Router on mobile apps. Long story short: it’s Just Components™. Components everywhere. Even if we consider it production ready, the router is still in its early age so its not perfect and everything, but we’re working on it. I had the opportunity to give a lightning talk about this during react-europe 2016 (there’s also a full recap in a previous post, if you’re not really a video person):

⛵Thousand Ways to Navigate in React Native

Typing: Flow 🔮

Here we have a subject that’s getting more and more popular in the JavaScript ecosystem: type checking. JavaScript relies on dynamic typing. Hower, for several REasons *winky face*, static typing is becoming a trend. Usually you’ll have 2 options to implement it: TypeScript or FlowType.

I personally opted for Flow because I found it easier to get started with (simply add a `/* @flow */` comment at the top of your .js file), much less obtrusive than TypeScript, it has a better type inference and it can be added gradually to your project file by file.

If you happened to be interested in type checking and want to take it to the next level: you might really be interested in ReasonML 😏. Here is a great talk by bloodyowl that perfectly makes the link between the weaknesses of JavaScript (i.e.: its type system), and how ReasonML solves these problems and much more:

Time: date-fns ⏳

Dates & time are a core element of our app. Especially inside the blog section where articles & categories are sorted by creation date. So: that’s something we don’t want to break, ever.

When we talk about date libraries in JavaScript, Moment.js tends to be the most popular one. It has tons of features & functionalities that lets you do basically anything with dates.

It was my go-to library for the past 2 years, but it has some limitations: mutability, a complex object-oriented API, bundle size, etc. That’s why I switched to date-fns whose key features struck a chord with me: immutable & pure, modular, ship with Flow & TypeScript types and an incredibly simple API.

Instead of writing something like this:

import moment from 'moment'

const randomBirthday = moment("20171031", "YYYYMMDD").fromNow();

I’ll rather go with:

import distanceToNow from 'date-fns/distance_in_words_to_now'

const randomBirthday = distanceToNow(new Date(2017, 10, 31))

Analytics: Fabric 📊

Tracking users’ interactions is a fundamental need of any app in production. After a little benchmark, I started with Firebase which seemed to be the most convenient solution for analytics with React Native. Unfortunately, at some point I faced some conflicts between Firebase’ config, Google SignIn’s config and our back-end auth system.

As a result, I had to remove Firebase and find another solution, which was: Fabric. After being acquired from Twitter by Google back in January 2017, Fabric evolved a lot to become the great tool we have now.

Our marketing team is really happy with the result of this switch: segmentation has never been that easy to configure and visualize, events and categories are pretty simple to generate & track, and the #1 selling point: weekly reports come with emojis!👌 They are so happy with it they are even talking about “also switching the web app analytics system over Fabric”. 😄

Data: React Data Fetching 🎣

Data fetching. That’s probably the core element of any application. I’ve been doing it in a variety of ways in the past but today, I might have found something I really like.

Keeping the Just Components™ state of mind I’ve been using with React Router Navigation, I’ve built a component that fetches data. I find this way of fetching data so convenient that I extracted this component from our codebase, to open source as a standalone library: react-data-fetcher 🎉

A component-driven way to fetch data in React!

This library will probably get its own Medium post when it’ll hit npm, because that’s something I’ve been thinking about for a long time and it’s worth it. I’m still polishing the final details before publishing it, but here is a little glimpse of what you’ll be able to do… 👀

<Fetch
  path={`${API}/${category}/featuredArticles`}
  params={{
    method: ‘POST’,
    body: {
    language: ‘en’,
     start: 0,
     limit: this.state.limit,
     categoryID,
    },
  }}
  refetch={this.state.isRefreshing}
  onLoading={this._renderLoadingModal}
  onFetch={this._saveData}
  onError={this._renderErrorModal}
/>

EDIT 03/15/2018: I just published it!

Introducing React Data Fetching 🎣

Starter: React Native Simple Kit 🚀

When you start working on a React Native project, your first reflex could be to use tools like Expo or create-react-native-app. They work well with iOS and Android, they’re backed by a great community, and are always up-to-date with React Native.

However, there are some apps like Spotern that need something a bit more complex. And as we saw earlier, I’ve already been using a lot of custom tools. So while working on this app, I felt the need for a handcrafted starter kit that could help me with my future projects. That’s why I’m thrilled to introduce another open source project that comes from my work at Spotern:
react-native-simple-kit 🎉.

Get started with React Native and Redux with no effort!

I’ll let you discover the boilerplate in the README.md but the idea is to have right out of the box, a starter with all the components, helpers, unit tests, project structure, Redux & ESLint configs I need for any React Native app I could possibly be working on. This boilerplate represents pretty well how I usually build my apps now. Let me know what you think about it!

That’s all folks! Spotern is now available on both iOS and Android: dont hesitate to give it a try and give me your feedback! Feel free to contact me here or on Twitter @Charles_Mangwa to share your thoughts about the article and the app. Anyhow I’ll hope you’ll like what you’ll see!

• Spotern - Watch It, Get It - Android Apps on Google Play
• Spotern - Watch It, Get It on the App Store

📺 Introducing Spotern App — Get Any Product You’ve Seen On TV with React Native! was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introducing the easiest way to find React Native developers & get hired as a React Native developer.

At Handlebar Labs I train people to become React Native developers. Part of that training is exchanging emails with the students to help them through any of the material. Once someone has worked through a course one of the most common questions I receive is

Do you know of any companies looking to hire React Native developers?

And I do! Because another question I often receive is

Do you know of any developers looking for React Native work?

I get at least a dozen of these emails per week and I try my best to link up developers and companies but I inevitably miss some (probably a lot). I want to reduce the number of missed connections that could have resulted in great working relationships because of me.

That’s why I put together Work React Native last night.

Work React Native

It’s a simple & free service to connect developers with companies.

I’m a developer looking for React Native work

Sign up for the email list and every Monday I’ll send you a list of positions added that week. Each position will have a position title, position description, and link to get in touch with the person/company. That’s it.

I’m a company looking for a React Native developer

Fill out the Google form with the required info (title, short description, and url to reach you) and your position will be sent out the following Monday. If you don’t find the right developer that week fill out the form again and it will be shared again.

That’s it. Nothing fancy. Completely free. I put it together to help people find work, reduce my email volume (I’m already slow to reply), and help reduce the email volume of others who receive similar questions.

I hope it will help you find some React Native work/developers! If you think it will benefit someone else be sure to recommend/clap for this article & share it to increase visibility.

👋

How to Hire React Native Developers & Find React Native jobs was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

Reading and writing from the clipboard is incredibly easy in React Native by using the Clipboard API. In this quick tutorial we’ll build a simple app to read and write to it.

Starting App

To keep this tutorial simple we’ll start with a very basic app. It’s got two buttons, a TextInput, and some areas to render text.

Reading from the Clipboard

Let’s say you want to copy a password from the user’s clipboard — unless that text is going into an input the user can’t press and hold to copy it so we want to give them a simple button to copy it instead.

That’s where Clipboard.getString() comes in. This function returns a promise with either the value or an error.

First, make sure you import { Clipboard } from 'react-native';.

You can handle promises a few different ways but I’ll be opting to use async/await because it keeps are code very succinct.

Everything is already wired up (the button press will call the readFromClipboard function) so we can just focus on interacting with the Clipboard API.

Since we’re using async/await we need to put async in front of our function.

readFromClipboard = async () => {
  alert('TODO: Read from Clipboard'); 
};

Then inside that function we’ll get the clipboard value and save it to state. Since getString is a promise we need to wait for that value, which we can do by using the await keyword.

readFromClipboard = async () => {   
  const clipboardContent = await Clipboard.getString();   
  this.setState({ clipboardContent }); 
};

That will then display the contents of the keyboard below “Clipboard Contents:”!

Try copying a contact’s name and the pasting it in the app.

Writing to the Clipboard

Writing to the clipboard is almost exactly the same so I’ll keep this one more brief. Once we successfully write to the clipboard we’ll alert that we did so to the user.

Note: The user could just as easily copy the value directly from the input, but where’s the fun in that?

First, make the function work with the await keyboard by putting async in front of it.

writeToClipboard = async () => {   
  alert('TODO: Write to the Clipboard'); 
};

We then want to write the value in our input to the clipboard and alert the user once it’s completed.

writeToClipboard = async () => {
  await Clipboard.setString(this.state.text);
  alert('Copied to Clipboard!');
};

Go ahead and copy something from your app, paste it into another app, or copy it to the clipboard and then read it from the code we wrote in the previous section!

And there we go! It’s a very simple API to work with but sometimes an example helps.

If you’re interested in learning other pieces of React Native — such as component design, navigation, redux, redux sagas, and more — check out my free course! It’ll save you a ton of time.

React Native Basics: Copy to Clipboard was originally published in The React Native Log on Medium, where people are continuing the conversation by highlighting and responding to this story.