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 on Trending Technologies
Technical articles with clear explanations and examples
Explain the importance of SafeViewArea in React Native?
The SafeViewArea component is meant to display your content in the safe boundaries of the device.It takes care of adding padding and also makes sure to not cover your content with navigation bar, toolbar, tab bars etc. This component is available only for iOS devices and here is a working example of the same.Let us understand with the help of an example the advantage of using SafeAreaView.Consider the following example that makes use of the View component to display text “Welcome to Tutorialspoint!”.ExampleDisplay Text “Welcome to Tutorialspoint!” inside View componentThe style flex: 1 is used on the View component. The ...
Read MoreHow to show ProgressBar in ReactNative?
ProgressBar is a way to tell users that the content will be available in sometime. It can best be used when you submit something to the server and wait for the server to respond.To work with the progress bar component install react-native-paper module using npm.The command to install react-native-paper is −npm install --save-dev react-native-paperThe basic component of progress bar is as follows−To work with Progress Bar you need to import it from react-native-paper as follows −import { ProgressBar} from 'react-native-paper';Following are some of the important properties available on ProgressBar −Sr.NoProps & Description1progressIt takes value from 0 to 10. The number ...
Read MoreHow to display loading indicator in React Native?
Loading indicator is used when we want to tell the user the request they made on the UI will take time. In case the user has clicked on the submit button after filling the form, or has clicked on the search button to get some data.ReactNative offers an ActivityIndicator component that has different ways to show loading indicators on the UI.The basic ActivityIndicator component is as follows −To work with ActivityIndicator you need to import it as follows −import { ActivityIndicator} from 'react-native';Here are some of the important properties available with ActivityIndicator.Sr.NoProps & Description1animatingFor animating the loading indicator.It takes boolean ...
Read MoreWrite a program to display "Hello World" in react native?
Once ReactNative is installed on your system, you should get a default code in App.js as follows −import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( Open up App.js to start working on your app! Changes you make will automatically reload. Shake your phone to open the developer menu. ...
Read MoreHow to load data from a server in React Native?
To load data from the server you can make use of the fetch API that is similar to XMLHttpRequest or any other networking api’s.It is very easy to make a request to the server using fetch. Take a look at the following code −fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()) .then((responseJson) => console.log(responseJson));In above code we are fetching the JSON file https://jsonplaceholder.typicode.com/posts/1 and printing the data to the console. The simplest call to fetch() API takes in one argument i.e the path you want to fetch and it returns a promise with response.The fetch api returns a promise with http response, ...
Read MoreHow to work with Alerts Dialog box in ReactNative?
The Alert component helps to show a dialog box i.e., a pop up to the user with a title, message, buttons to know the confirmation from the user based on the message displayed.The basic component of Alert is as follows −Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)To work with Alert component you need to import it as follows −import { Alert } from 'react-native';To get the pop-up you just have to call the Alert.alert() function. There are four params the alert() takes and it is title, message, buttons and options. The title is mandatory param and rest are optional.Here is a simple example ...
Read MoreList some benefits of using React Native for building mobile apps?
The increase in the popularity of IOs and Android apps nowadays there are lots of companies building apps and want them to develop in a faster way. A fully native app is getting very expensive as it requires separate teams to work on iOS and Android. ReactNative is a good solution to this as the app developed in react native can be run on ios and android.React Native is an open source mobile development framework that app developers prefer, to build an app that is cost effective and also saves time.React Native was a Facebook's hackathon project that was meant ...
Read MoreWhat is the SectionList component and how to use it in React Native?
An interface that helps to render the lists in sections. Some of the important features of SectionList are −Header/Footer support to the ListHeader/Footer support to the sectionScroll LoadingPull to refreshFully cross-platformThe basic SectionList component looks as follows −To work with SectionList import the component as shown below −import { SectionList } from "react-native";Here is a list of important properties available on a SectionList −PropsDescriptionrenderItemIs the default function that renders the item in the section. It returns a react element.The render function will be passed to sectionlist like an object with following keys −'item'(object) - the item object'index' (number) - Index ...
Read MoreWhat is the FlatList component and how to use it in React Native?
FlatList is a container that can be used to load the list items. It offers header and footer support, multiple column support, comes with vertical/horizontal scrolling, lazy loading etc.Here are some important features of FlatList −Comes with scroll loadingAble to adjust the scroll by using ScrolltoIndex supportComes with header and footer supportMultiple column supportCross platformConfigurable viewability callbacksThe Basic structure of FlatList is as follows − item.id} />FlatList is implemented from the VirtualizedList component that takes care of displaying a limited number of items that will fit in the current view port of your mobile screen. The rest of the data ...
Read MoreHow to add styling or css to your app using reactnative?
Styling your app can be done as follows −Using Stylesheet componentUsing Inline stylesUsing Stylesheet componentReact native Stylesheet component comes very handy and neat when you want to apply styling to your app. To work with Stylesheet component first import it as shown below −import { StyleSheet } from 'react-native';You can create the style using Stylesheet component as follows −const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { margin: 10, padding: 20, marginVertical: 8, ...
Read More