React intermediate interview questions<\/strong><\/a> often focus on the key features and architectural decisions that make React Native stand out in the mobile development space.<\/p>\n Released by Facebook<\/strong> as an open-source project in 2015, React Native quickly gained traction and has become a go-to choice for mobile app development. Today, it powers apps used by millions of users<\/strong> globally, including Instagram<\/strong>, Facebook<\/strong>, and Skype<\/strong>.<\/p>\n The rise in popularity can be attributed to several factors:<\/p>\n Code Reusability<\/strong>: Write once, deploy on both iOS and Android. This saves developers and companies a huge amount of time and resources<\/strong>.<\/p>\n<\/li>\n Familiar Foundation<\/strong>: Built on top of React<\/strong>\u2014a widely used JavaScript library\u2014React Native was instantly familiar to many developers.<\/p>\n<\/li>\n Empowered Frontend Developers<\/strong>: React Native enabled frontend web developers to start building production-ready mobile apps<\/strong> without learning native iOS or Android development from scratch.<\/p>\n<\/li>\n<\/ul>\n Like many game-changing technologies, React Native was born from a need to fix a major internal issue at Facebook. What started as a solution to a problem turned into one of the most revolutionary tools in mobile app development<\/strong>.<\/p>\n If you’re preparing for a job or technical interview, focusing on intermediate react interview questions<\/strong> is crucial. These often dive into topics like:<\/p>\n Navigation using React Navigation<\/strong><\/p>\n<\/li>\n Efficient State Management<\/strong> (Redux, Context API)<\/p>\n<\/li>\n Performance Optimization<\/strong> in large-scale apps<\/p>\n<\/li>\n Managing asynchronous operations<\/strong> with Understanding the bridge<\/strong> between JavaScript and native code<\/p>\n<\/li>\n<\/ul>\n 1. How is the entire React Native code processed to show the final output on a mobile screen ?<\/a><\/p>\n These are important react intermediate interview questions<\/strong> that test your understanding of the React Native threading model and rendering pipeline.<\/p>\n 2. What is a bridge and why is it used in React Native ? Explain for both android and IOS ?<\/a><\/p>\n Bridge in ReactNative is a layer or simply a connection that is responsible for gluing 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.<\/p>\n 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.<\/p>\n Understanding the Bridge<\/strong> is often part of intermediate react interview questions<\/strong> because it highlights performance implications and native interactions.<\/p>\n 3. How do you create a basic button in React Native ?<\/a><\/p>\n We can create basic buttons using the following syntax: <import { View, Button, StyleSheet } from \u201creact-native\u201d>. Basic buttons support a minimal level of customization and can be modified using TouchableOpacity or TouchableWithoutFeedback.<\/p>\n 4. What is ListView and describe its use in React Native ?<\/a><\/p>\n ListView<\/strong> is a component for displaying vertically scrollable lists of changing data. Though now deprecated in favor of 5. How can you write different code for IOS and Android in the same code base ? Is there any module available for this ?<\/a><\/p>\n The platform module detects the platform in which the app is running.<\/p>\n 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.<\/p>\n Or use 6. What are Touchable components in react Native and which one to use when ?<\/a><\/p>\n Tapping gestures can be captured by Touchable components and can display feedback when a gesture is recognized.<\/p>\n Depending on what kind of feedback you want to provide we choose Touchable Components.<\/p>\n 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.<\/p>\n We can use TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user\u2019s touch.<\/p>\n 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.<\/p>\n If we need to handle a tap gesture but you don\u2019t want any feedback to be displayed, use TouchableWithoutFeedback.<\/p>\n 7. Explain FlatList components, what are its key features along with a code sample ?<\/a><\/p>\n FlatList<\/strong> is preferred for rendering large data sets efficiently by only rendering items visible on screen. It\u2019s a common question in intermediate react interview questions<\/strong>.<\/p>\n Key Feature:<\/strong><\/p>\n The FlatList shows only those rendered elements which are currently displaying on the screen, not all the elements of the list at once.<\/p>\n 8. How To Use Routing with React Navigation in React Native ?<\/a><\/p>\n One of the popular libraries for routing and navigation in a React Native application is React Navigation.<\/p>\n This library helps solve the problem of navigating between multiple screens and sharing data between them.<\/p>\n 9. What are the Different Ways to style React Native Application ?<\/a><\/p>\n React Native give us two powerful ways by default to style our application :<\/p>\n 1 ) Style props<\/strong><\/p>\n 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.<\/p>\n \u00a02 ) \u00a0Using StyleSheet<\/strong><\/p>\n For an extremely \u00a0large 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\u2019s why React Native give us another way that let us write a concise code using the StyleSheet method:<\/p>\n We then \u00a0pass the styles object to our component via the style props:<\/p>\n 3 ) styled-components in React Native<\/strong><\/p>\n 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\u2019t need any linking just run this following command inside the root directory of your app to install it:<\/p>\n yarn add styled-components<\/p>\n 10. Explain Async Storage in React Native and also define when to use it and when to not?<\/a><\/p>\nWhy Is React Native So Popular?<\/h4>\n
\n
The Origin Story: React Native\u2019s Accidental Innovation<\/h4>\n
Preparing with Intermediate React Interview Questions<\/h3>\n
\n
async\/await<\/code> or Redux Saga<\/p>\n<\/li>\nTop 15+ Intermediate React Native Interview Questions<\/h2>\n
![\"react](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/Top-15-Intermediate-React-Native-Interview-Questions.png\")
\n
\ntogether Native and JavaScript environments.<\/p>\n\n
FlatList<\/code>, it’s still asked in react js intermediate interview questions<\/strong>.<\/p>\nexport default class MyListComponent extends Component { \nconstructor() { \nsuper(); \nconst ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); \nthis.state = { \ndataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']), \n};\n} \nrender() { \nreturn ( \n<ListView \ndataSource={this.state.dataSource} \nrenderRow={ \n(rowData) => \n<Text style={{fontSize: 30}}>{rowData}<\/Text>} \/> \n); } \n}<\/code><\/pre>\nimport { Platform, Stylesheet } from 'react-native';\nconst styles = Stylesheet.create({\nheight: Platform.OS === 'IOS' ? 200 : 400\n})<\/code><\/pre>\nimport { Platform, StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n container: {\nflex: 1,\n ...Platform.select({\n ios: {\n backgroundColor: 'red',\n },\n android: {\n backgroundColor: 'green',\n },\n default: {\n \/\/ other platforms, web for example\n backgroundColor: 'blue',\n }, }),\n},\n});<\/code><\/pre>\nPlatform.select()<\/code> for cleaner logic. This ensures platform-specific behavior in one codebase\u2014a popular topic in react intermediate interview questions<\/strong>.<\/p>\nimport React, { Component } from 'react';\nimport { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';\nexport default class Touchables extends Component {\n_onPressButton() {\n alert('You tapped the button!') }\n _onLongPressButton() {\n alert('You long-pressed the button!')\n }\nrender() {\nreturn (\n<View style={styles.container}>\n<TouchableHighlight onPress={this._onPressButton} underlayColor="white">\n<View style={styles.button}>\n<Text style={styles.buttonText}>TouchableHighlight<\/Text>\n<\/View>\n<\/TouchableHighlight>\n);}\n}<\/code><\/pre>\nimport React, { Component } from 'react'; \nimport { AppRegistry, FlatList, \n StyleSheet, Text, View,Alert } from 'react-native'; \n\nexport default class FlatListBasics extends Component { \n \n renderSeparator = () => { \n return ( \n <View \n style={{ \n height: 1, \n width: "100%", \n backgroundColor: "#000", \n }} \n \/> \n ); \n }; \n \/\/handling onPress action \n getListViewItem = (item) => { \n Alert.alert(item.key); \n } \n \n render() { \n return ( \n <View style={styles.container}> \n <FlatList \n data={[ \n {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'}, \n {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'}, \n ]} \n renderItem={({item}) => \n <Text style={styles.item} \n onPress={this.getListViewItem.bind(this, item)}>{item.key}<\/Text>} \n ItemSeparatorComponent={this.renderSeparator} \n \/> \n <\/View> \n ); \n } \n} \nAppRegistry.registerComponent('AwesomeProject', () => FlatListBasics); <\/code><\/pre>\nimport * as React from 'react';\nimport { NavigationContainer } from '@react-navigation\/native';\nimport { createStackNavigator } from '@react-navigation\/stack';\n\nconst Stack = createStackNavigator();\n\nconst MyStack = () => {\n return (\n <NavigationContainer>\n <Stack.Navigator>\n <Stack.Screen\n name="Home"\n component={HomeScreen}\n options={{ title: 'Welcome' }}\n \/>\n <Stack.Screen name="Profile" component={ProfileScreen} \/>\n <\/Stack.Navigator>\n <\/NavigationContainer>\n );\n};<\/code><\/pre>\nimport React, {Component} from 'react';\nimport {Platform, StyleSheet, Text, View} from 'react-native';\nexport default class App extends Component<Props> {\nrender() {\nreturn (\n<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}>\n<View style={{width:200,height:150,backgroundColor:"red",padding:10}}>\n<Text style={{fontSize:20, color:"#666"}}>Styled with style props<\/Text>\n<\/View>\n<\/View>\n);\n}\n}<\/code><\/pre>\nimport { StyleSheet} from 'react-native';\nconst styles = StyleSheet.create({\ncontainer: {\nflex:1,\njustifyContent:"center",\nbackgroundColor:"#fff",\nalignItems:"stretch"\n},\ntitle: {\nfontSize:20,\ncolor:"#fff"\n},\nitem1: {\nbackgroundColor:"orange",\nflex:1\n},\nitem2: {\nbackgroundColor:"purple",\nflex:1\n},\nitem3: {\nbackgroundColor:"yellow",\nflex:1\n},\n\n});<\/code><\/pre>\n<View style={styles.container}>\n<View style={styles.item1}>\n<Text style={{fontSize:20, color:"#fff"}}>Item number 1<\/Text>\n<\/View>\n<View style={styles.item2}>\n<Text style={{fontSize:20, color:"#fff"}}>Item number 1<\/Text>\n<\/View>\n<View style={styles.item3}>\n<Text style={{fontSize:20, color:"#fff"}}>Item number 1<\/Text>\n<\/View>\n<View style={styles.item4}>\n<Text style={{fontSize:20, color:"#fff"}}>Item number 1<\/Text>\n<\/View>\n<\/View><\/code><\/pre>\nimport React, {Component} from 'react';\nimport { StyleSheet,Text, View} from 'react-native';\nimport styled from 'styled-components'\nconst Container=styled.View`\n flex:1;\n padding:50px 0;\n justify-content:center;\n background-color:#f4f4f4;\n align-items:center\n`\nconst Title=styled.Text`\nfont-size:20px;\ntext-align:center;\ncolor:red;\n`\nconst Item=styled.View`\nflex:1;\nborder:1px solid #ccc;\nmargin:2px 0;\nborder-radius:10px;\nbox-shadow:0 0 10px #ccc;\nbackground-color:#fff;\nwidth:80%;\npadding:10px;\n\n`\n\nexport default class App extends Component {\n render() {\n return (\n <Container>\n <Item >\n <Title >Item number 1<\/Title>\n <\/Item>\n <Item >\n <Title >Item number 2<\/Title>\n <\/Item>\n <Item >\n <Title >Item number 3<\/Title>\n <\/Item>\n <Item >\n <Title >Item number 4<\/Title>\n <\/Item>\n <\/Container>\n );\n }<\/code><\/pre>\n\n