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
Articles by Saba Hilal
Page 4 of 6
Using Tabs in Snack
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 MoreText 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 data in JSON format in Snack
There are lots of ways to use data with apps made with Snack Expo. Sometimes the data is stored as JSON, that mean JavaScript Object Notation. In this format, the data can be stored easily as Key-Value pairs and can also be converted to a CSV file. In this article, using javascript on Snack, the methods to use JSON data are specified. In example 1, the method to read this data and to display it as a table is given. In the second example, the methods of saving the JSON data as a CSV file and to download it, is ...
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 load CSS files using JavaScript?
Sometimes, the task is change the page themes and to use different CSS files on the same page content. In such tasks the need is to fetch a CSS and load it dynamically while selecting a theme. In this case the CSS file has to be accessed, loaded and even selected through a javascript program. Using HTML and javascript code this process of loading the CSS file is demonstrated in this article. This is shown by using two different examples. In the first example, a CSS file is selected on the windows load event. In the second example, two buttons ...
Read MoreHow to locate the user\'s position in HTML?
Sometimes, the task is to find the user’s current position and then to show the location coordinates on the webpage or show the location on a map. Using HTML and javascript code this process of getting the current location of the user in an HTML page is demonstrated in this article. This is shown by using two different examples. In the first example, the current location of the user can be fetched and then the location coordinates are displayed on the HTML page. In the second example, an open-source Leaflet map library is used to fetch and then display the ...
Read More