Knowledge Factory

In this section, 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 extends Componen

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' },