Knowledge Factory

Hello everyone, today , we will learn how to use DatePicker  with  React native application. User Interface: Implementation: You must set up your local development environment. Follow the below link to set up your local environment. React Native - Environment Setup - Create a new project After executing the commands mentioned in this link, a folder with a specified name will generate with the following contents. Add react-native-datepicker-dialogue and  moment  library inside your project  npm i react - native - datepicker - dialog -- save npm install -- save moment react - moment Next, we are going to edit the App.js file and write the below code. App.js: import React, { Component } from 'react' ; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native' ; import { DatePickerDialog } from 'react-native-datepicker-dialog' import moment from 'moment' ; export default class App

Flexbox is a layout technique that is utilized to structure the layout of our application in a responsive manner. Flexbox provides three main properties to achieve the desired layout. These properties are flexDirection, justifyContent, and alignItems. f lexDirection (column, row) : Used to align its elements vertically or horizontally. justifyContent (center, flex-start, flex-end, space-around, space-between):  Used to distribute the elements inside the container. alignItems (center, flex-start, flex-end, stretched): Used to distribute the element inside the container along the secondary axis. Our demo app screen will look like this − flexDirection(row) Implementation First, You must set up your local development environment. Follow the below link to set up your local environment. React Native - Environment Setup - Create a new project After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Edit the    App.js  file

Felicitations! You are standing in the right place!  In this example, we provide hardcoded elements to the data prop. Each element in the data props is rendered as a Text component. Our screen will look like this − Implementation First, You must set up your local development environment. Follow the below link to set up your local environment.   https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Import  StyleSheet, FlatList, Text, View, and Alert  component in our project. import React from 'react' ; import { StyleSheet, FlatList, Text, View, Alert } from 'react-native' ; Engender constructor in our main class. Using this.state   we are defining the FlatList items array with key constructor(props) { super(props); this .state = { ListItems: [ { key: 'Javacsript' },

Felicitations! You are standing in the right place! In this example , we initially set the Switch value to false and exhibit a Text with 'No'. When the value of Switch change to true by calling onValueChange the Text component is reset to 'Yes'. Our screen will look like this − Implementation First, You must set up your local development environment. Follow the below link to set up your local environment.   https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. Import StyleSheet, Switch, View, and Text  component in our project. import React from 'react' ; import {StyleSheet, Switch, View, Text } from 'react-native' ; Declare State The state is generally initialized in the constructor and then call setState when we want to change it. state = { married: false }; Engender a Root