Mobility—The need for a cross-platform app development framework
For the past few years, enterprises have taken a “ready, fire, aim” approach to deploying “mobile-first” or “mobile-only” strategies for amplified productivity, superior communication and better efficiency.
As enterprises dig into mobility solutions, challenges can arise, including security, real-time access to data, device diversity and volatility. Multiple device operating systems available in the market, coupled with frequent upgrades for the systems, make it tough to choose the right framework for application development.
What is React-Native?
At present, this framework supports the following device platforms:
Facebook also made React-Native into an open source option, with the idea that compatibility with other platforms like Windows or tvOS could be worked on by the development community.
How does it work?
Benefits of React-Native
Offers third-party plugin compatibility, less memory usage and a smoother experience
Third-party plugins mean there is little dependence on a web view for certain functions. For example, if aws-api-gateway-client functionality is added to the app, React-Native links the plugin with a native module, so linking to the server, while using less memory and loading faster. If the app supports older operating systems (and older devices), this can help keep the app running smoothly.
Native app development is much more efficient
React-Native brings the speed and agility of web app development to the hybrid space–with native results. Under React-Native’s hood is Facebook’s popular ReactJS UI library for web applications. React-Native brings all of ReactJS’s better app performance, DOM abstraction and simplified programming methods to hybrid mobile development.
Apply React-Native UI components to an existing app’s code without any rewriting
Code reusability is much easier in React-Native. For example, if there is an existing hybrid app built in Cordova, the Cordova code can be reused easily with plugins.
React-Native can deal with both ecosystems
Developing native apps for Android and iOS can be tedious because they are two entirely different ecosystems. Android apps require knowledge of Java and Android SDK. It is important to understand the latest features of the two major ecosystems to effectively use React-Native.
React-Native is UI-focused
Native SDKs update
When the iOS or Android SDKs are updated, it takes some time for React-Native to integrate these newly introduced application programming interfaces (APIs) into the core library.
Risks and drawbacks
Determining whether React-Native is a good choice for a project depends on the context. The usual limitations and hurdles that might be faced when working with any emerging technology apply because the framework is new. A few things to note: 1) some features on iOS and Android are not yet supported by React-Native; 2) since React-Native introduces another layer to any project, it can make debugging more difficult, especially at the intersection of React-Native and the host platform.
Best practices are still evolving. At this point, here are some things to know:
No inline styling
Min platform specific code
Do not use separate JS files or blocks to the extent possible for different platforms that need to be supported because it will be more difficult to maintain the code. Accenture can register an application in the app entry point JS file (app.js) instead of registering twice in index.ios.js and index.android.js. That file (app.js) can also be used for importing all other views (.js files) of the application.
Look for third-party plugins
Make use of third-party plugins for React components that are open source. It is going to improve time to market.
Operating system services
Accenture has third-party plugins available for availing operating system services like camera, calendar, file access, etc. Just be cautious about operating system quirks advised by the author/vendor while consuming them.
Be conscious about platform-specific UI changes
The font will be standard but will vary by different platforms. For example, the standard font on Android is Roboto Medium.
It is exceedingly difficult to set absolute styling for everything. Options help greatly with the layout. Third-party plugins like react-native-resposive will also help.
Imports with exports
For every imported library, make sure there are also exports for components in those library JS files.
Scalable vector graphics support
There is no direct support for scalable vector graphics (SVG). Please use third-party plugins like react-native-svg, which provides a SVG interface for both iOS and Android.
Slow page transition
Learnings on React-Native framework
In React-Native, unlike other cross-platform application development frameworks, the error messages or exceptions are noticed as clueless in terms of identification of the root case or where it failed. Stack traces are often helpless in such situations. We are working to solve some of the most common errors experienced during React-Native application development:
Element type is invalid
Solution: Every imported item should be exported from the library A library was exported by default. But if it is not getting imported by default, the above error is throw. In such a case, .default needs to be added to the imported component.
Expected a component class, got [object Object]
Solution: Class name/Component names should start with a capital letter.
Expected corresponding JSX closing tag
Solution: This error occurs when a component element tag is opened but not closed. Eg: A <View> needs to be closed in the specified file as </View>
Could not connect to the development server
Solution: Restart the packager.
React-packager has encountered an internal error
Solution: Error in running the packager. The terminal error will suggest the problem and solution in most of the cases.
Failed to execute importScripts on WorkerGlobalScope
Solution: This could either be because the debug browser window needs a reopen or there is some syntax error in the program. So, try undoing the changes to run successfully.
The source for assign must be an object
Application has not been registered
Solution: The application is not registered in JS page.
Unknown named module
Solution: The package server started by React-Native start seems to have cache of the node modules. Stopping and restarting the server solves the issue.
Packager should always be restarted when new modules are installed.
Task ‘installDebug’ not found in root project
While building for Android, error below is displayed on screen:
Task ‘installDebug’ not found in root project ‘
Solution: This must be due to customized gradle settings configured for release of Android build. As a work around, keep a separate copy of project for debug build and release build at different paths with default Gradle settings.
Dissimilar UI in iOS and Android
If a developer uses common JS code for Android as base platform, but views shows differences with Visual design while running on iOS, two solutions will help.
Solution: Platform-specific changes can be implemented by these two approaches: If style changes are minimal, insert platform check inside JS files.
But if changes cater to multiple blocks of the same JS file, keep two separate files for iOS and Android (jsfilename.ios.js, jsfilename.android.js).
Could not get BatchedBridge
Solution: This is a debug version of app running in mobile. Follow the steps at React-Native github to prepare release version of APK.
Disabling the warnings from the simulator while debugging
This warning appears in application launch screen.
Solution: In render function of the launch page (for example, Login Page), console.disableYellowBox = true; needs to be mentioned, directing the warnings to console.
My TouchableX view is not very responsive
Solution: Sometimes, an action in the same frame that is adjusting the opacity or highlight of a component that is responding to a touch, the effect will not be visible until after the onPress function has returned. If onPress does a setState that results in a lot of work and a few frames dropped, this may occur. To solve this, wrap any action inside of the onPress handler in requestAnimationFrame: