Building a Chat App with React Native and Firebase

In this tutorial series , I’ll be showing you how to build a functional and secure chat app using the latest React Native libraries, the Expo framework, and Firebase, powered by the ChatKitty platform.

Very complete I must say. Must have taken an ton of work to write.

Building a Chat App with React Native and Firebase (Part 1) →

The Ultimate Guide to React Native Optimization

The folks over at Callstack have published a series on React Native Optimization:

In this and the following articles, we will show you how to optimize the performance and stability of your apps. Thanks to the practices described in the guide, you will improve the user experience and speed up the time-to-market of your apps.

The whole guide is divided into 18 articles, which will be published regularly. Over time, all these articles will be collected in one place and made available as one large ebook for download.

By now 5 parts have been published online so far:

  1. Reducing the device’s battery usage with UI re-renders
  2. The best practices around using dedicated higher-ordered React Native components
  3. Picking external libraries
  4. Choosing Libraries optimized for mobile
  5. Find the balance between native and JavaScript

Well worth a read!

React Native 0.62 and Flipper

In this post Andréas Hanss gives us a tour on Flipper.

Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface.

To add flipper support to your React Native project, I recommend the “Add Flipper Support” section from the Upgrade to React Native 0.62 guide.

Flipper – Extensible mobile app debugger →
React Native 0.62 and Flipper Will Change Your Mobile Development Experience and make it easier! →

💵 This linked article is stuck behind Medium’s metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium’s ridiculous reading limit.

React Native Bottom Sheet (Slide Up Panel)

A common pattern in Mobile Apps is to have a Bottom Sheet / Slide Up Panel. React Native Slack Bottom Sheet is a wrapper around Slack’s native PanModal component for iOS.

import SlackBottomSheet from 'react-native-slack-bottom-sheet';

<SlackBottomSheet
 topOffset={100}
 unmountAnimation={false}
 initialAnimation={false}
 presentGlobally={false}
 backgroundOpacity={0}
 allowsDragToDismiss={false}
 allowsTapToDismiss={false}
 isHapticFeedbackEnabled={false}
 blocksBackgroundTouches={false}
 interactsWithOuterScrollView
>
 <View style={StyleSheet.absoluteFillObject}>
   <ScrollView>
     <Lorem />
   </ScrollView>
 </View>
</SlackBottomSheet>

React Native Slack Bottom Sheet →
PanModal →

💁‍♂️ If you’re looking for a slide up panel that also works on Android check out rn-sliding-up-panel, a pure JS implementation.

Note that it will require some tweaking before you get a somewhat similar result like its native counterpart. — I remember it took me quite some time to get everything right while working on the EV-Point App.

😅 Still an Ionic 1 Developer? I once created a similar component for it. It didn’t feel natural at all because the gestures weren’t implemented properly (because: Deadlines™). Eventually we implemented in the project I was then working on, but without the ability to manually drag it.

react-native-ble-plx – React Native Bluetooth Low Energy (BLE) library

This is React Native Bluetooth Low Energy library using RxBluetoothKit and RxAndroidBle under the hood.

scanAndConnect() {
    this.manager = new BleManager();

    // Wait for PoweredOn state

    this.manager.startDeviceScan(null, null, (error, device) => {
        if (error) {
            return;
        }

        // Check if it is a device you are looking for based on advertisement data
        // or other criteria.
        if (device.name === 'TI BLE Sensor Tag' || 
            device.name === 'SensorTag') {
            
            // Stop scanning as it's not necessary if you are scanning for one device.
            this.manager.stopDeviceScan();

            // Proceed with connection.
            device.connect()
                .then((device) => {
                    return device.discoverAllServicesAndCharacteristics()
                })
                .then((device) => {
                   // Do work on device with services and characteristics
                })
                .catch((error) => {
                    // Handle errors
                });
        }
    });
}

Damnit, now I want to take on a new React Native project where I can use this library 😅

react-native-ble-plx (GitHub) →
react-native-ble-plx Documentation →

react-native-background-fetch – Periodic background tasks for React Native Apps

Background Fetch is a very simple plugin which will awaken an app in the background about every 15 minutes, providing a short period of background running-time. This plugin will execute your provided callbackFn whenever a background-fetch event occurs.

import BackgroundFetch from "react-native-background-fetch";

export default class App extends Component {
  componentDidMount() {
    // Configure it.
    BackgroundFetch.configure({
      minimumFetchInterval: 15,     // <-- minutes (15 is minimum allowed)
      // Android options
      forceAlarmManager: false,     // <-- Set true to bypass JobScheduler.
      stopOnTerminate: false,
      startOnBoot: true,
      requiredNetworkType: BackgroundFetch.NETWORK_TYPE_NONE, // Default
      requiresCharging: false,      // Default
      requiresDeviceIdle: false,    // Default
      requiresBatteryNotLow: false, // Default
      requiresStorageNotLow: false  // Default
    }, async (taskId) => {
      console.log("[js] Received background-fetch event: ", taskId);
      // Required: Signal completion of your task to native code
      // If you fail to do this, the OS can terminate your app
      // or assign battery-blame for consuming too much background-time
      BackgroundFetch.finish(taskId);
    }, (error) => {
      console.log("[js] RNBackgroundFetch failed to start");
    });
  }
};

From the source I see that on iOS it leverages the BackgroundTasks framework. Do note that the os might decide to throttle the rate the background-fetch so the define interval is only a minimum.

react-native-background-fetch →

React Native CLI 3.1.0 and 4.0.0 – What’s New?

Mike Grabowski on the recent changes in React Native CLI:

In this short article, I want to give you an overview of what’s new and what’s coming up in React Native CLI. Also, I’ll tell how do we plan our work going forward on it.

The fact that React Native now shares the build cache with XCode is a welcome change. The “Improved support for different build flavors on Android” is a relief.

Version 4 comes with the latest RC of React Native 0.62: 0.62.0-rc.2

React Native CLI 3.1.0 and 4.0.0 – What’s New? →

React Native + SwiftUI

Kureev Alexey on how to use SwiftUI Components in an React Native App.

Today, we’ll write a proxy that allows developers to use SwiftUI in their React Native applications.

The Native SwiftUI Button Component looks like this:

struct SwiftUIButton : View {
  @ObservedObject var props = ButtonProps()
  
  var body: some View {
    VStack {
      Text("Count \(props.count)")
        .padding()
      
      Button(action: {
        self.props.onCountChange(["count": self.props.count + 1])
      }) {
        Image(systemName: "plus.circle.fill")
          .foregroundColor(.white)
          .padding()
          .background(Color.red)
          .clipShape(Circle())
      }
    }
    .padding()
    .clipShape(Circle())
  }
}

You’d then use like you’d use any other Native Component:

import React, {useState} from 'react';
import {requireNativeComponent} from 'react-native';

const SwiftUIButton = requireNativeComponent('SwiftUIButton');

const App = () => {
  const [count, updateCount] = useState(0);
  return (
    <SwiftUIButton
      style={styles.container}
      count={count}
      onCountChange={e => updateCount(e.nativeEvent.count)}
    />
  );
};

To make it work he created two new macros to use: RCT_EXPORT_SWIFTUI_PROPERTY and RCT_EXPORT_SWIFTUI_CALLBACK.

React Native Meets SwiftUI →
ReactNativeWithSwiftUITutorial Repository →

Building further upon the code, some nice integrations have already been made. Such as this one:

React Native is the Future of Mobile at Shopify

Until now, the standard for all mobile development at Shopify was native mobile development. We built mobile tooling and foundations teams focused on iOS and Android helping accelerate our development efforts. While these teams and the resulting applications were all successful, there was a suspicion that we could be more effective as a team if we could:

  • bring the power of JavaScript and the web to mobile
  • adopt a reactive programming model across all client-side applications
  • consolidate our iOS and Android development onto a single stack.

As a React (Native) Developer (although I’ve been dabbing more PHP lately; ahem!) I can only applaud this move. Good to see Shopify move to React Native, with the explicit intention of making core contributions along the way.

React Native is the Future of Mobile at Shopify →