React Native

 Run the following command with your project directory     npm i react-navigation react-navigation-drawer react-navigation-tabs react-navigation-stack Project Structure src     ->actions     ->common     ->components     ->containers     ->navigation          -index.js     ->reducers     ->services     ->store code for complex navigation     open navigation folder inside index.js in any code editor with the following code index.js import React from 'react'; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { createDrawerNavigator } from 'react-navigation-drawer'; import { createBottomTabNavigator } from 'react-navigation-tabs'; import { createStackNavigator } from 'react-navigation-stack'; import Example from './containers/Example'; const FeedStack = createStackNavigator({      Feed: { ...

 Run the following command with your project directory     npm i react-native-tab-view      npm i react-native-gesture-handler react-native-reanimated code for tab view in react native      open App.js in any code editor and replace the code with the following code App.js import React,{ Component } from 'react'; import {     StyleSheet,     View,      Dimensions } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; export default class App extends Component {     constructor(props) {          super(props);          this.state = {               index: 0,               routes: [                    { key: 'first' , title: 'First' },                ...

 Run the following command with your project directory      npm i react-native-modal-datetie-picker @react-native-community/datetimepicker Code for date picker in react native     Open App.js in any code editor and replace the code with the following code App.js     import React, { Component } from 'react';     import {          StyleSheet,          View,     } from 'react-native';     import DateTImePickerModal from 'react-native-modal-datetime-picker';     export default class App extends Component {          constructor(props) {               super(props);               this.state = {                    isDatePickerVisible: false               }  ...

Run the following command with your project directory           npm i react-native-floating-label-input Code for  Floating   Label Text input in React Native Open App.js in any code editor and replace the code with the following code App.js import React,{Component} from 'react'; import {   StyleSheet,   View,   Button,   Image,   Text } from 'react-native'; import { FloatingLabelInput } from 'react-native-floating-label-input'; export default class App extends Component {   constructor(props) {     super(props);     this.state = {       email: ' ',        password: ' '      };   }   render() {     const {          email,          password      } = this.state;     return (       <View style={styles.container}>      ...

    Run the following command with your project directory      npm i  formik and  npm i  yup Code for Form Validation in React Native Open App.js in any code editor and replace the code with the following code App.js import * as yup from 'yup' import { Formik } from 'formik' import React, { Component, Fragment } from 'react'; import { TextInput, Text, Button, Alert } from 'react-native'; export default class App extends Component { render() { return ( <Formik initialValues={{ email: '', password: '' }} onSubmit={values => Alert.alert(JSON.stringify(values))} validationSchema={yup.object().shape({ email: yup .string() .email() .required(), password: yup .string() .min(6) .required(), })} > {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (...

Run the following command with your project directory npm install react- native -image-picker --save We are using a Native API Camera and also going to choose the image from the gallery so we need to add some permission to the  AndroidManifest.xml  file. < uses-permission android:name = "android.permission.CAMERA" /> < uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE" /> Code for Image Picker in React Native open App.js in any code editor and replace the code with the following code App.js import React,{Component} from 'react'; import {      StyleSheet,      View,      Button,      Image,      Text } from 'react-native'; import ImagePicker from 'react-native-image-picker'; export default class App extends Component {      constructor(props) {     super(props);          this.state = {         ...