To display date and time picker in your app you have to install a package as shown below −npm install @react-native-community/datetimepicker --saveOnce you are done installing, let us now proceed on how to display a Datepicker first.Example: DateTimePicker in ReactNativeImport the datetimepicker component first as shown below −import DateTimePicker from '@react-native-community/datetimepicker';A basic DateTimePicker component looks as follows −Here are some of the important properties of DateTimePicker.PropsDescriptionmodeDefines the type of picker you want. The options are date, time, datetime and countdown.From above options datetime and countdown are available only on iOS.displayThe values for Android are default, spinner, calendar and clock. For ... Read More

SwitchSelector component is similar to a radio toggle button. It allows you to select with more than 2 values.To work with SwitchSelector you have to install the package as shown below −npm i react-native-switch-selector --save-devThe basic SwitchSelector looks as follows − console.log(`value selected is : ${value}`)} />Here are some important properties of SwitchSelector −PropsDescriptionoptionsAn array with label, value and imageicon id required.initialThe initial item from the array that will be selected.valueThe switch value that will be available with onPress eventonPressThe event with callback function that will get called when the Switch is changed.fontSizeThe fontSize to be considered for the label.selectedColorThe ... Read More

While developing your app you can come across the error as stated above. Here is the code that gives the error −Exampleimport React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component {    render() {       return (                                       );    } } const styles = StyleSheet.create({    container: {       paddingTop: 50,       paddingLeft: 50,    },    stretch: {       width: ... Read More

Problem: How to handle the error “A navigator can only contain 'Screen' components as its direct children” while working with Navigation in ReactNative?SolutionWhile working on your app you may come across issues like stated above. Here will understand why such error comes up and what can be done to avoid it.Here is the code that gives us the error −ExampleApp.jsimport * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { Button, View, Alert, Text } from 'react-native'; const Stack = createStackNavigator(); const HomePage = ({ navigation }) => {    return ... Read More

While working on the app, we would like to switch from one screen to another and that is handled by react navigation.To work on navigating pages we need to install few packages as follows −npm install @react-navigation/native @react-navigation/stack npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handlerOnce you are done with the above installation let us now proceed with the next setup of navigation in react native.In your app project create a folder called pages/ . Create 2 js files HomePage.js and AboutPage.js.pages/HomePage.jsimport * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const HomeScreen = ({ navigation }) ... Read More

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