The popularity of React Native has skyrocketed for the past 2 years. Meet the framework developed by Facebook Team that stands behind Facebook, Instagram, and Skype mobile apps. What is React Native? React Native is a JavaScript framework for writing real, natively rendering mobile applications for Android, iOS, and Universal Windows Platform. As its name suggests, it is based on React (Facebook’s and Instagram’s JavaScript library for building user interfaces), but it doesn’t target the browser. Instead, Mobile platforms are the main targets of React Native. React Native applications are written using JavaScript and JSX (HTML/XML-like structures), but then it invokes the native rendering APIs in Objective-C or Java depending on the platform, meaning that your app will consist of real mobile UI components, not review. Your app will feel and look like any other native mobile application.
React Native can access platform features like a phone camera, user’s location due to the exposed JavaScript interfaces for platform APIs. According to John A. Calderaio from Medium.com, React Native manages GPU and Memory more efficiently than Swift. After a series of benchmarks and tests, he states that “I am now more convinced than ever that React-Native is the framework of the future.” Upwork.com, as we know, has described React Native as the future of hybrid app development, and since React Native launched in 2015 the interest in this framework keeps constantly growing. React Native was used to developing apps like Facebook, Instagram, Skype, Airbnb, Walmart, Tesla, etc. But why? What are the advantages of React Native? JavaScript - React Native uses mainly the JavaScript, one of the fastest and widely-used programming languages out there meaning that typically you can find React Native developer relatively quickly. Updates - It is possible for developers to push updates directly to the users so that users don’t have to worry about downloading updates from for example Google Play. Unfortunately, Apple’s new guidelines ban any form of Code Push in AppStore apps. UI and Performance Currently used methods of writing mobile applications are combinations of JavaScript, HTML, and CSS typically rendered using webviews. This approach works, but it comes with drawbacks around performance. Some frameworks also try to mimic or copy the native UI elements, but the result feels a little bit off. Creating details like animations may take a lot of time, effort and will probably become out of date really quickly. React Native has got you covered! It translates your markup to real, native UI elements, leveraging existing means of rendering on whatever platform you are working with. On top of that, React works different from the UI meaning that your applications still maintain high performance without compromising capability. This means that developers coming from the Web with React can write mobile apps with the performance, look and feel of a native application, while using familiar tools. Code Sharing and Cross-Platform Working with React Native can shrink the resources needed to build mobile applications. Any developer familiar with React can easily pick up React Native and now target both Web and mobile platforms with the same skillset. Much of your code can be shared across other supported platforms. Keep in mind that depending on the functionality of your app, not all the code you write will be cross-platform. However, if you want to build an app for both iOS and Android choosing React Native will definitely save you a lot of time, money and lines of code. What are the disadvantages of React Native? Maturity - React Native is very young, it launched in March of 2015 for iOS and 5 months later it was released for Android. Because of that the documentation definitely has room for improvement, but with Facebook on its side, it continues to evolve. Debugging - React Native introduces another layer to your application, making debugging more difficult, especially at the intersection of React and the host platform. React Native is awesome! However, you can waste some time in the most unpredictable places. Let us see some important and relevant things about React Native:- 1. React Native default implementations (NavigatorIOS, React Navigation) 2. JS implementations of navigation (React Navigation, react-native-router-flux) 3. Native implementations (wix/react-native-navigation, Airbnb/native-navigation) Native implementation is a fully featured navigation, which includes all critical components like nav bars, tab bars, and side menu drawers. It provides huge user experience for Android and iOS platforms, including native animations, etc. However, there are a few things you should know before starting to use it. Drawer customization You can set a custom width for the drawer, but you should know there are some differences for platforms. In iOS in percents from the full-screen width and in Android, you can set the width in React Native pts. Note it down, if you should have custom fixed drawer width by the design. One can use React Native Drawer to handle these cases. Tab bar customization In case you need to set custom height for the TabBar, bear in mind — there is no way to do it easily. Want to redefine click on the tab? Not so easy! Sure, you can do it, but be ready to go deep into the native code! Documentation Not all features of the navigator are documented, so do not be afraid to open source code of react-native-navigation and check it on your own. 1) Image scaling In React Native, creating combined images is quite a challenging process. If you have 2 images and want to combine them, then obviously you will scale or resize them. As per the documentation about React Native Images, you have to use resize Mode props (‘cover’, ‘contain’, ‘repeat’, ‘stretch’, ‘center’). There you can find everything for scaling, but if you want the image to inherit parents size, there is no such solution. In order to make it, you should use `width: null` as the style of your image. Weird? Yes, but this thing works :), and I have tried even. 2) Animated lists A lot of applications use some kinds of lists. To create a list in React Native you can use SectionList or FlatList. If you are working with lists and want to add some animations, for example, scrolling to element when the list is loaded, just take a look at this line in the documentation: In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it’s possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes. It means that rendering list action will be at the end of the asynchronous actions queue after mounting the component. So the workaround for this is to push function that performs animation to the end of the queue. It can be performed by using: setTimeout(()=> this.animationFunction()) In this case, the animation function runs only after the list is fully loaded. 3) Redux-persist — Offline first app One of the main purposes of our app was to create a product by using which user won’t feel if he has an internet connection or not. Hence, if there is no Internet or the connection is lost, a person will continue using the app as earlier. The thing that helped us is redux-persist. It can be constructed to automatically endures Redux state updates to disk using React Native’s `AsyncStore`. It’s quite straightforward and the GitHub readme file will help to add it successfully. 4) View rounding One of the confusing issues is border-radius. Usually, borderRadius is applied to get rounded corners for a View. There are many views with rounded corners like buttons, speech bubbles, and card containers, etc. All these views with rounded corners behave differently on the very two known platforms iOS and Android. Few elements do not have top corners, few don’t have bottom corners, or we have found that some view is rounded in Android and not rounded in IOS. Hence, we can say that there is no consistency. The solution for this argument is just to apply overflow: 'hidden'. Quite a simple solution but it takes time to figure it out due to its inconsistency. 5) Handling application orientation Handling orientation is one of the common tasks in mobile development. Sometimes, we must have to disable landscape orientation in the app. Which can only be done without any specific features of React Native. For Android just add: android:screenOrientation=”portrait” to Android/app/src/main/AndroidManifest.xmlFor iOS: In Xcode, General tab, Device Orientation box. Xcode General tab However, there are a few issues that I would like to relate to handling orientation. The first is related to `react-native-navigation`. Note: disabling methods of standard orientation do not work with it. You have to manage this in `appStyle` or `navigatorStyle` object while configuring `react-native-navigation`. Another issue I faced was enabling screen rotation only on specific screens. `React-native-orientation` is the best solution for this. It allows me to lock and unlock orientation rotation on specific screens, get current location and lock on specific orientation. But! You might face this interesting bug related to this package. If you have some components, then your main app content is developed only for vertical orientation, which takes their width and height depending on the screen width and height you should definitely test the case when the app is launched in horizontal orientation of the device. The splash screen of the app (in iOS) can be rotated from a vertical orientation to horizontal. But I shouldn’t! To fix this issue add next code to project AppDelegate.m file @implementation AppDelegate - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; [Orientation setOrientation:UIInterfaceOrientationMaskPortrait]; //add this code 6) Background image One more tip you will not find in the official documentation of React Native is about background images. There are few ways how to a setup background image for your screen. One way is to use <Image> component inside the <View> with next styles: const { width, height } = Dimensions.get('window'); const styles = StyleSheet.create({ backgroundImage: { flex: 1, resizeMode: ‘cover’, position: ‘absolute’, width, height, }, )}; But other, still not documented way is to use ImageBackground imported from ‘react-native’ package. It can be used in the next way: import { ImageBackground } from 'react-native'; .... render() { return ( <ImageBackground source={{ uri: 'https://...'}}> {this.props.child} <ImageBackground> ); } 7) You don’t break when iOS or Android changes When you use a library that abstracts over the operating system SDK API, a peculiar thing happens to your codebase: it does not depend on that SDK directly. Surprisingly, this means the following: Effectively, you detach yourself from these concerns completely, and you can take defensive actions on your terms, in your time. 8) Avoid Javascript fatigue All these points bring me to the point: by using React Native, you will get to have a first-class modern and new Javascript experience plus, without tiresome configuration of your build pipeline. Everywhere you’ll feel, you’ll look, that developers come first; it’s already awesome by default. Have an awesome idea? Please feel free to send us an email at info@iihglobal.com or get in touch with us, our business person will get back to you. Web Design Directory
There are too many implementations of navigation to React Native, we can divide them into three categories:
