EAS: Expo Application Services

The folks at Expo have made it really easy to build (and publish!) your React Native applications on their infrastructure, with their Expo Application Services (EAS) offering: You can build your app with EAS Build and automatically submit to app stores with EAS Submit in minutes or less, thanks to automatically managed app signing credentials, …

Customise the React Native Developer Menu with Dev Settings API

Azim Ahmed comes with a few practical code snippets to alter the React Native Developer Menu from within your code, via the DevSettings Module: Toggle why-did-you-render Perform an action on the current route import {DevSettings} from 'react-native'; import React, {useEffect, useState} from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, {trackAllPureComponents: false}); …

Reset React Native Cache (Watchman Cache, Bundler Cache, Build Artifacts, etc) with react-native-clean-project

I used to drag a little shell script around between each React Native project that cleaned out various cache directories (Watchman Cache, Bundler Cache, Build Artifacts, Yarn Cache, etc.) for me. A better alternative is the react-native-clean-project you can use. Cleans your React Native project by purging caches and modules, and reinstalling them again. Installation …

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 …

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. …

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 …

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-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 …

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({ …