Found 29 Articles for React Native

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 to be displayed.getItemFunction that will fetch the individual item from the data.getItemCountGets the count of the data items.initialNumToRenderNo of times to be rendered at the start.keyExtractorThe unique key to be considered for each item for the specified index.Here is a working example of VirtualizedList.Example: Display of data using VirtualizedListTo work ... Read More

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, you need to import it first from react-native as follows −import { Picker } from 'react-native'Picker PropertiesSr.NoProps & Description1enabledIt takes a boolean value. The picker will be disabled if set to false and the user will not be able to select the item.2itemStyleStyling to be applied for the items.3modeThis property ... Read More

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 More

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 More

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 More

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 More

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 More

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 More

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, touch reactnative has events that cap capture it or a touchable component to deal with touches it.Let us see the example of what happens when a button is clicked.Example 1: Handling Tap on ButtonHere is a simple example of Button. {       alert('You Tapped on Me!');    }} ... Read More

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 Window is as follows −Sr.NoProps & Description1animationTypeThis property handles the animation for displaying the modal window.It is an enum with three values − slide, fade and none.2onDismissThis property takes in a function that will get called when the modal window is dismissed.3onOrientationChangeCallback function that is called when the device orientation ... Read More