Sometimes, the task is to pick the images from the mobile device and then show these images in Apps. For this ImagePicker from expo-image-picker can be used. In this article, the React native and javascript code is shown with two different examples where in the first example, the React Native component “Image” is used to select the image, resize and display it. In another example, the method to select the image from the computer or mobile device is shown and then rendering it on the screen of the device. Example 1: Resizing and Showing the Image by using React Native. ... Read More

Sometimes, the task is to store and display several items as a List. For this React Native component, Flatlist can be used. The FlatList can also be made selectable or clickable. In this article, the React native and javascript code is shown with two different examples where first the items of a list are stored as an array of key-value pairs identifiable with a unique id and then fetched and rendered. Algorithm Algorithm-1 Step 1 − Import FlatList, Text and View from 'react-native'. Step 2 − Make the App.js and write the code for storing a list. The list is ... Read More

In React native apps, multiple screens are often needed. And the user needs to go from one screen to the other screen. In this article, two different approaches are used to make the two-screen apps where the user can go from one screen to the other and back. In Example 1, the createStackNavigator module from 'react-navigation' is used to implement the navigation while in Example 2, for creating the navigation the createSwitchNavigator is used. Algorithm Algorithm 1 Step 1 − Import createStackNavigator from 'react-navigation' Step 2 − Make the App.js and write the code for navigation from one screen ... Read More

Sometimes, developers require to add the fixed options in the search box while creating the search bar. For example, you are developing a web application containing different web pages related to cars, bikes, other vehicles, etc. Also, you require to add a search bar on every web page. So, you may be required to add the fix tags like car, bike, or some car or bike brands as fixed tag in the search bar to highlight. In this tutorial, we will learn to add fixed options in search box in ReactJS using the AutoComplete component of the Material UI library. ... Read More

Updating the state of a React component is an essential part of building interactive and dynamic web applications. State management can become challenging as components become more complex and nested. This article will cover how to update the state of React components using callback functions, providing you with two different approaches and working examples to make your development process smoother. Algorithm Understand the state management in React components Choose the right approach for updating the state Implement the chosen approach with code and explanations Provide working examples to demonstrate the usage of the approach Conclude with the benefits of ... Read More

File transmission represents a vital aspect of any online platform, permitting users to effortlessly transfer and disseminate files among each other. With the proliferation of JavaScript libraries and frameworks, file uploading has become significantly easier, with React.js being no exception. In this treatise, we shall delve into the intricacies of file uploading in React.js, exploring the algorithmic approach, various methodologies, and functional illustrations. Algorithm At the crux of it, the act of file uploading in React.js entails transmitting a document from the user's machine to the host server. This is achieved by employing a form that comprises an input element ... Read More

The circular progress bar is an attractive UI for any application. We can show the circular loading indicator whenever our application fetches data from the server; users are uploading files or downloading data. Here, we will learn different approaches to creating a circular progress bar using the various libraries. Use the React-circular-progressbar NPM Package The react-circular-progressbar is an NPM package, and we can import the ‘circularProgressbar’ component. It takes value as a prop to show circular progress. Users should execute the below command in the terminal to install the react-circular-progressbar NPM package in the React application. npm i react-circular-progressbar Syntax ... Read More

The button is used to perform some actions like form submission, file upload, link click, web page routing etc. The Material Ui provides the pre-styled button component, which users can import into the React application and use inside the React component. Different variants of the button are available in the Material UI, and users can use any according to their requirements. Execute the below command in the terminal to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Button component of the Material Ui library. Click ... Read More

As the Box name suggests, it allows users to add the box of different dimensions on the web page. Users can also add any custom HTML content inside the Box component. Also, users can style the box by passing the style as props. To use the Box component of Material UI, users need to run the below command in the terminal to install the Material library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Box component of the Material UI library. Content of the Box. Users can see how ... Read More

The pagination allows users to show content on different pages. For example, we have thousands of data and want to show that to users on a single webpage. It will look worse if we show thousands of data on a single page, as users must scroll through all data to reach the last data. So, to solve the issue, pagination comes into the picture. We can show a particular number of data on a single page and create a total number of pages according to the total data available. Gmail is the best example of pagination, it shows 50 emails ... Read More