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

Bootstrap is a widely used front-end framework for building responsive and mobile-friendly web pages. It was initially created by Twitter and is now maintained by the Bootstrap team, which is an open-source community of developers. One of the primary benefits of Bootstrap is that it allows developers to create responsive designs that work seamlessly across different screen sizes and devices. This means that websites and applications built with Bootstrap can adapt to various devices, such as smartphones, tablets, and desktops, providing users with a consistent and engaging user experience. In this article, we’ll see how to split a column ... Read More

When using Forms on a webpage sometimes requires us to disable any input field. Like, to prevent the users from not allowing using some input fields until they have completed the previous steps in the form. The same can also be used for preventing users from submitting invalid data or fake data by disabling a form field until all required fields have been filled out. To solve the above problem, we have different methods that can be used to disable an input element in HTML, like using the "disabled" attribute, JavaScript, and CSS. In this article, we will see how ... Read More

Bootstrap is a CSS framework that is used widely used among developers to design the websites because it offers a variety of pre-built components that speed up the development time. Bootstrap has multiple features for the developers that can be used, Grid system is one such, that allows the developers to create responsive layouts quickly and easily. Grid layout is very commonly used while building any web application to organize the content into different columns and rows. The grid system in Bootstrap is designed to be more flexible and customizable so that the developers can create layouts that are ... Read More

To select last child with a specific class using CSS is a simple process using CSS psuedo-class selectors. In this article, we will understand three different approaches to select last child with a specific class using CSS. We are having four div elements in our HTML documnet, our task is to select the last child with a specific class using CSS. Approaches to Select Last Child using CSS Here is a list of approaches to select last child with a specific class using CSS which we will be discussing in this article with stepwise explaination and complete example codes. ... Read More