In some web applications, we require the user to take a date input. For example, we need to take the user's birth date or any other particular date as input. In such cases, it is a good idea to show the calendar to users and ask them to select the date rather than taking the date input as a string, as users can make mistakes in entering the string. In this tutorial, we will learn to add the calendar component using the built-in react js libraries or create a calendar component from scratch. Using the React-calendar Library to Create ... Read More

The material UI is a popular CSS library that we can use to style the React application. It contains various pre-styled React components that we can use directly in the application by importing them into the code. The 'dx-react-chart-material-ui’ is an NPM package of Devexpress that can connect the material-ui and ‘dx-react-chart’ library of dev express. The ‘dx-react-chart’ is used to create a chart, and material UI is used to style the chart. Users can execute the below command to install the material UI in the React application. npm install @mui/material @emotion/react @emotion/styled Also, execute the below command to ... Read More

Nowadays, OTT platforms are becoming more popular, and people are buying subscriptions to various OTT platforms to watch movies, TV shows, or services. Maybe, you can also start any OTT application. In this tutorial, we will learn to create a movie web application using React JS. However, We will learn to write only the basic code of movie applications. If users want, they can start with the below code and make improvements to create an advanced version of the movie web application. Users should follow the steps below to start with the movie web application. Step 1 − In ... Read More

Tabs are created to implement multipage views in apps. Tabs are often placed on the top or at the bottom of the screen. Some libraries permit making tabs in mobile apps. Tabs can use icons instead of text type of labels. In this article, the React native and javascript code is shown with two different examples where in the first example, createMaterialBottomTabNavigator from '@react-navigation/material-bottom-tabs' is used to make tabs and then rendering these as labels. In the other example, the icons from Ionicons are used to make tabs and then render these on the screen of the device. Algorithm-1 Step ... Read More

Audio is a common component of mobile apps. Audio can be used in apps in many ways. Audio can be selected from the mobile, it can be used from any online link, or can be included in the project itself as local audio. Expo-av can be used in all these cases for integrating sound into mobile apps. In this article, the React native and javascript code is shown with three different examples where in the first example, an audio file is browsed from the device. In the second example, the audio is taken from an online link and mixed with ... Read More

Sometimes, the task is to show a small bounded area with some text, picture, or colors and to retrieve more information from it later or to perform some actions on selecting that item. For this Card from react-native-paper can be used. More than one Card can also be used on a Screen, integrating it as a list item and it can be made clickable. In this article, the React native and javascript code is shown with two different examples where first a single card with an Image is used in an app, and in the second example multiple cards are ... Read More

Tabs are created to implement multipage views in apps. Tabs are often placed on the top or at the bottom of the screen. Some libraries permit making tabs in mobile apps. Tabs can also be made using simple components like buttons. In this article, the React native and javascript code is shown with two different examples where in the first example, the buttons are used to make tabs. In the other example, the createMaterialTopTabNavigator from '@react-navigation/material-top-tabs' is used to make tabs and then render these on the screen of the device. Algorithm 1 Step 1 − Import Text, View, StyleSheet, ... Read More

Text to Speech is an important area where the written language text is converted into speech form. For using Text to Speech conversion, functionality from expo-speech can be used. In this article, the React native and javascript code is shown with two different examples, where in the first example while showing the text-to-speech conversion, the pitch and speed change are shown along with the original conversion. In the second example, the pause, resume, and stop methods are demonstrated and the user can also enter the text at the time of conversion. Algorithm-1 Step 1 − Import Text, View, StyleSheet, and ... Read More

Sometimes, the task is to increment a number in a given range. For this different types of Sliders can be used. Different libraries permit using sliders in mobile apps. In this article, the React native and javascript code is shown with two different examples where in the first example, the '@react-native-community/slider' component “Slider” is used. In another example, the circular slider called the ArcSlider is used from "rn-arc-slider" to make a slider and then render it on the screen of the device. Example 1: Using Slider from 'react-native-community/slider' to print table of a number. Algorithm Step 1 − Import ... Read More

Sometimes, the task is to draw basic shapes such as lines, rectangles, circles, etc. in an app. For this, using Svg from 'react-native-svg' can be used. In this article, the React native and JavaScript code is shown with four different examples where in the first example, the 'react-native-svg' component “Svg” and Circle are used to draw the circles, stylize these and display these. In the second example, the different styles of circles are drawn in a concentric form. In the third example, how to make a clickable circle is shown. After clicking this, a simple alert shows a message. In ... Read More