React Native

Run the following command with your project directory     npm i react-native-modalbox Code for modal box      Open index.js and replace the code with the following code index.js  import React,{Component} from 'react'; import { View, Button } from "react-native"; import styles from './styles'; import ModalBox from "./ModalBox"; class Account extends Component {     closePhoto = () => {         this._modalPhoto.close();     };     openPhoto = () => {         this._modalPhoto.open();     };     render() {         return (             <View style={styles.container}>                 <Button title="open" onPress={this.openPhoto}></Button>                 <Login ref={(com) => (this._modalPhoto = com)} />             </View>         );     } } export default Account; ModalBox.js import React, { Component, useState } from "react"; import { Text, TouchableOpacity } from "react-native"; import

Run the following command with your project directory      npm i react-navigation-drawer         npm i react-navigation        npm i react-navigation-tab    project structure      src          ->actions          ->common          ->components          ->containers          ->navigation              -index.js               -customDrawer.js          ->reducers          ->services          ->store Code for custom drawer in react native     Open index.js in navigation folder and replace the code with the following code index.js import React from 'react'; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { createDrawerNavigator } from 'react-navigation-drawer'; import { createStackNavigator } from 'react-navigation-stack'; import CustomDrawer from "./CustomDrawer"; import Example from './containers/Example'; const SettingsStack = createStackNavigator({     SettingsList: {         s

 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: {          screen: Example,          navigationOptions: {              headerTitle: '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' },                    { key: 'second' , title: 'Second'}               ]          }     }      renderScene = ({ route }) => {           switch (route.key) {                case 'first':                     return <View style={[styles.scene, { backgroundColor: '#f

 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               }          }           showDatePicker = () => {               this.setState({  isDatePickerVisible: true });          }             hideDatePicker = () => {               setDatePickerVisibility(false);           };             handleConfirm = (date) => {               console.warn("A date has been picked

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}>            <FloatingLabelInput              label="Email"               containerStyle={{margin: 5}}              value={email}             onChangeText={text => this.setState({email: text})}            />