Photo by Lautaro Andreani on Unsplash It’s been a while since I’ve done some React Native work, but the 0.69 release seems like a very welcome one: React 18, bundled Hermes, Fabric, TurboModules, and the JSI. React Native 0.69 brings a ton of important improvements & updates to the table, with performance & memory usage …
Tag Archives: react native
React Native Skia — High Performance 2D Graphics
React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products. Amazing work by the folks over at Shopify. React Native Skia →
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}); …
Continue reading “Customise the React Native Developer Menu with Dev Settings API”
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 …
Continue reading “Building a Chat App with React Native and Firebase”
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. …
Continue reading “The Ultimate Guide to React Native Optimization”
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> …
Continue reading “React Native Bottom Sheet (Slide Up Panel)”
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 …
Continue reading “react-native-ble-plx – React Native Bluetooth Low Energy (BLE) library”