2. List down some of the steps to optimize the application.<\/h3>\n\n\n\n- Use Proguard to minimize the application size.(It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using)<\/li>
- Create reduced-sized APK files for specific CPU architectures. When you do that, your app users will automatically get the relevant APK file for their specific phone\u2019s architecture. This eliminates the need to keep JSCore binaries that support multiple architectures and consequently reduces the app size.<\/li>
- Compress images and other graphic elements. Another option to reduce image size is using file types like APNG in place of PNG files.<\/li>
- Don\u2019t store raw JSON data, eIther we need to Compress it or convert it into static object IDs.<\/li>
- Optimize native libraries.<\/li>
- Optimize the number of state operations and remember to use pure and memoized components when needed<\/li>
- Use Global State wisely for example worst-case scenario is when state change of single control like TextInput or CheckBox propagates render of the whole application. Use libraries like Redux or Overmind.js to handle your state management in a more optimized way.<\/li>
- Use key attribute on list items, it helps React Native to pick which list to update when rendering a long list of data <\/li>
- Use VirtualizedList, FlatList, and SectionList for large data sets.<\/li>
- Clear all the active timers which may lead to heavy memory leakage issues.<\/li><\/ul>\n\n\n\n
3. Describe Memory leak Issue in React Native , how can it be detected and resolved ?<\/h3>\n\n\n\n
In JavaScript memory is managed automatically by Garbage Collector (GC). In short, Garbage Collector is a background process that periodically traverses the graph of allocated objects and their references. If it happens to encounter a part of the graph that is not being referenced directly or indirectly from root objects (e.g., variables on the stack or a global object like window or navigator) that whole part can be deallocated from the memory.
In React Native world each JS module scope is attached to a root object. Many modules, including React Native core ones, declare variables that are kept in the main scope (e.g., when you define an object outside of a class or function in your JS module). Such variables may retain other objects and hence prevent them from being garbage collected.
Some Causes of Memory Leak:<\/strong><\/p>\n\n\n\n- Unreleased timers\/listeners added in componentDidMount<\/li>
- Closure scope leaks<\/li><\/ul>\n\n\n\n
Detecting memory leaks for IOS:<\/strong>
In Xcode,
Go to XCode \u2192 Product \u2192 Profile (\u2318 + i)
After that shows you all templates choose leaks.
Detecting memory leaks for Android :<\/strong>
Run React Native app normally (react-native run-android)
Run Android Studio
On the menu,
click Tools \u2192 Android \u2192 Enable ADB Integration
Click Tools \u2192 Android \u2192 Android Device Monitor
When Android Device Monitor shows up, click Monitor \u2192 Preferences
There is also one more way in Android
Perf Monitor (Performance Monitor) is a good choice to use for android leak monitoring.<\/p>\n\n\n\nImport PerfMonitor from 'react-native\/Libraries\/Performance\/RCTRenderingPerf';\nPerfMonitor.toggle();\nPerfMonitor.start();\nsetTimeout(() => {\n PerfMonitor.stop();\n}, 20000);\n}, 5000);<\/code><\/pre>\n\n\n\n4. Is there any out of the box way storing sensitive data in React ? If yes which and if not how can this be achieved ?<\/h3>\n\n\n\n
React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms.<\/p>\n\n\n\n
iOS – Keychain Services<\/strong>
Keychain Services allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store certificates, tokens, passwords, and any other sensitive information that doesn\u2019t belong in Async Storage.
Android – Secure Shared Preferences#<\/strong>
Shared Preferences is the Android equivalent for a persistent key-value data store. Data in Shared Preferences is not encrypted by default, but Encrypted Shared Preferences wraps the Shared Preferences class for Android, and automatically encrypts keys and values.
Android – Keystore<\/strong>
The Android Keystore system lets you store cryptographic keys in a container to make it more difficult to extract from the device. In order to use iOS Keychain services or Android Secure Shared Preferences, you can either write a bridge yourself or use a library that wraps them for you and provides a unified API at your own risk. Some libraries to consider:<\/p>\n\n\n\n- Expo-secure-store<\/li>
- React-native-keychain<\/li>
- react-native-sensitive-info – secure for iOS, but uses Android Shared Preferences for Android (which is not secure by default). There is however a branch that uses Android Keystore.<\/li><\/ul>\n\n\n\n
5. What is Network Security and SSL Pinning?<\/h3>\n\n\n\n
Understanding of SSL:<\/strong><\/p>\n\n\n\nSSL (Secure Sockets Layer) and its successor, TLS (Transport Layer Security), are protocols for establishing authenticated and encrypted links between networked computers.
SSL\/TLS works by binding the identities of entities such as websites and companies to cryptographic key pairs via digital documents known as X.509 certificates. Each key pair consists of a private key and a public key. The private key is kept secure, and the public key can be widely distributed via a certificate.
Understanding of pinning <\/strong>
Pinning is an optional mechanism that can be used to improve the security of a service or site that relies on SSL Certificates. Pinning allows specifying a cryptographic identity that should be accepted by users visiting site\/app
Why do we need SSL pinning?<\/strong><\/p>\n\n\n\nOne of the inherent risks to the SSL ecosystem is mis-issuance. This is when an unauthorized certificate is issued for a domain\/host you control. This can happen with both public and private PKIs (Public Key Infrastructure)<\/p>\n\n\n\n
How is SSL pinning used in Mobile applications?<\/strong>
When mobile applications communicate with the server, they typically use SSL to protect the transmitted data against tampering. By default SSL implementations used, apps trust any server with a certificate trusted by the Operating systems trust store, This store is a list of certificate authorities that are shipped with the operating system.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/s3.ap-south-1.amazonaws.com\/myinterviewtrainer-domestic\/public_assets\/assets\/000\/000\/174\/original\/Image-12.png?1615810920\")
<\/figure>\n\n\n\nWith SSL pinning, however, the application is configured to reject all but one or few predefined certificates, whenever the application connects to a server, it compares the server certificate with the pinned certificate(s) , if and only if they match the server is trusted and SSL connection is established.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/s3.ap-south-1.amazonaws.com\/myinterviewtrainer-domestic\/public_assets\/assets\/000\/000\/175\/original\/SSL_Pinning.png?1615810971\")
<\/figure>\n\n\n\n6. Explain setNativeProps. Does it create Performance issues and how is it used ?<\/h3>\n\n\n\n
It is sometimes necessary to make changes directly to a component without using state\/props to trigger a re-render of the entire subtree. When using React in the browser, for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node.
Use setNativeProps when frequent re-rendering creates a performance bottleneck.
Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with setState and shouldComponentUpdate.<\/p>\n\n\n\n
7. How to make your React Native app feel smooth on animations ?<\/h3>\n\n\n\n
The primary reason and an important one why well-built native apps feel so smooth are by avoiding expensive operations during interactions and animations. React Native has a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions\/animations have completed.<\/p>\n\n\n\n
Applications can schedule tasks to run after interactions with the following:<\/p>\n\n\n\n
InteractionManager.runAfterInteractions(() => {\n \/\/ ...long-running synchronous task...\n});<\/code><\/pre>\n\n\n\n8. How do you construct a logic screen in React Native?<\/a><\/h2>\n\n\n\nLogin functionality is an essential part of any mobile application. We can design a login component which performs a client-side validation and if it passes then make an API call to the server for authentication of the user. We can create a simple login screen using TextInput, View and Button component. Since Button component renders based on the platform, it will give different look and feel on IOS and Android. To avoid this, we can use TouchableOpacity to create a button component. TouchableOpacity component can be styled as per the requirement. Similar to Button component, TouchOpacity component also provides onPress props where we assign our click listener. Following code explains the implementation of a Login form<\/p>\n\n\n\n![\"logic](\"https:\/\/cdn-cllme.nitrocdn.com\/fsJtPHuAIrjqkSrOmOGUpPSluVVKYWgR\/assets\/static\/optimized\/rev-c887ec4\/media\/images\/1560497394931-Image-1.jpg\")
<\/figure>\n\n\n\nimport React from 'react';\nimport { View, StyleSheet, Text, TouchableOpacity, TextInput, Alert } from \"react-native\";\nconst initialState = { username: '', password: '' };\nclass LoginForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n this.handleSubmitForm = this.handleSubmitForm.bind(this);\n this.handleUsernameChange = this.handleUsernameChange.bind(this);\n this.handlePasswordChange = this.handlePasswordChange.bind(this);\n }\n handleUsernameChange(text) {\n this.setState({ username: text });\n }\n handlePasswordChange(text) {\n this.setState({ password: text });\n }\n handleSubmitForm() {\n const { username, password } = this.state;\n Alert.alert(`User ${username} is log in with password ${password}`);\n }\n render() {\n return (\n <View style={styles.container}>\n <View>\n <Text style={styles.text}>Username<\/Text>\n <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} onChangeText={this.handleUsernameChange}><\/TextInput>\n <\/View>\n <View>\n <Text style={styles.text}>Password<\/Text>\n <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} secureTextEntry onChangeText={this.handlePasswordChange}><\/TextInput>\n <\/View>\n <TouchableOpacity style={styles.button} onPress={this.handleSubmitForm}>\n <Text style={[styles.text, styles.center]}>Login<\/Text>\n <\/TouchableOpacity>\n <\/View>\n );\n }\n}\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n margin: 10,\n padding: 10,\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#fff'\n },\n text: {\n fontSize: 14,\n fontWeight: 'bold',\n color: '#015169',\n paddingVertical: 5\n },\n input: {\n height: 40,\n borderColor: \"#e0e0e0\",\n borderWidth: 1,\n borderRadius: 5,\n marginBottom: 15,\n paddingHorizontal: 10\n },\n button: {\n padding: 10,\n borderColor: '#bee6fe',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd'\n },\n center: {\n alignSelf: 'center'\n }\n});\nexport default LoginForm;<\/pre>\n\n\n\nUsername and password TextInputs are controlled component here as its value is getting stored as a state of the component. onPress event of the login button, we validate the user input and if everything looks good then we will make the API call for login. We style this component using Stylesheet. create method. We used normal CSS rules to make this form looks nice.<\/p>\n\n\n\n
9. What is the ScrollView component of React Native?<\/a><\/h2>\n\n\n\nScrollView component is a generic scrolling container which can host multiple components and Views. you can scroll both vertically and horizontally (by setting the horizontal property). ScrollView can also be used to implement pinch and zoom functionality in IOS. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component. ScrollView works best to present a small number of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen.<\/p>\n\n\n\n
import React from 'react';\nimport { View, Text, Image, ActivityIndicator, StyleSheet, ScrollView } from \"react-native\";\n\nconst initialState = { pictures: [\n{id:0, download_url:\"https:\/\/picsum.photos\/id\/0\/5616\/3744\" },\n{id:1, download_url: \"https:\/\/picsum.photos\/id\/1002\/4312\/2868\"},\n{id:2, download_url: \"https:\/\/picsum.photos\/id\/1006\/3000\/2000\"},\n{id:3, download_url: \"https:\/\/picsum.photos\/id\/1015\/6000\/4000\"}\n] };\nclass PictureList extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n }\n \n render() {\n const { pictures } = this.state;\n if (!pictures.length) { return (<ActivityIndicator \/>); }\n return (\n <View>\n <ScrollView>\n {pictures.map(picture => (\n <View style={styles.container} key={picture.id}>\n <Image style={styles.image} source={{uri: picture.download_url}} \/>\n <\/View>\n ))} \n \/>\n <\/View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd',\n marginBottom: 15,\n },\n image: {\n margin: 5,\n borderRadius: 5,\n width: 300,\n height: 300,\n }\n});\n\nexport default PictureList;<\/pre>\n\n\n\nAbove example renders a list of images in ScrollView. We import the ScrollView component from the react-native library and created Image element inside ScrollView. Each Image element has its own width and height set via CSS. When you run the above code and scrolls the screen you should be able to go through all the images renders. The scroll view is used to create scrollable UI on a mobile application. It works on both IOS and Android.<\/p>\n\n\n\n
10. What is FlatList and how is it better than ScrollView?<\/a><\/h2>\n\n\n\nReact native provides FlatList component to display a long line of data. For example, the News app normally displays a list to article summary card on the home page. these list of the card should be implemented using FlatList component. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently visible on the screen, not all the elements at once. FlatList provides a performance boost over ScrollView as FlatList creates a card at runtime when the user starts scrolling the page. But ScrollView creates all the list item (card) at once.<\/p>\n\n\n\n
11. What is the difference between FlatList and SectionList?<\/a><\/h2>\n\n\n\nWe can use FlatList or SectionList component to render a list of items on a mobile app. But there are differences between these two components provided by the react-native library. If you want to render a set of data broken into logical sections, maybe with section headers. It takes sections as props whose values is an array of object and each object should have title property. This titled property will be used by SectionList to render the list heading. But FlatList just iterates the list and create a node to render on UI. In case you want to show the header for a group of the list then you need to customize the node and add a header to it. The basic difference is heading for a group of a node is provided out of the box via SectionList component of react-native but with FlatList, we need to implement ourselves.<\/p>\n\n\n\n
12. How do you make Ajax call from React Native application? Give an example.<\/a><\/h2>\n\n\n\nWe can use javascript to develop a mobile application using React native. calling an API is very much similar to how we make AJAX call in web application. Below example explains it in detail.<\/p>\n\n\n\n![\"React](\"https:\/\/cdn-cllme.nitrocdn.com\/fsJtPHuAIrjqkSrOmOGUpPSluVVKYWgR\/assets\/static\/optimized\/rev-c887ec4\/media\/images\/1560497599610-Image-9.jpg\")
<\/figure>\n\n\n\nimport React from 'react';\nimport { View, Text, Image, ActivityIndicator, StyleSheet, FlatList } from \"react-native\";\n\nconst initialState = { pictures: [] }\nclass PictureList extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n }\n async fetchPictures() {\n const api = 'https:\/\/picsum.photos\/v2\/list';\n const fetchResponse = await fetch(api);\n const pictures = await fetchResponse.json();\n this.setState({ pictures });\n }\n componentDidMount() {\n this.fetchPictures();\n }\n render() {\n const { pictures } = this.state;\n if (!pictures.length) { return (<ActivityIndicator \/>); }\n return (\n <View>\n <FlatList data={pictures} renderItem={({item}) => (\n <View style={styles.container} key={item.id}>\n <Image style={styles.image} source={{uri: item.download_url}} \/>\n <\/View>\n )} keyExtractor={(item, id) => item.id}\/>\n <\/View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd',\n marginBottom: 15,\n },\n image: {\n margin: 5,\n borderRadius: 5,\n width: 300,\n height: 300,\n }\n});\n\nexport default PictureList;<\/pre>\n\n\n\nIn the above component, we are building a picture list component which makes API call and parse the response to show a list of images on a mobile screen. We can use the same fetch function to make an API call. Fetch method is introduced in the web as part of ES6 specification. Fetch is used in the same way we used to use on a web browser. First, we created a class-based component and assigned list of images as the state of a component. <\/p>\n\n\n\n
Since we haven\u2019t made an API call yet that is why the initial state of out PictureList component will be an empty array. In the render method, if our state is empty which means, we haven’t received the response from a server that is why we are showing ActivityIndicator component provided by react-native. It is default spinner displayed on the screen. When our component is mounted then componentDidMount React lifecycle method get invoked, there we will make an API call and once we receive the response we update the state of PictureList component. Once the state is updated, the render method will get called and we render a list of images using FlatList and Image component.<\/p>\n\n\n\n
13. What is a controlled and uncontrolled component?<\/a><\/h2>\n\n\n\nWe can divide all React Native components into two categories based on the internal state of the component. There are controls like textInput which have a value attribute. It is used to display user input value on UI. If the value displayed is controlled by the form control then it is known as an uncontrolled component because React is not setting or changing the value of these components. But if the state of the component is maintained by the state of the component then these components are called a controlled component. To make a component controlled, we assign the state of the component as the value of control elements and add a callback method which will update the state on each value change event. In React Native, it is preferred to have controlled component so that all the values and behaviour will get managed by React and developer will have full control over the state of components.<\/p>\n\n\n\n
14. What do you understand by high order function in javascript?<\/a><\/h2>\n\n\n\nThe basic definition of High order function is a function is called high order function if it either accept a function as an argument or returns another function. But now let\u2019s talk about the benefit of writing a high order function. In javascript, we are trying to write less amount of code and try to reuse the same code or functionality at many times as we can. High order function way of writing code allows us to implement currying in Javascript. Now, what is this currying? Currying is a way of writing code where you write a common functionality and change the functionality via argument. Let me give you an example:<\/p>\n\n\n\n
function multiplyBy(a) {\nreturn function(b) {\nreturn a * b;\n};\n}<\/pre>\n\n\n\nThis function is high order function as this returns a new function. This function will act as function generator for different functionalities. For example, I can create a double function by using the above high order function:<\/p>\n\n\n\n
const double = multiplyBy(2);\nconsole.log(double(4)) \/\/result: 8<\/pre>\n\n\n\nSimilarly, I can use the same high order function to generate a triple function which takes the number as argument and return three times the number.<\/p>\n\n\n\n
const triple = multiplyBy(3);\nconsole.log(triple(4)) \/\/result: 12<\/pre>\n\n\n\nThis type of function generation is known as currying in javascript. It is a better way of writing code as this decouples the base functionality with final logic. The base logic can be re-used at multiple places.<\/p>\n\n\n\n
15. What is a high order component in React Native?<\/a><\/h2>\n\n\n\nJust now, we have learned what high order functions are in Javascript and what are its benefits. With that knowledge, we can easily guess what a high order component will be and how it would be a good practise to use high order components wherever we can. Since components are also functions which are called as component in React world so High order components are components which take either component as an argument or returns another component. Higher order components are JavaScript functions used for adding additional functionalities to the existing component. <\/p>\n\n\n\n
These components are the pure component which means it doesn\u2019t know any side effect. Its output is totally based on the input values. For example, connect function from a react-redux library is also a high order component. Connect takes mapStateToProps and mapDispatchToProps as an argument and returns a new component which can access redix store. The withProvider function of react-redux, the withRouter function of react-router are very well used function which is also an example of high order component.<\/p>\n\n\n\n
16. What is rendering prop pattern in React Native?<\/a><\/h2>\n\n\n\nPassing callback functions as a component prop is not new in Javascript world. We used to pass callback with events and also when we try to implement a controlled component. Slowly, react community has evolved a pattern based on passing a function as props. It is called the render prop pattern. The term \u201crender props\u201d refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. <\/p>\n\n\n\n
You can think of this pattern as a child component will call the prop function and the return element will be inserted by the parent component. It gives a way so that a child component can modify the structure of the parent component without dealing with Refs. React router is one library that has used this pattern. Below is a very good example of how to render prop patterns work:<\/p>\n\n\n\n
const ProductDetail = ({ product }) => (\n <React.Fragment>\n <Text>{product.title}<\/Text>\n <Text>{product.description}<\/Text>\n <\/React.Fragment> )\n<Fetch url=\" some URL where my data is\"\n render={(data) => <ProductDetail product={data.product} \/> }\n\/><\/pre>\n\n\n\nYou can clearly see that render prop will be called by Fetch child component and it will insert the product detail node in the parent component.<\/p>\n\n\n\n
17. What is a dumb component or presentational component in ReactJS?<\/a><\/h2>\n\n\n\nIn ReactJS, as your application size is growing, you are going to have so many small or big component. At this stage, it\u2019s always better to categorize and decided the roles and responsibilities of the component. Based on role and responsibilities, we can divide the component in two parts. One is a presentational component and another type of components are container component. We also call presentational component as a stateless component or dumb component. Container components are also known as a stateful component or smart component. It is very important to distinguish between the presentational component and the container component.<\/p>\n\n\n\n
Presentational components show the following behaviour:<\/strong><\/p>\n\n\n\n- These types of component are concerned with presentation and styling.<\/li>
- These types of a component may contain both presentational and container components inside, and usually, have some DOM markup and styles of their own.<\/li>
- These types of component Often allow containment via this.props.children<\/em>.<\/li>
- These types of component Don\u2019t specify how the data is loaded or mutated. Data is passed to these type of component and they just create a markup to render the component.<\/li>
- These types of component receive data and callbacks exclusively via props.<\/li>
- These types of component rarely have their own state (when they do, it\u2019s UI state rather than data).<\/li>
- These types of components are written as functional component unless they need state, lifecycle hooks, or performance optimisations.<\/li><\/ol>\n\n\n\n
18. How do you implement screen navigation functionality in React native?<\/a><\/h2>\n\n\n\nA mobile application contains multiple screens and there has to be a way to navigate through multiple screens in the application. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. React Navigation (https:\/\/reactnavigation.org\/<\/a>) provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.<\/p>\n\n\n\n19. What is the reason behind React native not automatically sizing everything?<\/a><\/h2>\n\n\n\nIn Web development, if we don\u2019t give a size to an element either via CSS or setting the width and height attribute of an element then elements size would be 0. There are a few instances where the size of the element is determined based on the size of children. For example, if you have an image element in div then initially height of div element is 0 and once the image is fetched from server browser again calculated the size of div and place image inside div. The user experience of this element is not very good as size keeps changing in between. If this div is placed in the middle of other div elements then the whole page will fluctuate to absorb the size of the image. To avoid this behaviour, React native have decided not to automatically calculate the size of elements. Instead, it completely depends on the developer to give the width and height of elements by CSS.<\/p>\n\n\n\n
20. How do you access the in-app developer menu in React native?<\/a><\/h2>\n\n\n\nDebugging code is a very important aspect of development. The importance of debugging can be understood by the fact that debugging is also considered as a skill in software development. If a developer has a good debugging skill then there are chances and code will be of better quality and very well tested. To cater to this requirement of a developer, React native has provided pretty good support to debug the code. <\/p>\n\n\n\n
You can access the developer menu by shaking your device or by selecting “Shake Gesture” inside the Hardware menu in the iOS Simulator. You can also use the CMD + D keyboard shortcut when your app is running in the iOS Simulator, or CMD + M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. There are options to remotely debug the application via chrome browser. It will make the application a little slow but it is a good addition to enhance the development experience of the developer.<\/p>\n\n\n\n
21. How virtual DOM works in React native?<\/a><\/h2>\n\n\n\nVirtual DOM was popularised by React core team member Pete Hunt. React explains its performance aspect by using this term. They explained that the DOM manipulation is always a heavy operation as browser reflow, repaint event gets triggered by DOM manipulation. The browser needs to recalculate the position of elements by upcoming change. To optimise this browser operation, ReactJS tries to minimize DOM manipulation operations. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser\u2019s displayed DOM efficiently. This allows developers to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change. That is how React increases the space complexity by keeping data structure in memory but reducing the processing cost by reducing the number of DOM manipulation an updated needs to make an actual DOM.<\/p>\n\n\n\n
22. How do you manage state in a bigger React native application?<\/a><\/h2>\n\n\n\nIn React, we follow component driven development, which means that we would be writing several stateful or stateless reusable components and combine them to build the entire application. Where your application is getting bigger then there are many instances where one component wants to access a state of any other component. One way to achieve this by putting a dependent component as children of the same parent and then can communicate via callbacks. <\/p>\n\n\n\n
These solutions work for small application but for a large application, passing callback from parent to innermost child element is cumbersome. That is where Redux comes in picture. Redux is a popular library to effectively maintain and manage the state of large React native application. It provides a store which keeps application level state and the developer needs to write actions and reducers to modify the state in the store. Any component can connect with the store by using Redux\u2019s high order component connect. any component can dispatch an action which reaches to the reducer and updates the state in the store.<\/p>\n\n\n\n
23. Are compile-to-JS libraries like TypeScript or ClojureScript compatible with React Native? Why or why not?<\/a><\/h2>\n\n\n\nAs javascript is evolving, people have started adding benefits of strictly typed languages like Java, C++. Typescript is one such framework which adds some very good features in javascript. But since those features are not supported by standard javascript yet, we would be needing tooling to convert the new concept in current concepts. That is done via using Babel in the build process. <\/p>\n\n\n\n
Languages that compile to JavaScript are generally compatible with React Native. React Native uses Babel to transform JavaScript into a form that is consumable by the native OS\u2019s JavaScript runtime, using the react-native Babel plugin. As long as Babel can compile your JavaScript, and your code does not rely on the web- or Node.js-specific dependencies, it will run in React Native. So we can use compile-to-js libraries with React native but we need to add steps in the build process to convert typescript to React Native\u2019s JS runtime consumable code.<\/p>\n\n\n\n
24. How does React Native achieve native performance for some of its animations?<\/a><\/h2>\n\n\n\nReact native provide Animated library out of the box which is designed to make animation fluid, maintainable and easy to build. It also provides a simple start\/stop method to control time-based animations. Certain animation types, like Animation.timing and Animation.spring, can be serialized and sent across the asynchronous bridge before they are executed. This allows the runtime to defer the actual drawing of the animation entirely to the native side, instead of trying to send positional values across the bridge as each frame is rendered. <\/p>\n\n\n\n
This does not work with animations that are not computable ahead of time. We can combine multiple animations and can chain different animation steps to produce complex animations. By setting useNativeDriver: true in the animated config, we send all the animation information to the native, before starting the animation. This allows native code to perform the animation on UI thread without having to go through the bridge on every frame.<\/p>\n\n\n\n
25. Native apps that feel smooth often incorporate lots of little animations for state changes and transitions. How would you implement these behaviours?<\/a><\/h2>\n\n\n\nReact Native comes with the Animated API built in. This API is declarative: We define specific animations, using Animated.timing, Animated.spring, etc., and provide the exact parameters needed for the animation to run. This technique falls apart when we need lots of subtle and delicate animations on the fly; it\u2019s not performant, and maintaining all that code would be a nightmare. Instead, we look to the LayoutAnimation module, which is an interpolative API. We can invoke predefined LayoutAnimations, or define our own. LayoutAnimation watches changes in the positions of elements between cycles of the render loop and computes the positional differences between elements at different cycles. Then, it interpolates those changes and produces a smooth, natively driven animation.<\/p>\n\n\n\n
26. What is the significance of keys in a component in React Native?<\/a><\/h2>\n\n\n\nIf you have ever iterated through an array to create a list of component and in case you missed adding a key attribute with new elements, then React throws a warning that key is not assigned to elements. React uses Keys to identify unique Virtual Elements with their corresponding data driving the UI. They help React to optimise the rendering by recycling all the existing elements in the component. <\/p>\n\n\n\n
You can say that React uses these user given key values to identify the nodes. It makes a decision based on these keys whether the node should be updated or not. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to an increase in the application\u2019s performance by reducing the number of elements manipulations. In case you don\u2019t find any unique value to assign to a node, the last resort will be to assign key of the node equals to index of the item.<\/p>\n\n\n\n
27. Can React native be used for building application for TV?<\/a><\/h2>\n\n\n\nYes, TV devices support has been implemented with the intention of making existing React Native applications “just work” on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. Since there are lots of similarity between IOS and TvOS APIs, it was double to add TV support in React native. But there are not many developers using React native for building TV application. So at one point, the community were discussing to remove it from the core library also, people were facing few problems while using React native to develop TV apps. That is why React native documentation has a place where they have mentioned that React native can be used to make TV apps with less to no example about it. So technically, yes React native does support TV but community support and better documentation are not yet available.<\/p>\n","protected":false},"excerpt":{"rendered":"
1. What\u2019s the real cause behind performance issues in React Native ?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":[],"categories":[198],"tags":[168],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2516"}],"version-history":[{"count":3,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516\/revisions"}],"predecessor-version":[{"id":2521,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516\/revisions\/2521"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
3. Describe Memory leak Issue in React Native , how can it be detected and resolved ?<\/h3>\n\n\n\n
In JavaScript memory is managed automatically by Garbage Collector (GC). In short, Garbage Collector is a background process that periodically traverses the graph of allocated objects and their references. If it happens to encounter a part of the graph that is not being referenced directly or indirectly from root objects (e.g., variables on the stack or a global object like window or navigator) that whole part can be deallocated from the memory. Detecting memory leaks for IOS:<\/strong> React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms.<\/p>\n\n\n\n iOS – Keychain Services<\/strong> Understanding of SSL:<\/strong><\/p>\n\n\n\n SSL (Secure Sockets Layer) and its successor, TLS (Transport Layer Security), are protocols for establishing authenticated and encrypted links between networked computers. One of the inherent risks to the SSL ecosystem is mis-issuance. This is when an unauthorized certificate is issued for a domain\/host you control. This can happen with both public and private PKIs (Public Key Infrastructure)<\/p>\n\n\n\n With SSL pinning, however, the application is configured to reject all but one or few predefined certificates, whenever the application connects to a server, it compares the server certificate with the pinned certificate(s) , if and only if they match the server is trusted and SSL connection is established.<\/p>\n\n\n\n It is sometimes necessary to make changes directly to a component without using state\/props to trigger a re-render of the entire subtree. When using React in the browser, for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node. The primary reason and an important one why well-built native apps feel so smooth are by avoiding expensive operations during interactions and animations. React Native has a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions\/animations have completed.<\/p>\n\n\n\n Applications can schedule tasks to run after interactions with the following:<\/p>\n\n\n\n Login functionality is an essential part of any mobile application. We can design a login component which performs a client-side validation and if it passes then make an API call to the server for authentication of the user. We can create a simple login screen using TextInput, View and Button component. Since Button component renders based on the platform, it will give different look and feel on IOS and Android. To avoid this, we can use TouchableOpacity to create a button component. TouchableOpacity component can be styled as per the requirement. Similar to Button component, TouchOpacity component also provides onPress props where we assign our click listener. Following code explains the implementation of a Login form<\/p>\n\n\n\n Username and password TextInputs are controlled component here as its value is getting stored as a state of the component. onPress event of the login button, we validate the user input and if everything looks good then we will make the API call for login. We style this component using Stylesheet. create method. We used normal CSS rules to make this form looks nice.<\/p>\n\n\n\n ScrollView component is a generic scrolling container which can host multiple components and Views. you can scroll both vertically and horizontally (by setting the horizontal property). ScrollView can also be used to implement pinch and zoom functionality in IOS. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component. ScrollView works best to present a small number of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen.<\/p>\n\n\n\n Above example renders a list of images in ScrollView. We import the ScrollView component from the react-native library and created Image element inside ScrollView. Each Image element has its own width and height set via CSS. When you run the above code and scrolls the screen you should be able to go through all the images renders. The scroll view is used to create scrollable UI on a mobile application. It works on both IOS and Android.<\/p>\n\n\n\n React native provides FlatList component to display a long line of data. For example, the News app normally displays a list to article summary card on the home page. these list of the card should be implemented using FlatList component. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently visible on the screen, not all the elements at once. FlatList provides a performance boost over ScrollView as FlatList creates a card at runtime when the user starts scrolling the page. But ScrollView creates all the list item (card) at once.<\/p>\n\n\n\n We can use FlatList or SectionList component to render a list of items on a mobile app. But there are differences between these two components provided by the react-native library. If you want to render a set of data broken into logical sections, maybe with section headers. It takes sections as props whose values is an array of object and each object should have title property. This titled property will be used by SectionList to render the list heading. But FlatList just iterates the list and create a node to render on UI. In case you want to show the header for a group of the list then you need to customize the node and add a header to it. The basic difference is heading for a group of a node is provided out of the box via SectionList component of react-native but with FlatList, we need to implement ourselves.<\/p>\n\n\n\n We can use javascript to develop a mobile application using React native. calling an API is very much similar to how we make AJAX call in web application. Below example explains it in detail.<\/p>\n\n\n\n In the above component, we are building a picture list component which makes API call and parse the response to show a list of images on a mobile screen. We can use the same fetch function to make an API call. Fetch method is introduced in the web as part of ES6 specification. Fetch is used in the same way we used to use on a web browser. First, we created a class-based component and assigned list of images as the state of a component. <\/p>\n\n\n\n Since we haven\u2019t made an API call yet that is why the initial state of out PictureList component will be an empty array. In the render method, if our state is empty which means, we haven’t received the response from a server that is why we are showing ActivityIndicator component provided by react-native. It is default spinner displayed on the screen. When our component is mounted then componentDidMount React lifecycle method get invoked, there we will make an API call and once we receive the response we update the state of PictureList component. Once the state is updated, the render method will get called and we render a list of images using FlatList and Image component.<\/p>\n\n\n\n We can divide all React Native components into two categories based on the internal state of the component. There are controls like textInput which have a value attribute. It is used to display user input value on UI. If the value displayed is controlled by the form control then it is known as an uncontrolled component because React is not setting or changing the value of these components. But if the state of the component is maintained by the state of the component then these components are called a controlled component. To make a component controlled, we assign the state of the component as the value of control elements and add a callback method which will update the state on each value change event. In React Native, it is preferred to have controlled component so that all the values and behaviour will get managed by React and developer will have full control over the state of components.<\/p>\n\n\n\n The basic definition of High order function is a function is called high order function if it either accept a function as an argument or returns another function. But now let\u2019s talk about the benefit of writing a high order function. In javascript, we are trying to write less amount of code and try to reuse the same code or functionality at many times as we can. High order function way of writing code allows us to implement currying in Javascript. Now, what is this currying? Currying is a way of writing code where you write a common functionality and change the functionality via argument. Let me give you an example:<\/p>\n\n\n\n This function is high order function as this returns a new function. This function will act as function generator for different functionalities. For example, I can create a double function by using the above high order function:<\/p>\n\n\n\n Similarly, I can use the same high order function to generate a triple function which takes the number as argument and return three times the number.<\/p>\n\n\n\n This type of function generation is known as currying in javascript. It is a better way of writing code as this decouples the base functionality with final logic. The base logic can be re-used at multiple places.<\/p>\n\n\n\n Just now, we have learned what high order functions are in Javascript and what are its benefits. With that knowledge, we can easily guess what a high order component will be and how it would be a good practise to use high order components wherever we can. Since components are also functions which are called as component in React world so High order components are components which take either component as an argument or returns another component. Higher order components are JavaScript functions used for adding additional functionalities to the existing component. <\/p>\n\n\n\n These components are the pure component which means it doesn\u2019t know any side effect. Its output is totally based on the input values. For example, connect function from a react-redux library is also a high order component. Connect takes mapStateToProps and mapDispatchToProps as an argument and returns a new component which can access redix store. The withProvider function of react-redux, the withRouter function of react-router are very well used function which is also an example of high order component.<\/p>\n\n\n\n Passing callback functions as a component prop is not new in Javascript world. We used to pass callback with events and also when we try to implement a controlled component. Slowly, react community has evolved a pattern based on passing a function as props. It is called the render prop pattern. The term \u201crender props\u201d refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. <\/p>\n\n\n\n You can think of this pattern as a child component will call the prop function and the return element will be inserted by the parent component. It gives a way so that a child component can modify the structure of the parent component without dealing with Refs. React router is one library that has used this pattern. Below is a very good example of how to render prop patterns work:<\/p>\n\n\n\n You can clearly see that render prop will be called by Fetch child component and it will insert the product detail node in the parent component.<\/p>\n\n\n\n In ReactJS, as your application size is growing, you are going to have so many small or big component. At this stage, it\u2019s always better to categorize and decided the roles and responsibilities of the component. Based on role and responsibilities, we can divide the component in two parts. One is a presentational component and another type of components are container component. We also call presentational component as a stateless component or dumb component. Container components are also known as a stateful component or smart component. It is very important to distinguish between the presentational component and the container component.<\/p>\n\n\n\n Presentational components show the following behaviour:<\/strong><\/p>\n\n\n\n A mobile application contains multiple screens and there has to be a way to navigate through multiple screens in the application. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. React Navigation (https:\/\/reactnavigation.org\/<\/a>) provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.<\/p>\n\n\n\n In Web development, if we don\u2019t give a size to an element either via CSS or setting the width and height attribute of an element then elements size would be 0. There are a few instances where the size of the element is determined based on the size of children. For example, if you have an image element in div then initially height of div element is 0 and once the image is fetched from server browser again calculated the size of div and place image inside div. The user experience of this element is not very good as size keeps changing in between. If this div is placed in the middle of other div elements then the whole page will fluctuate to absorb the size of the image. To avoid this behaviour, React native have decided not to automatically calculate the size of elements. Instead, it completely depends on the developer to give the width and height of elements by CSS.<\/p>\n\n\n\n Debugging code is a very important aspect of development. The importance of debugging can be understood by the fact that debugging is also considered as a skill in software development. If a developer has a good debugging skill then there are chances and code will be of better quality and very well tested. To cater to this requirement of a developer, React native has provided pretty good support to debug the code. <\/p>\n\n\n\n You can access the developer menu by shaking your device or by selecting “Shake Gesture” inside the Hardware menu in the iOS Simulator. You can also use the CMD + D keyboard shortcut when your app is running in the iOS Simulator, or CMD + M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. There are options to remotely debug the application via chrome browser. It will make the application a little slow but it is a good addition to enhance the development experience of the developer.<\/p>\n\n\n\n Virtual DOM was popularised by React core team member Pete Hunt. React explains its performance aspect by using this term. They explained that the DOM manipulation is always a heavy operation as browser reflow, repaint event gets triggered by DOM manipulation. The browser needs to recalculate the position of elements by upcoming change. To optimise this browser operation, ReactJS tries to minimize DOM manipulation operations. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser\u2019s displayed DOM efficiently. This allows developers to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change. That is how React increases the space complexity by keeping data structure in memory but reducing the processing cost by reducing the number of DOM manipulation an updated needs to make an actual DOM.<\/p>\n\n\n\n In React, we follow component driven development, which means that we would be writing several stateful or stateless reusable components and combine them to build the entire application. Where your application is getting bigger then there are many instances where one component wants to access a state of any other component. One way to achieve this by putting a dependent component as children of the same parent and then can communicate via callbacks. <\/p>\n\n\n\n These solutions work for small application but for a large application, passing callback from parent to innermost child element is cumbersome. That is where Redux comes in picture. Redux is a popular library to effectively maintain and manage the state of large React native application. It provides a store which keeps application level state and the developer needs to write actions and reducers to modify the state in the store. Any component can connect with the store by using Redux\u2019s high order component connect. any component can dispatch an action which reaches to the reducer and updates the state in the store.<\/p>\n\n\n\n As javascript is evolving, people have started adding benefits of strictly typed languages like Java, C++. Typescript is one such framework which adds some very good features in javascript. But since those features are not supported by standard javascript yet, we would be needing tooling to convert the new concept in current concepts. That is done via using Babel in the build process. <\/p>\n\n\n\n Languages that compile to JavaScript are generally compatible with React Native. React Native uses Babel to transform JavaScript into a form that is consumable by the native OS\u2019s JavaScript runtime, using the react-native Babel plugin. As long as Babel can compile your JavaScript, and your code does not rely on the web- or Node.js-specific dependencies, it will run in React Native. So we can use compile-to-js libraries with React native but we need to add steps in the build process to convert typescript to React Native\u2019s JS runtime consumable code.<\/p>\n\n\n\n React native provide Animated library out of the box which is designed to make animation fluid, maintainable and easy to build. It also provides a simple start\/stop method to control time-based animations. Certain animation types, like Animation.timing and Animation.spring, can be serialized and sent across the asynchronous bridge before they are executed. This allows the runtime to defer the actual drawing of the animation entirely to the native side, instead of trying to send positional values across the bridge as each frame is rendered. <\/p>\n\n\n\n This does not work with animations that are not computable ahead of time. We can combine multiple animations and can chain different animation steps to produce complex animations. By setting useNativeDriver: true in the animated config, we send all the animation information to the native, before starting the animation. This allows native code to perform the animation on UI thread without having to go through the bridge on every frame.<\/p>\n\n\n\n React Native comes with the Animated API built in. This API is declarative: We define specific animations, using Animated.timing, Animated.spring, etc., and provide the exact parameters needed for the animation to run. This technique falls apart when we need lots of subtle and delicate animations on the fly; it\u2019s not performant, and maintaining all that code would be a nightmare. Instead, we look to the LayoutAnimation module, which is an interpolative API. We can invoke predefined LayoutAnimations, or define our own. LayoutAnimation watches changes in the positions of elements between cycles of the render loop and computes the positional differences between elements at different cycles. Then, it interpolates those changes and produces a smooth, natively driven animation.<\/p>\n\n\n\n If you have ever iterated through an array to create a list of component and in case you missed adding a key attribute with new elements, then React throws a warning that key is not assigned to elements. React uses Keys to identify unique Virtual Elements with their corresponding data driving the UI. They help React to optimise the rendering by recycling all the existing elements in the component. <\/p>\n\n\n\n You can say that React uses these user given key values to identify the nodes. It makes a decision based on these keys whether the node should be updated or not. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to an increase in the application\u2019s performance by reducing the number of elements manipulations. In case you don\u2019t find any unique value to assign to a node, the last resort will be to assign key of the node equals to index of the item.<\/p>\n\n\n\n Yes, TV devices support has been implemented with the intention of making existing React Native applications “just work” on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. Since there are lots of similarity between IOS and TvOS APIs, it was double to add TV support in React native. But there are not many developers using React native for building TV application. So at one point, the community were discussing to remove it from the core library also, people were facing few problems while using React native to develop TV apps. That is why React native documentation has a place where they have mentioned that React native can be used to make TV apps with less to no example about it. So technically, yes React native does support TV but community support and better documentation are not yet available.<\/p>\n","protected":false},"excerpt":{"rendered":" 1. What\u2019s the real cause behind performance issues in React Native ?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":[],"categories":[198],"tags":[168],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2516"}],"version-history":[{"count":3,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516\/revisions"}],"predecessor-version":[{"id":2521,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2516\/revisions\/2521"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In React Native world each JS module scope is attached to a root object. Many modules, including React Native core ones, declare variables that are kept in the main scope (e.g., when you define an object outside of a class or function in your JS module). Such variables may retain other objects and hence prevent them from being garbage collected.
Some Causes of Memory Leak:<\/strong><\/p>\n\n\n\n
In Xcode,
Go to XCode \u2192 Product \u2192 Profile (\u2318 + i)
After that shows you all templates choose leaks.
Detecting memory leaks for Android :<\/strong>
Run React Native app normally (react-native run-android)
Run Android Studio
On the menu,
click Tools \u2192 Android \u2192 Enable ADB Integration
Click Tools \u2192 Android \u2192 Android Device Monitor
When Android Device Monitor shows up, click Monitor \u2192 Preferences
There is also one more way in Android
Perf Monitor (Performance Monitor) is a good choice to use for android leak monitoring.<\/p>\n\n\n\nImport PerfMonitor from 'react-native\/Libraries\/Performance\/RCTRenderingPerf';\nPerfMonitor.toggle();\nPerfMonitor.start();\nsetTimeout(() => {\n PerfMonitor.stop();\n}, 20000);\n}, 5000);<\/code><\/pre>\n\n\n\n4. Is there any out of the box way storing sensitive data in React ? If yes which and if not how can this be achieved ?<\/h3>\n\n\n\n
Keychain Services allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store certificates, tokens, passwords, and any other sensitive information that doesn\u2019t belong in Async Storage.
Android – Secure Shared Preferences#<\/strong>
Shared Preferences is the Android equivalent for a persistent key-value data store. Data in Shared Preferences is not encrypted by default, but Encrypted Shared Preferences wraps the Shared Preferences class for Android, and automatically encrypts keys and values.
Android – Keystore<\/strong>
The Android Keystore system lets you store cryptographic keys in a container to make it more difficult to extract from the device. In order to use iOS Keychain services or Android Secure Shared Preferences, you can either write a bridge yourself or use a library that wraps them for you and provides a unified API at your own risk. Some libraries to consider:<\/p>\n\n\n\n5. What is Network Security and SSL Pinning?<\/h3>\n\n\n\n
SSL\/TLS works by binding the identities of entities such as websites and companies to cryptographic key pairs via digital documents known as X.509 certificates. Each key pair consists of a private key and a public key. The private key is kept secure, and the public key can be widely distributed via a certificate.
Understanding of pinning <\/strong>
Pinning is an optional mechanism that can be used to improve the security of a service or site that relies on SSL Certificates. Pinning allows specifying a cryptographic identity that should be accepted by users visiting site\/app
Why do we need SSL pinning?<\/strong><\/p>\n\n\n\n
How is SSL pinning used in Mobile applications?<\/strong>
When mobile applications communicate with the server, they typically use SSL to protect the transmitted data against tampering. By default SSL implementations used, apps trust any server with a certificate trusted by the Operating systems trust store, This store is a list of certificate authorities that are shipped with the operating system.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n6. Explain setNativeProps. Does it create Performance issues and how is it used ?<\/h3>\n\n\n\n
Use setNativeProps when frequent re-rendering creates a performance bottleneck.
Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with setState and shouldComponentUpdate.<\/p>\n\n\n\n7. How to make your React Native app feel smooth on animations ?<\/h3>\n\n\n\n
InteractionManager.runAfterInteractions(() => {\n \/\/ ...long-running synchronous task...\n});<\/code><\/pre>\n\n\n\n8. How do you construct a logic screen in React Native?<\/a><\/h2>\n\n\n\n
<\/figure>\n\n\n\nimport React from 'react';\nimport { View, StyleSheet, Text, TouchableOpacity, TextInput, Alert } from \"react-native\";\nconst initialState = { username: '', password: '' };\nclass LoginForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n this.handleSubmitForm = this.handleSubmitForm.bind(this);\n this.handleUsernameChange = this.handleUsernameChange.bind(this);\n this.handlePasswordChange = this.handlePasswordChange.bind(this);\n }\n handleUsernameChange(text) {\n this.setState({ username: text });\n }\n handlePasswordChange(text) {\n this.setState({ password: text });\n }\n handleSubmitForm() {\n const { username, password } = this.state;\n Alert.alert(`User ${username} is log in with password ${password}`);\n }\n render() {\n return (\n <View style={styles.container}>\n <View>\n <Text style={styles.text}>Username<\/Text>\n <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} onChangeText={this.handleUsernameChange}><\/TextInput>\n <\/View>\n <View>\n <Text style={styles.text}>Password<\/Text>\n <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} secureTextEntry onChangeText={this.handlePasswordChange}><\/TextInput>\n <\/View>\n <TouchableOpacity style={styles.button} onPress={this.handleSubmitForm}>\n <Text style={[styles.text, styles.center]}>Login<\/Text>\n <\/TouchableOpacity>\n <\/View>\n );\n }\n}\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n margin: 10,\n padding: 10,\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#fff'\n },\n text: {\n fontSize: 14,\n fontWeight: 'bold',\n color: '#015169',\n paddingVertical: 5\n },\n input: {\n height: 40,\n borderColor: \"#e0e0e0\",\n borderWidth: 1,\n borderRadius: 5,\n marginBottom: 15,\n paddingHorizontal: 10\n },\n button: {\n padding: 10,\n borderColor: '#bee6fe',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd'\n },\n center: {\n alignSelf: 'center'\n }\n});\nexport default LoginForm;<\/pre>\n\n\n\n9. What is the ScrollView component of React Native?<\/a><\/h2>\n\n\n\n
import React from 'react';\nimport { View, Text, Image, ActivityIndicator, StyleSheet, ScrollView } from \"react-native\";\n\nconst initialState = { pictures: [\n{id:0, download_url:\"https:\/\/picsum.photos\/id\/0\/5616\/3744\" },\n{id:1, download_url: \"https:\/\/picsum.photos\/id\/1002\/4312\/2868\"},\n{id:2, download_url: \"https:\/\/picsum.photos\/id\/1006\/3000\/2000\"},\n{id:3, download_url: \"https:\/\/picsum.photos\/id\/1015\/6000\/4000\"}\n] };\nclass PictureList extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n }\n \n render() {\n const { pictures } = this.state;\n if (!pictures.length) { return (<ActivityIndicator \/>); }\n return (\n <View>\n <ScrollView>\n {pictures.map(picture => (\n <View style={styles.container} key={picture.id}>\n <Image style={styles.image} source={{uri: picture.download_url}} \/>\n <\/View>\n ))} \n \/>\n <\/View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd',\n marginBottom: 15,\n },\n image: {\n margin: 5,\n borderRadius: 5,\n width: 300,\n height: 300,\n }\n});\n\nexport default PictureList;<\/pre>\n\n\n\n10. What is FlatList and how is it better than ScrollView?<\/a><\/h2>\n\n\n\n
11. What is the difference between FlatList and SectionList?<\/a><\/h2>\n\n\n\n
12. How do you make Ajax call from React Native application? Give an example.<\/a><\/h2>\n\n\n\n
<\/figure>\n\n\n\nimport React from 'react';\nimport { View, Text, Image, ActivityIndicator, StyleSheet, FlatList } from \"react-native\";\n\nconst initialState = { pictures: [] }\nclass PictureList extends React.Component {\n constructor(props) {\n super(props);\n this.state = initialState;\n }\n async fetchPictures() {\n const api = 'https:\/\/picsum.photos\/v2\/list';\n const fetchResponse = await fetch(api);\n const pictures = await fetchResponse.json();\n this.setState({ pictures });\n }\n componentDidMount() {\n this.fetchPictures();\n }\n render() {\n const { pictures } = this.state;\n if (!pictures.length) { return (<ActivityIndicator \/>); }\n return (\n <View>\n <FlatList data={pictures} renderItem={({item}) => (\n <View style={styles.container} key={item.id}>\n <Image style={styles.image} source={{uri: item.download_url}} \/>\n <\/View>\n )} keyExtractor={(item, id) => item.id}\/>\n <\/View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n borderColor: '#ccc',\n borderWidth: 1,\n borderRadius: 5,\n backgroundColor: '#eaf7fd',\n marginBottom: 15,\n },\n image: {\n margin: 5,\n borderRadius: 5,\n width: 300,\n height: 300,\n }\n});\n\nexport default PictureList;<\/pre>\n\n\n\n13. What is a controlled and uncontrolled component?<\/a><\/h2>\n\n\n\n
14. What do you understand by high order function in javascript?<\/a><\/h2>\n\n\n\n
function multiplyBy(a) {\nreturn function(b) {\nreturn a * b;\n};\n}<\/pre>\n\n\n\nconst double = multiplyBy(2);\nconsole.log(double(4)) \/\/result: 8<\/pre>\n\n\n\n
const triple = multiplyBy(3);\nconsole.log(triple(4)) \/\/result: 12<\/pre>\n\n\n\n
15. What is a high order component in React Native?<\/a><\/h2>\n\n\n\n
16. What is rendering prop pattern in React Native?<\/a><\/h2>\n\n\n\n
const ProductDetail = ({ product }) => (\n <React.Fragment>\n <Text>{product.title}<\/Text>\n <Text>{product.description}<\/Text>\n <\/React.Fragment> )\n<Fetch url=\" some URL where my data is\"\n render={(data) => <ProductDetail product={data.product} \/> }\n\/><\/pre>\n\n\n\n17. What is a dumb component or presentational component in ReactJS?<\/a><\/h2>\n\n\n\n
18. How do you implement screen navigation functionality in React native?<\/a><\/h2>\n\n\n\n
19. What is the reason behind React native not automatically sizing everything?<\/a><\/h2>\n\n\n\n
20. How do you access the in-app developer menu in React native?<\/a><\/h2>\n\n\n\n
21. How virtual DOM works in React native?<\/a><\/h2>\n\n\n\n
22. How do you manage state in a bigger React native application?<\/a><\/h2>\n\n\n\n
23. Are compile-to-JS libraries like TypeScript or ClojureScript compatible with React Native? Why or why not?<\/a><\/h2>\n\n\n\n
24. How does React Native achieve native performance for some of its animations?<\/a><\/h2>\n\n\n\n
25. Native apps that feel smooth often incorporate lots of little animations for state changes and transitions. How would you implement these behaviours?<\/a><\/h2>\n\n\n\n
26. What is the significance of keys in a component in React Native?<\/a><\/h2>\n\n\n\n
27. Can React native be used for building application for TV?<\/a><\/h2>\n\n\n\n