React Native Tab View

-

 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: '#ff4081' }]} />;
            case 'second':
                return <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />;
        }
    }
            
    render() {
        return(
            <TabView
                navigationState={{ index: this.state.index, routes: this.state.routes }}
                renderScene={this.renderScene}
                onIndexChange={index=>this.setState({index})}
                initialLayout={{width: Dimensions.get('window').width}}
            />
        );
    }
}

const styles = StyleSheet.create({
    scene: {
        flex: 1
    }
});

To Run the App

    react-native run-andriod




        








Comments

Post a Comment

Popular posts from this blog

React Native Floating Label Textinput

-
Image
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})}            />          
Read more

React Native Modal box

-
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
Read more