Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Javascript Library Articles
Page 2 of 18
Text to Speech Examples in Snack
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 MoreUsing the Slider Examples in Snack
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 MoreUsing SVG Circles in Snack
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 MoreUsing Images in Snack
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 MoreUsing Lists in Snack
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 MoreMaking Two Screen App in Snack
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 MoreHow to conditionally disable the input taking in VueJS?
For removing the disabled property, we can use the disabled tag available in VueJS. The disabled tag basically checks for the boolean value and decides if the input tag needs to be displayed or not. We set the value in app.js and dynamically change its value based on the toggle feature. To apply the :disabled, we will first create a div element with id ‘app’. Once the div element is created, we can apply the disabled property to the element by initializing the data content. Syntax Following is the syntax to disable the input taking in Vue.js − @click ...
Read MoreHow to check if a string is palindrome or not without filters in VueJs?
Filters basically provides the functionality to check inputs and then apply different type of formatting or transformations to the same. The filter property of a component is an object that accepts a value and return some other confirgured value as a response. In this article, we will not use filters and therefore directly apply the logic to check if a string is a palindrome or not. For a string to be palindrome the string should be equal to its reverse string. Therefore, we have to first reverse the string and then check the equality of that string with the original ...
Read MoreHow to categorize a year as a Leap or Non-Leap using Vue?
Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them. In this article, we will use the Vue filters to check whether a string is a Leap year or not. A leap year has 366 days, whereas a non-Leap year has only 365 days. We can use logic to check whether a year is a Leap or not. ...
Read MoreHow to capitalize a String using VueJs filters?
Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and it is also easy to pick up other libraries or integrate with them. In the below article, we will see how to capitalize a particular string. Capitalizing is basically a process where only the first character of a string is in capital letters and remaining all the characters are in lower case. We can capitalize a string by getting the ...
Read More