Shilpa S has Published 58 Articles

Explain VirtualizedList component usage in ReactNative?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:37:28

2K+ Views

The VirtualizedList component is best when your list is massively big in size.VirtualizedList helps in better performance and memory usage.As user scrolls, the data is shown to the user.The basic component of VirtualizedList is as follows &minuns;Important VirtualizedList PropertiesPropsDescriptionrenderItemThe items from the data will be rendered inside the VirtualizedList.dataThe data ... Read More

How to display dropdown in ReactNative?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:33:48

1K+ Views

The React native picker component is similar to a dropdown that allows you to select a value from the multiple options given.The basic Picker component is as follows −           ...       ...       ...     To work with picker component, ... Read More

Explain the importance of SafeViewArea in React Native?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:30:26

200 Views

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 ... Read More

How to show ProgressBar in ReactNative?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:26:09

767 Views

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 ... Read More

How to display loading indicator in React Native?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:23:04

3K+ Views

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 ... Read More

Write a program to display "Hello World" in react native?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:18:14

1K+ Views

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 (             ... Read More

How to load data from a server in React Native?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:15:33

1K+ Views

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) ... Read More

How to work with Alerts Dialog box in ReactNative?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:11:12

691 Views

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 ... Read More

How to handle touches in ReactNative?

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:06:59

461 Views

On a device the interaction with the UI mainly happens through a touch or tap. So when we use the app, we mostly tap the button to perform some action, or scroll the page by touching the screen, try to zoom the page etc. To handle these gestures like tap, ... Read More

Explain working of the Modal window in React Native

Shilpa S

Shilpa S

Updated on 01-Jul-2021 08:02:48

241 Views

Modal component helps to display a content view above your UI content.The basic modal component is as follows − { Alert.alert("Modal has been closed."); }}> Your Content HereTo work with Modal component you need to import it first as follows −import { Modal } from "react-native";The basic properties of Modal ... Read More

Advertisements