Where are we with React Native in Web, Windows, and macOS?
Application development is a result of the emergence of disruptive technologies. It is now eyed as a primary marketing aspect for every product and service company. App development initially targeted hand-held devices. With time, the service providers realized they need to get hold of the web as well as the mobile to get the highest level of penetration into demographics. Now, the point of discussion has shifted from, “should we own an application?” to “which platforms should we target with the application?” And here comes one of the toughest questions in application development. The app developers need to cover different operating systems. At the same time, they cannot ignore the far-fetched reach of a responsive web app. It would be a great idea to be able to pursue every aspect, but that churns out huge development and maintenance costs. So the difficult question here is, “What is the best solution for developing a cost-effective cross-platform application?” Choosing an application development framework that supports all of these goals can be an effective answer. React Native development is gaining prominence on these grounds.
What is React Native?
React native is a JavaScript-based application development framework that is used to develop mobile applications. It was started as an open-source project by Facebook in 2015. The rich feature set compelled many companies to get into React Native application development. Many leading companies including Facebook and Instagram have used React Native for application development.
History
Facebook used HTML5 to develop a mobile web page for every device. This effort struggled in terms of UI and performance. The solution did not turn out to perform in long term. In 2013, Jordan Walke, a Facebook developer used JavaScript to develop UI elements. This concept was groundbreaking. A Hackathon was organized to further test the potential of developing a mobile application using JavaScript. This gave birth to React Native. At first, it was launched for iOS. Gradually, Facebook brought in Android support and finally launched it in 2015. React Native emerged as the second biggest project on GitHub just after three years of its launch.
Why is React Native So Popular?
One of the primary reasons for the immense popularity of React Native is its use of the JavaScript library. JavaScript library was also popular when React Native was launched. So, it automatically gained popularity amongst developers. The second reason is that the React Native Framework brought in many great features for UI development which are loved by the front-end developers. The third reason can be the framework and its features. React Native developers need to write the code only once. They can use it on both – Android and iOS. This has saved considerable time and effort for the developers as well as the organizations. React Native is a great cross-platform application development framework that offers:
- Wider audience
- Consistent performance across different platforms
- Quicker development
- Cost-efficiency
These are some of the features that make React Native applications immensely popular.
Where Do We Stand?
React Native is open source and the release is also open source for everyone to access. There is a release train in the react-native-releases repository in GitHub. The React Native 0.70 was released in September 2022 which is the latest version. The year 2022 started with the release of React Native 0.67 whichcame with many improvements. Then in release 0.68, we saw some breaking changes including:
- React Native updated to Node 16, compelling the React developers to use the Node 14 and higher versions
- Addition of Android Gradle Plugin
- Removal of fallbackResource from the iOS API named RCTBundleURLProvider
A new architecture with TurboModule system and Fabric Renderer was added. The React Native 0.69 came with many improvements to support this new architecture. Bundles Hermes and React 18 support have been the two major additions to this version. There were many other changes including c++17 support and the addition of the hotkeysEnabled option.
In the latest 0.70 version, the focus was on Hermes which added a lot of value to React Native. It has been developed to benefit resource-constrained devices. The Hermes engine can compile the source code of JavaScript to bytecode ahead of time, unlike other engines. Hermes has been released as the default engine in the 0.70 version. In December 2022, an experimental cross-platform pointer API was introduced. Moving ahead, the focus will be on improving the framework’s performance for desktop, VR, and the web.
React Native for Web
It is time to get rid of the common misconception that React Native is only for mobile application development. React Native web is a reality. It can be used for existing as well as new apps. Users can also use it to develop multi-platform apps along with web apps. The React DOM is used to render the compatible JavaScript code in the web browser, allowing the developers to inculcate powerful abstractions in the web. React Native web applications are built using modern React APIs. The developers can find all the React Native core components for web development. The components for the web come with browser-compatible implementations. For instance, the developers will get to use the DOM-based version of the component of React Native that can be used to render to a ReactJS development framework has emerged as one solution for every kind of application development. The developers can use HTML tags to translate the required React Native primitives to DOM language, boosting the adoption of React Native for Web application development.
Benefits of using React Native for web
We can bet on two main reasons behind the growing popularity of React Native web.
- When you create a web app with React Native, you get access to high-quality web interfaces that help you develop adaptive web UI using JavaScript. The native-like support, multiple input modes, RTL layout support, and integration with React Dev lead to seamless UI development.
- The React developers need to write once and render anywhere they want allowing them to write new components for native and web apps without re-writing.
Major bug fixes and planned changes
In the 0.18 release for React Native web, many bug fixes have been made. Fixes are done for
- Shortform and long-form duplication
- Focus ring display on different elements including Switch and CheckBox
- Href navigation for Touchables and Pressables
- Linking.OpenURL support for the target value
Many new features have been added
- Nesting of localized LTR/RTL layouts by setting the land or dir prop for a component
- Dynamically switching of localized LTR/RTLlayouts in runtime
- Addition of useLocaleContext as the new export API
- Support for rendering for shadow boots and multiple windows
- Extraction of static CSS
React Native for Windows + macOS
Before heading any further, let us take a look at the history of React Native for Windows and iOS. The React Native windows + macOS wasdeveloped in 2015. Since then, there have been continuous releases with bug fixes and improvements. React developers can now use React Native for Windows desktop app development. The idea behind React Native windows is to use the tools, architecture, languages, and every other component of React Native for windows application development. Very similar to Windows, React Native for macOS starts development on the actual React Native project with the desktop environment of mac into consideration. React Native for windows + macOS framework enables the developers to build cross-platform apps. Many top applications such as Xbox and MS Office have successfully used React Native for Windows and macOS for application development.macOS for iOS also gets robust support with every new release.
Benefits of using React Native for Windows + macOS
There are many benefits of using React Native for mobile apps and Windows desktop app development.
- The React developers can use the native modules to invoke standard React Native controls and components. The developers can use features like ‘live reload’ to test their implementations just as they do in web applications.
- A single codebase can be used to run on both operating systems – macOS and Windows. Even with two React Native projects for two different application developments, the shared UI components exist in the top layer. This considerably reduces the development and maintenance time for both applications.
- The large developer community for support cannot be ignored. The React and React Native communities constantly offer support for React Native Windows and macOS development
Bug Fixes and Planned Features
Version 0.70 is about new features. There are quite a few fixes which are:
- Fix for catalyst
- Enabling the new React JSX Transform
- Removal of reactnativeutilsjni
Besides the changes, many dependencies have been upgraded. The major highlights of the release are:
Version 0.70 is about new features. There are quite a few fixes which are:
- Using Hermes as the default engine
- New unified configuration for Codegen
- Auto-linking for new architecture libraries in Android
- Full CMake support to configure android builds
Conclusion
React Native is a great choice for developing cross-platform web and mobile applications for different platforms. React Native allows the developers to share the codebase and business logic on web and native applications, bringing in great visual consistency. Development options like ‘fast refresh’ allow the developers to instantly see their changes in the application. This ultimately results in higher productivity and better user experience. React Native is a very progressive language where new releases keep coming up with new features and bug fixes. The Contributor Summit 2022 has opened new channels of knowledge sharing and collaboration to bring up something new and innovative in React Native.
The upcoming developments are expected to be on the ‘many platforms vision’ which aims to build beyond mobile. An increase in investments in Desktop, Web, and VR only guarantees new releases with better support for platforms with hardware differences. Looking at the ascending graph of developments, one can conclude that using React Native for application development would prove to be a worthy choice. There have been many exciting changes in 2022 and the new releases in the coming years are worth a wait.
Logging in React Native: All you Need to know!
Logging is a crucial aspect in React Native app development projects as it is one of the easiest and fastest methods for debugging the app at the developmental phase itself. Logging provides detailed information & feedback about the issue while the code is running. It also helps developers to understand an app’s behavior.
But, logging should be carried out during the app development process; it isn’t beneficial anymore, once the app gets deployed. This is because these logs are generated on the client side. Hence, during the post-deployment phase, the errors detected via logs will be accessible only to the users and get lost in their browsers. The development team can identify these errors only if a user fills up a bug report, which is least likely to happen. Users will mostly abandon the app instead of reporting the problem.
This post provides all-inclusive insights regarding logging in React Native projects and methods to resolve limitations. But, before we dive deeper, let’s take a sneak peek into the architecture of a React Native App.
React Native Architecture/Execution Environment
The React Native execution environment comprises three major threads – the “Native” thread, the “JS” thread, and a background thread that handles the shadow node. These threads communicate with each other over a library named “Bridge.”
Logging in React Native: Key Steps to Consider
Now, let’s gather comprehensive insights about logging in React Native environment.
How to read Logs?
The JavaScript logs are visible inside the “console” part of the “developers’ tools” section. You’ll find “developers’ tools” in the browser that is used for remote JavaScript debugging. But, React Native developers can view these logs when the debugger is connected and this might slow down the app execution process to a certain extent. So, what’s the solution? You need to employ commands like react-native log-ios (for iOS apps) & react-native log-android (for Android apps) to ensure that your device doesn’t slow down while logging is going on. This way, you also come to know more about what’s going on in the entire app and not just the JavaScript thread.
Let’s discuss this in detail for providing you with more clarity on reading Logs!
Console Logs
To view Console logs, you need to run the command npx expo start and connect a device; the Console logs will appear in the terminal process. The runtime sends these logs to the Expo CLI through web sockets. Here, you get low-fidelity logs as the dev tools are not directly connected to the engine. To generate higher-fidelity logs, you can employ advanced logging functions such as console.table. For this, you need to create a development build using Hermes and then connect the inspector. Hermes is a JS engine optimized for the React Native environment. Hermes improves an app’s start-up time by ahead-of-time JS compilation into bytecode.
System Logs
These types of logs are beneficial if you wish to view logs for all that’s taking place on your device and also the logs generated by the operating system as well as by other apps. You need to employ the following commands in the terminal for this purpose.
For Android devices : npx react-native log-android
For iOS devices : npx react-native log-ios
How to write Logs?
Here’s how to write logs! Your output to the React Native Console log appears in the Application logs. It’s important to use the proper log level while writing logs. Besides the console.log, there are other log levels like console.info, console.warn, console.debug, etc. Each of these logs has a specific purpose and provides a more granular control on the level of information needed. You can use console.info to figure out whether a set of events took place as per the expected pattern. console.warn is used if some unexpected instances occur; for example, a server response that is not entirely incorrect but looks questionable. console.debug is used when you require temporary logs for resolving issues.
The Importance of Logging Libraries
It’s advisable to use a logging library while writing logs as it will save logs based on different levels as per the client’s requirement. The logs will be saved in an encrypted file format and log messages will be sent or displayed for the developers’ reference. Such ready-to-use loggers save time and effort for developers.
If proper log files are not present in the production environment, it becomes challenging to debug issues. This is because log files are the only source of information that helps you to debug unexpected issues or disconnected errors. The usage of logging libraries addresses this limitation.
React Native Logging Libraries: Examples
React-native-file-logger
React-native-file-logger is a file-logger for the react native environment and can append messages from console calls into log files employing file loggers from Logback (for Android) & CocoaLumberjack (for iOS). Configure it using the command: FileLogger.configure(). Once configured, it will automatically log all the existing console.log/debug/… calls into a file.
React-native-file-logger is written in TypeScript and offers an optional file-rolling policy. The files are rolled based on the size and the time needed. The rolling policy is highly customizable. You can customize the log level for file output and the log directory, a path where log files are stored. Moreover, if you do not wish to use console calls for file logging, you have the option to directly write messages to the log file using your logger API.
This logger can also e-mail file logs to developers without having to depend on any other library. The logger employs React Native’s undocumented global._inspectorLog. Using React-native-file-logger, you can intercept console calls and retrieve the formatted log message.
react-native-logs
This React Native logger comes with custom “log levels” and “transports” like file writing, colored console, etc. The severity of each log level is displayed; log levels are arranged in ascending order based on their degree of importance. Thereafter, “transport” manages the logs. “Transport” is a functionality that saves, displays, & sends log messages.
For installation, run either of these two commands:
npm install –save react-native-logs
or
yarn add react-native-logs
Now set the ball rolling! Go to react-native-logs and from there,
import { logger }.
Then run the command var log = logger.createLogger
The “createLogger” method enables you to create a simple logger that offers warn, debug, & error levels. For customizing this logger, you need to pass a configuration object to the “createLogger” method.
Coming to “transport,” developers can write their own “transport” specifications for sending logs to a Cloud service. You also get to choose from several default “transport” options like hideDate, hideLevel, loggerName, dateFormat, etc.; if you set the parameter – transportOptions. Here, you would also be able to add new options that get passed to transports and can overwrite the pre-set transport options.
The severity level of logs can be set; for this, you need to pass the name (string) of the level that is of the least importance. Here, you can overwrite any config.severity option that has been set when the logger was created.
How to Handle Different types of Errors displayed by Logs?
All warnings & errors in the development builds appear inside a LogBox present in the app. This LogBox is disabled automatically during the release of the production builds. Remember, that ignoring logs is not a good practice and should be the last resort. And, if you had to ignore any log due to some unavoidable reason, do create a task for fixing those logs later on.
Console Errors
You can view the console errors & warnings in the form of on-screen notifications with a yellow or a red badge. The number of warnings and errors is also displayed. For reading the console warnings and errors, you need to click the notification. Thereafter, full-screen information about the log will appear and you’ll be able to paginate through every log present inside the console.
You can hide the aforementioned notifications by employing the command: LogBox.ignoreAllLogs(). This approach comes in handy while you are giving product demos. You can also hide notifications following the “per-log” approach. Here, you need to type the command: LogBox.ignoreLogs(). This approach can be used to handle noisy warnings that you can’t fix; for instance, the ones in a third-party dependency.
Syntax errors
Whenever there’s a Syntax error, a full-screen LogBox error appears. The LogBox shows you the stack trace as well as the location of the Syntax error. Such an error cannot be dismissed as it denotes an invalid JS execution that must necessarily be resolved before you continue with the app development process. This is how you need to act for dismissing Syntax errors. Fix the error. Then, you can use either of these two ways – Enable Fast Refresh and save it as “automatically dismiss” or disable Fast Refresh and reload using the command cmd+r.
Unhandled JS Errors
The previously unhandled JavaScript errors display a full-screen LogBox automatically, showing the error source. You can dismiss or minimize such errors to view the application’s state when these errors crop up. However, addressing these errors is highly recommended.
Bottomline:
I hope you have gathered actionable insights on the various approaches to logging in React Native. To create a top-class React Native app, the development team must be well-equipped to address unexpected events & errors. And, logging helps you to find out the root cause of errors and makes it easy for the developers to resolve issues. However, you must carry out the logging process appropriately to reap its benefits without affecting the UX. Therefore, it’s important to pick an experienced React Native app development company to execute your software development project.