Infosys Certified React Native Developer

https://prepflix.in/questions/infosys

Updated on 7 March 2024

Do not attempt if it is older than 1 month. Request new Dumps from admin @prepflixadmin (Telegram)

Reena installed ionic native, but she is getting the following error while trying to preview the application over browser:
Native: tried calling Statusbar.styleDefault, but cordova is not available
How can this be resolved?

Option A

Execute the commands:

ionic cordova platform add browser

ionic cordova run browser

Option B

Execute the commands:

ionic cordova set browser

ionic cordova run browser

Option C

Execute the commands:

ionic cordova platform set browser

ionic cordova run browser

Option D

Execute the commands:

ionic cordova add browser

ionic cordova platform run browser

Correct Answer a

Which statements from below are TRUE about keys in React. Select all options that are applicable.

Option A Keys are used to identify unique Virtual DOM elements that are driving the UI.
Option B Keys are optional attribute in components.
Option C Since it is optional attribute in components React will not throw any warning for it and thus it is good to ignore adding any keys in JSX.
Option D Keys can be given any values like unique number or string, thus I can provide timestamp as a value to keys attribute.
Correct Answer abe

Alex wants to build a native mobile application. He wants to use React Native to code the application. Select the appropriate option from below:
Option A Same code will work on all OS
Option B Same code will work only on Android and iOS
Option C Have to code separately for each mobile OS
Option D Can only create Android apps using React Native
Correct Answer b

Dom wants to create a mobile banking application which needs to be highly secure. Which of the following would you normally chose to build it?

Option A React Native

Option B Kotlin
Option C Xamarin
Option D Swift
Correct Answer bcd

If React Native is creating pure native app and the built app (i.e, .apk, or .ipa) has javascript bundle in it , then how is the app a pure native app. Identify the CORRECT statement from below.
Option A React native doesn’t create a pure native app. It runs the bundles javascript bundle in the webview of the native platfrom. Thus it is just wrapping the javascript in a native executable container
Option B React native compiles and builds the javascript into native components, and thus the end ipa or apk doesn’t contain the bundle file rather the it contains the native corresponding code , ie. Objective-
c / swift code or java code in case of Android
Option C
React native uses the React Native’s Bridge layer to serialize,batch commands for native layer, for the javascript implemented components. It uses the javascript runtime provided by the native platform to do it without blocking the U
Option D React Native uses internally Apache cordova to create native app (i.e apk, ipa )
Correct Answer c

Is setState() an async operation? If yes, why is it async operation.

Option A setState is a not a async operation. setState update the state property as soon as it is called in the operation thus triggering a re-render of the component.
Option B setState is a async operation. React batches the setState operations for performance gains. This causes the state property to update and thus re-
rendering of component. Making it sync is an expensive operation and may leave the browser or native platform unresponsive.
Option C setState is a synchronous operation. It has to be synchronous because as soon as we update the state value we want it to be reflected on screen. Otherwise user will not see the right date on screen.
Option D setState is not at all async operation because we are not calling any external resource in setState. So it can’t be async operation.
Correct Answer b

Which of these statements is/are TRUE for state and props.

Option A Both state and props can receive initial value from parent components.
Option B Both state and props can be set with default values inside components.
Option C Both state and props can be changed ( i.e, assigned different values) inside the component.
Option D Parent component can change the value of both state and props.
Correct Answer ab
Raj was trying to figure out the flex property of React native.

import React, { Component } from 'react';

import { View, Text, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {

render() {
return (
<View style={styles.container}>
<View style={[styles.layout, styles.rowStretch]}>
<Text>
This is my sample test statement which i am using to test this
concept.
</Text>
</View>
<View style={[styles.layout, styles.columnStretch]}>
<Text>
This is another sample test statement which i am using to test this concept.
</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 1,
flexDirection: 'row',
},
layout: {
flex: 1,
padding: 15,
marginBottom: 5,
backgroundColor: 'whitesmoke',
flexDirection: 'row',
},
rowStretch: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'stretch',
},
columnStretch: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'stretch',
},
});

Choose the most appropriate output.

Option A The code will execute without any errors and both statements will be displayed in the same row as two coloumns
Option B The code will execute without any errors and both statements will be displayed in the different rows
Option C The code will execute without any errors but only the first statement will be displayed
Option D The code will run into errors
Correct Answer a

Which of these is the CORRECT statement for ‘ref’ in React?

Option A
Ref is added to the DOM element or an instance of a component to access it directly. It takes function as value which will receive the underlying DOM element or the mounted instance of the component as its first argument..
Option B Ref is only available in React.js and not in React-Native.
Option C Ref cannot be applied to the React Native’s core components.
Option D Ref is a way to access DOM element or instance of a component. It can be assigned a javascript object which the element can access as well.
Correct Answer a

Which is the CORRECT statement with respect to 'StyleSheet.create'?

Option A This method ensures that the style values created are immutable and opaque and they are only created once
Option B Stylesheet.create is method that can implement a function which takes javascript object as argument for the function
Option C Stylesheet.create method is very performance intensive operation and should be used carefully
Option D Stylesheet is imported from react package which also works well with React Native
Correct Answer a

Observe the following code and choose the appropriate option.

import React, { Component } from 'react';

import { FlatList, Text, StyleSheet } from 'react-native';
import { Constants } from 'expo';

const rows = [
{id: '0', text: 'Item 1'},
{id: '1', text: 'Item 2'},
{id: '2', text: 'Item 3'},
{id: '3', text: 'Item 4'},
{id: '4', text: 'Item 5'},
{id: '5', text: 'Item 6'},
{id: '6', text: 'Item 7'},
{id: '7', text: 'Item 8'},
{id: '8', text: 'Item 9'},
{id: '9', text: 'Item 10'},
{id: '10', text: 'Item 11'},
{id: '11', text: 'Item 12'},
{id: '12', text: 'Item 13'},
{id: '13', text: 'Item 14'},
{id: '14', text: 'Item 15'}
]

export default class App extends Component {

renderItem = ({item}) => {

return (
<Text style={styles.row}>
{item.text}
</Text>
)
}

render() {
return (
<FlatList
style={styles.container}
renderItem={this.renderItem}
 />
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 1
},
row: {
padding: 12,
marginBottom: 5,
backgroundColor: 'skyblue'
}
})

Option A

Will throw an error as FlatList is not supported in React Native

Option B

Add data={rows} to FlatList tag inside render() to get the expected result

Option C

Add data={rows} to Text tag inside renderItem to get the expected result

Option D

App will compile but will display blank screen

Correct Answer b

Observe the following code. Which among the options is true if you want to replace the "<placeholder>":

import * as React from 'react';

import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {

render() {
return (
<View>
<Text style={styles.mytag}>
This is my Tag
</Text>
</View>
);
}
}

const styles = StyleSheet.create({

mytag: <placeholder>
});

Option A

{
margin: 24,
font-size: 18,
font-weight: 'bold',
text-align: 'center',
background-color:blue
}

Option B {
margin: 24,
fontsize: 18,
fontweight: 'bold',
textalign: 'center',
backgroundcolor:blue
}
Option C {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor:'blue'
}
Option D {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
bgColor:'blue'
}
Correct Answer c

Which among the follwing are Touchable component(s) in React Native:

Option A TouchableHighlight
Option B TouchableOpacity
Option C TouchableNativeFeedback
Option D TouchableReactiveFeedback
Correct Answer abc

Jack wants to create a model for his application. He wants the elements to be scrollable horizontally. What modification (if any) should he do to the following code for this purpose:

import React from 'react';

import { ScrollView, View, Text, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

render() {
return (
<View style={styles.container} >
<ScrollView >
<View style={styles.boxSmall}>
<Text>Content 1</Text>
</View>
<View style={styles.boxSmall}>
<Text>Content 2</Text>
</View>
<View style={styles.boxSmall}>
 <Text>Content 3</Text>
</View>
</ScrollView>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight + 100,
flex: 1,
},
boxSmall: {
width: 200,
height: 200,
marginBottom: 5,
marginRight: 5,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
},
});

Option A Add horizontal attribute to View tag

Option B Add horizontal attribute to ScrollView tag
Option C Import and use HorizontalScrollView instead of normal ScrollView
Option D No need for any modifications
Correct Answer b

George Wants to display a list of names using FlatList. He wrote the below code. Predict the behavior of the same when he tries to run it

import React, { Component } from 'react';

import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

render() {
return (
<View style={styles.container}>
<FlatList data={fetchMyData} renderItem={fun} />
</View>
);
}
}
var fetchMyData = () => {
var myData = ['Bruce Wayne', 'Diana Prince', 'Clark Kent', 'Barry Allen'];
return myData;
};
const fun = ({ item }) => {
return <Text style={styles.item}>{item}</Text>;
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});

Option A The code will result in error

Option B The code will run without errors but he will get a blank page
Option C The code will run without errors and he will get the expected list as the output
Option D The code will run without errors and he will get only the first value as the output
Correct Answer b

Which of these is/are TRUE with respect to styling a React Native component.

Option A All core components provided by React Native accepts a prop called ‘style’
Option B In React Native styling is achieved using Javascript
Option C Style name and values usually match how css work on web, except name are written in camel-case
Option D

The style prop only accepts a JS object, we cannot pass an array of styles to this prop

Correct Answer abc

Oliver wants to create a mobile application using React Native. He wants to add routing to his application. He is a bit confused regarding the swipe and animation properties of his code and decided to consult with you.
Go through the code and choose the most appropriate option.

import React from 'react';

import { Text, View } from 'react-native';
import {
createMaterialTopTabNavigator,
createAppContainer,
} from 'react-navigation';

class HomeScreen extends React.Component {

render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Component!</Text>
</View>
);
}
}

class ProductScreen extends React.Component {

render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Product Component!</Text>
</View>
);
}
}

const TabNavigator = createMaterialTopTabNavigator(

{
Home: { screen: HomeScreen },
Product: { screen: ProductScreen, HomeScreen },
 },
{
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'gold',
},
}
);

export default createAppContainer(TabNavigator);

Option A Both swipe and animation during the swipe will be enabled by default
Option B Both swipe and animation will be disabled by default
Option C Swipe will be enabled by default but animation during the swipe should be enabled by setting animationEnabled property in createMaterialTopTabNavigator to true
Option D Animation will be enabled by default but swipe should be enabled by setting swipeEnabled property in createMaterialTopTabNavigator to true
Correct Answer a

Tyson wanted to create a rest call in react native. Observe the following code and choose the appropriate output.
(Assume "https://jsonplaceholder.typicode.com/comments" will return a list of objects in which email is a property of each object)

import React from 'react';

import { FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class FetchExample extends React.Component {

constructor(props){
super(props);
this.state ={ isLoading: true}
}

componentDidMount(){
return fetch('https://jsonplaceholder.typicode.com/comments').toObservable()
.subscribe((response) => response.json())
.subscribe((responseJson) => {

this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){

});

})
}

render(){

if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}

return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.email}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}

Option A Will display the list of email without any errors

Option B Will get an error because we are converting the response to json and then trying to access the email property
Option C Will get an error because we are using toObservable function wrongly
Option D The code will run without errors but he will get a blank page
Correct Answer c

What is/are the key principles of React Native’s Bridge Layer ?

Option A It is asynchronous layer
Option B It batches the commands
Option C It serializes the commands
Option D It has to be synchronous layer so that the javascript command gets passed to native layer synchronously
Correct Answer abc

Which if the default navigation option for Android?

Option A App Drawer

Option B Tabbed
Option C Off canvas
Option D Side menu
Correct Answer a

Which of the following is/are the CORRECT ways to manage data in React Native?
Option A using AsyncStorage
Option B using Redux
Option C using State
Option D using props
Correct Answer abcd

____________ is the component collection for data management

Option A Redux-Persist
Option B React Native Elements
Option C NativeBase
Option D Shoutem UI
Correct Answer a

Is it possible to combine the native ios and native android code in React Native?

Option A Yes, but you need expo CLI for it

Option B Yes, but you need CRNA CLI for it
Option C No, you can't
Option D Yes, you can use either expo or CRNA CLI for it
Correct Answer d
Tim wanted to use asyncStorage to store some data which is used in his application. He was testing it out. Observe the below code and choose an appropriate option.

import React, { Component } from 'react'

import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'

class App extends Component {

state = {
'alterEgo': ''
}
componentDidMount = () => AsyncStorage.getItem('alterEgo').subscribe((value) => this.setState({ 'alterEgo': value }))

setalterEgo = (value) => {

AsyncStorage.setItem('alterEgo', value);
this.setState({ 'alterEgo': value });
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setalterEgo}/>
<Text>
{this.state.alterEgo}
</Text>
</View>
)
}
}
export default App

const styles = StyleSheet.create ({

container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 50,
width:100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})

Option A Code runs fine without any error

Option B Code runs into error because the getItem function returns the direct value and we are trying to subscribe to it
Option C Code runs into error because the getItem function returns an observerable but we didnt write the error handling inside the subscribe method
Option D Code runs into error because the getItem function returns a promise object and we are trying to subscribe to it
Correct Answer d

________ is the library for declarative animations

Option A React Native Animatable
Option B Animated
Option C Layout Animation
Option D Native Animation
Correct Answer a

Which all statements are CORRECT from implementation perspective of Higher Order Components?

Option A HOC helps in Code reuse, logic and bootstrap abstraction.

Option B HOC is not a recommended practice as it is difficult to debug it.
Option C It helps in State abstraction and manipulation
Option D HOC helps in Props manipulation
Correct Answer acd

TextInput is one of the core component used for inputing text into app via a keyboard. This component takes 2 important props ‘onChange’ and ‘onChangeText’. Which of these statements is/are TRUE for these 2 props.
Option A Both of these props takes value as functions.
Option B
The callback on onChangeText is called when the text input's text changes. Changed text is passed as an argument to the callback handler. Whereas in onChange Callback that is called when the text input's text changes but no va
Option C There is no ‘onChangeText’ prop for TextInput component. Only ‘onChange’ prop is available.
Option D Both these props are available but ‘onChangeText’ is used only for ios platform and ‘onChange’ is used for Android paltfrom.
Correct Answer ab

What are the benefits of developing app using React Native over pure native development?

Option A We can use JS based technology to create pure native app

Option B
Using React Native , the Native App deployment experience becomes more similar as web app development. E.g while development we can instantly build/compile the code to see it on simulator, that is, hot reloading. Secondly, It c
Option C Since we are developing in javascript thus in React Native development we cannot use native components to write application
Option D

It is a framework to build cross-platform application with almost the same code base

Correct Answer abd

Choose the best option for <Placeholder A>, <Placeholder B>, <Placeholder C> so that the child views are displayed as vertical stripes, with equal space between each other and screen border, and spread from top to bottom
of the screen. Assume all the imports are properly done.

export default class App extends Component {

render() {
return (
<View style={styles.container}>
<View style={[styles.layout, styles.rowStretch]}>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
</View>
</View>
)
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 1
},
layout: {
flex: 1,
padding: 15,
marginBottom: 5,
 backgroundColor: 'whitesmoke'
},
box: {
padding: 20,
backgroundColor: 'steelblue',
margin: 5
},
rowStretch: {
flexDirection: '<Placeholder A>',
justifyContent: '<Placeholder B>',
alignItems: '<Placeholder C>'
}
})

Option A

<Placeholder A> = row

<Placeholder B> = space-around
<Placeholder C> = stretch

Option B

<Placeholder A> = column

<Placeholder B> = space-around
<Placeholder C> = stretch

Option C

<Placeholder A> = row

<Placeholder B> = space-between
<Placeholder C> = stretch

Option D

<Placeholder A> = column

<Placeholder B> = space-around
<Placeholder C> = flex-end

Correct Answer a

Which of the foloowing is the event that tracks change in Switch value?
Option A onValueChange
Option B onSwitchChange
Option C onDataChange
Option D onToggle
Correct Answer a

Assuming all the imports are properly done, choose the best option to run this application.

export default class App extends Component {

constructor(){
super();
this.state = {
name: ''
}
}

onChange(value){
this.setState({
name: value
})
}

render() {
return (
<View style={styles.container}>
<Placeholder A>
style={{height: 40}}
placeholder='Enter Name'
value={this.state.name}
<Placeholder B> = {(value) => this.onChange(value)}
/>
<Text style={styles.paragraph}>Hello {this.state.name}</Text>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
}
})

Option A

<Placeholder A> = Text

<Placeholder B> = onChange

Option B

<Placeholder A> = Text

<Placeholder B> = onChangeText

Option C

<Placeholder A> = TextInput

<Placeholder B> = onChangeText

Option D

<Placeholder A> = onChangeText

<Placeholder B> = TextInput

Correct Answer c

Select the libraries which I can use for Networking needs of my React Native apps
Option A Fetch Api
Option B ES2017 proposed async/await
Option C XMLHttpRequest API
Option D Third party libraries like axios
Correct Answer e

Select the appropriate statements in react native with respect to networking

Option A Fetch API can be used in React Native for making REST requests
Option B XMLHttpRequest API can be used in React Native for making REST requests
Option C CORS(Cross Origin Resource Sharing) issue can come into play while creating apps using React Native
Option D WebSockets are supported in React Native
Correct Answer abd

Match the following development approaches to their execution contexts

a.Native approach i. in-app browser context
b.Mobile web approach ii. device native runtime context
c.Web based hybrid approach iii.device browser context
Option A a-ii, b-iii, c-i
Option B a-ii, b-i, c-iii
Option C a-i, b-iii, c-ii
Option D a-i, b-ii, c-iii
Correct Answer a

Which of the following mobile app development approaches needs multiple codebases for different platforms?
Option A native
Option B hybrid
Option C mobile web
Option D MADP
Correct Answer a

Manu was trying to add styles to his React Native Project. Choose the appropriate option from below

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

var styles={};
export default class LotsOfStyles extends Component {
styles= StyleSheet.create({
color: {
padding:40,
color: 'red',
},
});
render() {
return (
<View>
<Text style={styles.color}>This is a test statement</Text>
</View>
);
}
}

Option A Will throw a run time error

Option B Will apply the color to
Option C Will not throw an error but won't apply the color to
Option D Should use InlineStyleSheet instead of StyleSheet to run this
Correct Answer c

Observe the following code and choose the most appropriate option.

import React from 'react';

import { View, Text } from 'react-native';
import {
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
} from 'react-navigation';

const Placeholder = ({ text }) => (

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{text}</Text>
</View>
);

class Home extends React.Component {

static navigationOptions = {
tabBarLabel: 'Home!',
};

render() {
return <Placeholder text="Home Component!" />;
}
}

class Product extends React.Component {

static navigationOptions = {
tabBarLabel: 'Products!',
};

render() {
return <Placeholder text="Products Component!" />;
}
}

let HomeStack = createStackNavigator({ Home });

let ProductStack = createStackNavigator({ Product });

export default createAppContainer(createBottomTabNavigator({

HomeStack,
ProductStack,
}));

Option A

Will run without errors and the tabs created will have the label "HomeStack" and "ProductStack"

Option B

Will run without errors and the tabs created will have the label "Home!" and "Products!"
Option C

Will run without errors and the tabs created will have the label "Home Component!" and "Products Component!"

Option D

Will result in error

Correct Answer a

In React Native, gestures are created using _________ API

Option A PanResponder
Option B PanHandler
Option C GestureResponder
Option D GestureHandler
Correct Answer a

What are the specific ways to write code specific to platform.

Option A Using the Platform module
Option B Using platform-specific file extensions
Option C You can only write common code for both platforms
Option D You can write platform specific code for Android but not for iOS
Correct Answer ab

Which if the below files is the entry point for react native apps created using react-native-cli?
Option A index.js
Option B App.js
Option C .watchmanconfig
Option D app.json
Correct Answer a

Observe the below code and choose the appropriate option.

import * as React from 'react';

import { View, Text, StyleSheet, WebView, Image,Img } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

render() {
return (
<View style={styles.container}>
<Image
source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
style={{ width: 75, height: 100 }}
/>
<Img
source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
style={{ width: 75, height: 100 }}
/>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'row'
},

});

Option A The code will run without any errors

Option B The code will run into errors because Image tag doesn't exist in react native
Option C The code will run into errors because Img tag doesn't exist in react native
Option D The code will run into errors because you cannot overide original dimensions of the image with style
Correct Answer c

Arjun was trying the flex property of React Native. He wrote the following code and tried to execute it.

import React, { Component } from 'react';

import { View, Text, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {

render() {
return (
<View style={styles.container}>
<View style={[styles.layout, styles.rowStretch]}>
<Text>
First statement with rowStretch.
</Text>
</View>
<View style={[styles.layout, styles.columnStretch]}>
<Text>
Second statement with columnStretch.
</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 0,
flexDirection: 'row',
},
layout: {
flex: 0,
padding: 15,
marginBottom: 5,
backgroundColor: 'whitesmoke',
flexDirection: 'column',
},
rowStretch: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'stretch',
},
columnStretch: {
 flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'stretch',
},
});

Choose the most appropriate output.

Option A The code will execute without any errors and both statements will be displayed
Option B The code will execute without any errors but only the first statement will be displayed
Option C The code will execute without any errors but only the second statement will be displayed
Option D The code will run into errors
Correct Answer b

Fetch API returns

Option A string
Option B JSON
Option C XML
Option D html
Correct Answer a

Which all statements is/are TRUE for Reducers in Redux?

Option A Reducers are pure functions which determines how the application state should change in response to an Action.
Option B Reducers take 2 arguments as input , the previous state and action object and it returns a new state.
Option C It returns nothing in case there is no update to the previous state.
Option D Reducers are defined as a switch case statement which determines the case based on the type property in action.
Correct Answer abd

Ray wants to create a rough layout using flex boxes in React Native. He wants a header on the top and a footer at the bottom. There should be two columns for writing the contents in between the header and the footer.
Choose the most appropriate option.

import React, { Component } from 'react';

import { View, Text, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {

render() {
return (
<View style={styles.container}>
<View style={[styles.layout, <Placeholder A> ]}>

<View style={styles.box} ><Text>Header</Text></View>

<View style={[styles.layout, <Placeholder B>]}>

<View style={styles.box} ><Text>Content1</Text></View>
<View style={styles.box} ><Text>Content2</Text></View>
</View>
<View style={styles.box} ><Text>Footer </Text></View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: Constants.statusBarHeight,
flex: 1,
},
layout: {
flex: 1,
padding: 15,
marginBottom: 5,
backgroundColor: 'whitesmoke',
},
box: {
padding: 20,
backgroundColor: 'steelblue',
margin: 5,
},
rowStretch: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'stretch',
},
columnStretch: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'stretch',
},
});

Option A

<Placeholder A> = styles.rowStretch

<Placeholder B> = styles.columnStretch

Option B

<Placeholder A> = styles.rowStretch

<Placeholder B> = styles.rowStretch

Option C

<Placeholder A> = styles.columnStretch

<Placeholder B> = styles.columnStretch

Option D

<Placeholder A> = styles.columnStretch

<Placeholder B> = styles.rowStretch

Correct Answer d

Zack wanted to create a sectionList for displaying his list of alterEgos using React Native. Choose the appropriate outcome you think the below code will result in

import React, { Component } from 'react';

import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

render() {
return (
<View style={styles.container}>
<SectionList
sections={myList}
renderItem={renderMyItems}
renderSectionHeader={renderMySections}
keyExtractor={myKeys}
/>
</View>
);
}
}

const myList = [
{
title: 'Male',
data: ['Bruce Wayne', 'Clark Kent', 'Barry Allen'],
},
{
title: 'Female',
data: ['Diana Prince', 'Mira'],
},
];
const renderMyItems = ({ item }) => {
return <Text style={styles.item}>{item}</Text>;
};
const renderMySections = ({ section }) => {
return <Text style={styles.sectionHeader}>{section.title}</Text>;
};
const myKeys = (item, index) => {
return index;
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});

Option A The code will run without errors and he will get the expected list as the output
Option B The code will run without errors but he will get a blank page
Option C The code will result in error
Option D The code will run without errors and he will get only the first value as the output
Correct Answer a

Mr.Wayne wanted to create a react native application. He wants to apply a border as well as a text color to a particular text. Below is the code he used for the same. Select the most appropriate result,
you think, he would end up with:

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

var styles = {};

export default class LotsOfStyles extends Component {

render() {
return (
<View>
<Text style={styles.color, { color: 'green' }}>
This is a test statement
</Text>
</View>
);
}
}

styles = StyleSheet.create({
color: {
color: 'blue',
padding: 30,
marginTop: 30,
borderRadius: 4,
borderWidth: 0.5,
borderColor: 'black',
},
});

Option A Will throw an error

Option B Will apply the border and green color to the text
Option C Will apply the border and blue color to the text
Option D Only the green color will be applied to the text
Correct Answer d

Which statement below are is/CORRECT about Redux?

Option A

Redux state is single of truth. State is read-only. Changes to redux state are made only through pure functions.

Option B Redux state are mutable object. Changes to redux state is made through reducer functions.
Option C Only Reducer can update the state of Redux. Reducer updates the state properties and returns the same state object.
Option D State in redux is an immutable javascript object with helper methods such as dispatch, subscribe available on it.
Correct Answer ad