Mobile App Development
React Native
4.6 Rating 93 Questions 30 mins read999 Readers
Mobile App Development
4.6 Rating 93 Questions 30 mins read999 Readers
To handle global state in a React Native app, I use state management libraries like Redux or the Context API:
Redux: Provides a centralized store for the entire application state, making it easy to manage and debug state changes. Redux uses actions, reducers, and a store to manage state.
Context API: Allows passing data through the component tree without manually passing props at every level. It's useful for smaller applications or when you don't need the full power of Redux.
Both methods help maintain a consistent state across the app, reducing the complexity of prop drilling.
The useEffect hook in React Native allows us to perform side effects in functional components. It can be used for:
useEffect runs after the initial render and can re-run based on dependencies, making it versatile for managing side effects.
To handle navigation between screens in React Native, I use the React Navigation library. It provides:
React Navigation is highly customizable and supports deep linking, providing a seamless navigation experience across different platforms.
Optimizing performance in a React Native app involves several strategies:
These techniques help improve the app's responsiveness and reduce resource consumption.
The differences between componentDidMount and useEffect are:
Using useEffect provides greater flexibility and aligns with the functional programming approach.
React Native Overview:
UI Development:
Compose mobile application UI using multiple components declaratively.
Comparison with Previous Options:
Performance:
Community and Popularity:
There are following benefits of using React Native in mobile application development
Javascript developer always tried to explore platforms where Javascript can be used to build better user experiences. React native is not the first framework which enables web developers to build applications for the mobile platform. Ionic, Cordova were few very popular application framework which was used to develop a mobile application using web technologies. One major motivation towards this effort was having a seamless experience on all the platforms. Mobile application developed with React Native is different than alternate frameworks in the following ways:
Many renowned companies are developing their mobile apps with React Native. Big names like Facebook, Airbnb, Instagram, Pinterest, Uber, and Tesla have their main consumer-facing mobile apps built using this framework. This widespread adoption demonstrates their trust in React Native.
Airbnb was an early adopter of React Native and actively shared their experiences with the framework. They also open-sourced many React Native libraries they built, one of the most famous being Lottie, which enables complex animations in React Native.
Many startups are also using React Native to build their mobile apps, allowing them to quickly launch their ideas on both Android and iOS platforms simultaneously. Instagram, another example, uses React Native and handles large user interactions effectively.
This clearly shows that React Native is a mature and robust mobile app development framework available today.
Developer experience is one of the most important attributes of a framework. If getting started step with any framework is very difficult and very complex then the community will take lots of time to accept that framework. That is why React native has tried their best to simplify the getting started step for app development. To build a mobile app with React Native, one should have a good understanding of Javascript concepts and understanding of CSS helps in styling React Native app. React Native provide CLI (command line interface) which is used to bootstrap the mobile application.
For IOS development Xcode and for Android app development, Android studio is required. Understanding of component driven development with ReactJs is also very beneficial in React Native app development. There is one more open source project named Expo CLI which provides a command line utility to easily start development of React native. It also provides barcode based approach to share the app within the team. Developer experience is pretty good for React native that is also one of the reasons for its huge popularity in the developer community.
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
import React from 'react';
import { View, StyleSheet, Text, TouchableOpacity, TextInput, Alert } from "react-native";
const initialState = { username: '', password: '' };
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
this.handleSubmitForm = this.handleSubmitForm.bind(this);
this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
}
handleUsernameChange(text) {
this.setState({ username: text });
}
handlePasswordChange(text) {
this.setState({ password: text });
}
handleSubmitForm() {
const { username, password } = this.state;
Alert.alert(`User ${username} is log in with password ${password}`);
}
render() {
return (
<View style={styles.container}>
<View>
<Text style={styles.text}>Username</Text>
<TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} onChangeText={this.handleUsernameChange}></TextInput>
</View>
<View>
<Text style={styles.text}>Password</Text>
<TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} secureTextEntry onChangeText={this.handlePasswordChange}></TextInput>
</View>
<TouchableOpacity style={styles.button} onPress={this.handleSubmitForm}>
<Text style={[styles.text, styles.center]}>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
margin: 10,
padding: 10,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
backgroundColor: '#fff'
},
text: {
fontSize: 14,
fontWeight: 'bold',
color: '#015169',
paddingVertical: 5
},
input: {
height: 40,
borderColor: "#e0e0e0",
borderWidth: 1,
borderRadius: 5,
marginBottom: 15,
paddingHorizontal: 10
},
button: {
padding: 10,
borderColor: '#bee6fe',
borderWidth: 1,
borderRadius: 5,
backgroundColor: '#eaf7fd'
},
center: {
alignSelf: 'center'
}
});
export default LoginForm;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.
This, along with other React Native basic interview questions for freshers, is a regular feature in React Native interviews, be ready to tackle it with the approach mentioned.
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.
import React from 'react';
import { View, Text, Image, ActivityIndicator, StyleSheet, ScrollView } from "react-native";
const initialState = { pictures: [
{id:0, download_url:"https://picsum.photos/id/0/5616/3744" },
{id:1, download_url: "https://picsum.photos/id/1002/4312/2868"},
{id:2, download_url: "https://picsum.photos/id/1006/3000/2000"},
{id:3, download_url: "https://picsum.photos/id/1015/6000/4000"}
] };
class PictureList extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
}
render() {
const { pictures } = this.state;
if (!pictures.length) { return (<ActivityIndicator />); }
return (
<View>
<ScrollView>
{pictures.map(picture => (
<View style={styles.container} key={picture.id}>
<Image style={styles.image} source={{uri: picture.download_url}} />
</View>
))}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
backgroundColor: '#eaf7fd',
marginBottom: 15,
},
image: {
margin: 5,
borderRadius: 5,
width: 300,
height: 300,
}
});
export default PictureList;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.
Expect to come across this, one of the most important React Native interview questions for experienced professionals in mobile app development, in your next interviews.
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.
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.
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.
import React from 'react';
import { View, Text, Image, ActivityIndicator, StyleSheet, FlatList } from "react-native";
const initialState = { pictures: [] }
class PictureList extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
}
async fetchPictures() {
const api = 'https://picsum.photos/v2/list';
const fetchResponse = await fetch(api);
const pictures = await fetchResponse.json();
this.setState({ pictures });
}
componentDidMount() {
this.fetchPictures();
}
render() {
const { pictures } = this.state;
if (!pictures.length) { return (<ActivityIndicator />); }
return (
<View>
<FlatList data={pictures} renderItem={({item}) => (
<View style={styles.container} key={item.id}>
<Image style={styles.image} source={{uri: item.download_url}} />
</View>
)} keyExtractor={(item, id) => item.id}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
backgroundColor: '#eaf7fd',
marginBottom: 15,
},
image: {
margin: 5,
borderRadius: 5,
width: 300,
height: 300,
}
});
export default PictureList;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.
Since we haven’t 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.
A must-know for anyone looking for top React Native interview questions and answers, this is one of the frequently asked React Native interview questions based on actual use cases.
