Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

1.

Explain Async Storage in React Native and also define when to use it and when to not?

Answer»
  • Async STORAGE is the React Native equivalent of Local Storage from the web.
  • Async Storage is a community-maintained module for React Native that provides an asynchronous, UNENCRYPTED, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.
DO USE ASYNC STORAGE WHEN..DON'T USE ASYNC STORAGE FOR..
PERSISTING non-sensitive data ACROSS app runsToken storage
Persisting Redux stateSecrets
Persisting GraphQL state 
Storing GLOBAL app-wide variables 
Discussion
2.

What are the Different Ways to style React Native Application ?

Answer»

React Native GIVE us two powerful ways by default to style our application :

1 ) Style props

You can add styling to your component using style props. You simply add style props to your ELEMENT and it accepts an object of properties.

import React, {Component} from 'react';import {Platform, StyleSheet, Text, View} from 'react-native';export default class APP extends Component<Props> {render() {return (<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}><View style={{width:200,height:150,backgroundColor:"red",padding:10}}><Text style={{fontSize:20, color:"#666"}}>Styled with style props</Text></View></View>);}}

 2 )  Using StyleSheet

For an EXTREMELY  large codebase or you want to set many properties to your elements, writing our styling rules directly inside style props will make our code more complex that’s why React Native give us another way that let us write a concise code using the StyleSheet method:

import { StyleSheet} from 'react-native';const styles = StyleSheet.create({container: {flex:1,justifyContent:"center",backgroundColor:"#fff",alignItems:"stretch"},title: {fontSize:20,color:"#fff"},item1: {backgroundColor:"orange",flex:1},item2: {backgroundColor:"purple",flex:1},item3: {backgroundColor:"yellow",flex:1},});

 We then  pass the styles object to our component via the style props:

<View style={styles.container}><View style={styles.item1}><Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text></View><View style={styles.item2}><Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text></View><View style={styles.item3}><Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text></View><View style={styles.item4}><Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text></View></View>

3 ) styled-components in React Native

We can also use styled-components with React native so you can write your styles in React Native as you write normal CSS. It is very easy to include it in your project and it doesn’t need any linking just run this FOLLOWING command inside the root directory of your app to install it:

yarn add styled-components

import React, {Component} from 'react';import { StyleSheet,Text, View} from 'react-native';import styled from 'styled-components'const Container=styled.View` flex:1; padding:50px 0; justify-content:center; background-color:#f4f4f4; align-items:center`const Title=styled.Text`font-size:20px;text-align:center;color:red;`const Item=styled.View`flex:1;border:1px solid #ccc;margin:2px 0;border-radius:10px;box-shadow:0 0 10px #ccc;background-color:#fff;width:80%;padding:10px;`export default class App extends Component { render() { return ( <Container> <Item > <Title >Item number 1</Title> </Item> <Item > <Title >Item number 2</Title> </Item> <Item > <Title >Item number 3</Title> </Item> <Item > <Title >Item number 4</Title> </Item> </Container> ); }
Discussion
3.

How To Use Routing with React Navigation in React Native ?

Answer»

One of the popular libraries for routing and navigation in a React NATIVE application is React Navigation.

This library HELPS solve the problem of navigating between MULTIPLE screens and sharing data between them.

import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();const MyStack = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="HOME" component={HomeScreen} options={{ title: 'Welcome' }} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> </NavigationContainer> );};
Discussion
4.

Explain FlatList components, what are its key features along with a code sample ?

Answer»

The FlatList component displays similarly structured data in a scrollable list. It works well for LARGE lists of data where the number of list items might change over time.

Key Feature:

The FlatList shows only those rendered elements which are currently displaying on the screen, not all the elements of the list at once.

import REACT, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View,ALERT } from 'react-native'; export default class FlatListBasics extends Component { renderSeparator = () => { return ( &LT;View style={{ height: 1, width: "100%", backgroundColor: "#000", }} /> ); }; //HANDLING onPress action getListViewItem = (item) => { Alert.alert(item.key); } render() { return ( <View style={styles.container}> <FlatList data={[ {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'}, {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'}, ]} renderItem={({item}) => <Text style={styles.item} onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>} ItemSeparatorComponent={this.renderSeparator} /> </View> ); } } AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
Discussion
5.

What are Touchable components in react Native and which one to use when ?

Answer»

Tapping GESTURES can be captured by Touchable components and can display feedback when a gesture is recognized.

Depending on what kind of feedback you want to provide we choose Touchable Components.

Generally, we use TouchableHighlight anywhere you would use a button or link on the WEB. The background of the view will be darkened when the user presses down on the button.

We can use TouchableNativeFeedback on Android to display ink SURFACE reaction ripples that respond to the user's touch.

TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.

If we need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.

import React, { Component } from 'react';import { Platform, STYLESHEET, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';export default class Touchables extends Component {_onPressButton() { alert('You tapped the button!') } _onLongPressButton() { alert('You long-pressed the button!') }render() {RETURN (<View style={styles.container}><TouchableHighlight onPress={this._onPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>TouchableHighlight</Text></View></TouchableHighlight>);}}
Discussion
6.

How can you write different code for IOS and Android in the same code base ? Is there any module available for this ?

Answer»

The platform MODULE detects the platform in which the app is running.

import { Platform, Stylesheet } from 'react-native';const styles = Stylesheet.create({height: Platform.OS === 'IOS' ? 200 : 400})

Additionally Platform.select method available that takes an object containing Platform.OS as KEYS and RETURNS the value for the platform you are currently on.

import { Platform, StyleSheet } from 'react-native';const styles = StyleSheet.create({ container: {FLEX: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'green', }, default: { // other platforms, web for example backgroundColor: 'blue', }, }),},});
Discussion
7.

What is ListView and describe its use in React Native ?

Answer»

React Native ListView is a VIEW component that contains the list of items and displays it in a vertically scrollable list.

export default class MyListComponent extends Component { constructor() { super(); const ds = new ListView.DATASOURCE({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']), };} RENDER() { return ( <ListView dataSource={this.state.dataSource} renderRow={ (rowData) => <Text style={{fontSize: 30}}>{rowData}</Text>} /> ); } }
Discussion
8.

Name core Components in React Native and the analogy of those components when compared with the web .

Answer»

The core components used in React NATIVE are <View> , <Text> , <Image> , <ScrollView> , <TextInput>

And analogy when compared Web can be explained by below diagram:

REACT NATIVE UI COMPONENTANDROID VIEWIOS VIEWWEB ANALOGDESCRIPTION
<View><ViewGroup><UIView>A non-scrolling <DIV>A container that supports layout with flexbox style, some touch handling, and accessibility controls.
<Text><TextView><UITextView><p>Displays, styles, and nests STRINGS of text and EVEN handles touch events.
<Image><ImageView><UIImageView><img>Displays different types of images
<ScrollView><ScrollView><UIScrollView><div>A generic scrolling container that can contain multiple components and views.
<TextInput><EditText><UITextField><input type="text">Allows the USER to enter text
Discussion
9.

What is a bridge and why is it used in React Native ? Explain for both android and IOS ?

Answer»

Bridge in ReactNative is a layer or simply a connection that is responsible for gluing 
together Native and JavaScript environments.

Consider Below diagram:

  • The layer which is closest to the device on which the application runs is the Native Layer.
     
  • The bridge is BASICALLY a transport layer which acts as a connection between Javascript and Native modules, it does the work of transporting asynchronous serialized batched response messages from JavaScript to Native modules.

    Now for an example, there is some STATE change that happens, because of which REACT Native will batch UPDATE UI and send it to the Bridge. The bridge will pass this Serialized batched response to the Native layer, which will process all commands that it can distinguish from a serialized batched response and will update the User Interface accordingly.

    IOS Platform:

 


     Android Platform:                      

         


 
Discussion
10.

How is the entire React Native code processed to show the final output on a mobile screen

Answer»
  • At the first start of the app, the main THREAD starts execution and starts loading JS bundles.
  • When JavaScript code has been loaded SUCCESSFULLY, the main thread SENDS it to another JS thread because when JS does some heavy calculations stuff the thread for a while, the UI thread will not suffer at all times.
  • When React starts rendering, Reconciler starts “diffing”, and when it generates a new virtual DOM(layout) it sends changes to another thread(Shadow thread).
  • Shadow thread calculates layout and then sends layout parameters/objects to the main(UI) thread. ( Here you may wonder why we call it “shadow”? It’s because it generates shadow nodes )
  • Since only the main thread is able to render something on the screen, the shadow thread should SEND the GENERATED layout to the main thread, and only then UI renders.
Discussion