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.
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.
💵 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.
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.
💁♂️ 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.
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 😅
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.
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
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.