Found 198 Articles for React JS

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

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