Skip to content
Animated bottom Tab bar for react native
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.npmignore first commit Sep 22, 2018
LICENSE first commit Sep 22, 2018
README.md fixed screenshots Sep 24, 2018
index.js added type two Sep 23, 2018
package.json added multiple array size support Sep 24, 2018
shadow.png first commit Sep 22, 2018
type1-2.gif added multiple array size support Sep 24, 2018
type1-3.gif
type1-4.gif added multiple array size support Sep 24, 2018
type1.js added multiple array size support Sep 24, 2018
type2-2.gif added multiple array size support Sep 24, 2018
type2-3.gif
type2-4.gif added multiple array size support Sep 24, 2018
type2.js added multiple array size support Sep 24, 2018
typetwo.gif added type two Sep 23, 2018
videoshot.gif first commit Sep 22, 2018

README.md

react-native-animated-bottom-tabbar npm version

typeOne:

typeTwo:

Getting started

$ npm install react-native-animated-bottom-tabbar --save

$ npm install react-native-svg --save

$ react-native link react-native-svg

Usage

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import {TypeOne,TypeTwo} from "react-native-animated-bottom-tabbar"; //<-----------------import

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//array of icon views this array can be image or vector icon for tab  bar
// array size can be 1 to maximum 5 !
const icons = [
    <Image
        source={require('./menu.png')}
        style={{width: 32, height: 32}}/>,
    <Image
      source={require('./magnify.png')}
        style={{width: 32, height: 32}}/>,
    <Image
       source={require('./message.png')}
        style={{width: 32, height: 32}}/>,
    <Image
        source={require('./volume-low.png')}
        style={{width: 32, height: 32}}/>,
    <Image
       source={require('./map-marker.png')}
       style={{width: 32, height: 32}}/>
];
type Props = {};
export default class App extends Component<Props> {

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>To get started, edit App.js</Text>
                <Text style={styles.instructions}>{instructions}</Text>
                {/* here*/}
                <TypeTwo // you can use TypeOne Also With the same settings
                    icons={icons} //array of icon views this array can be image or vector icon
                    selectedColor={'#FF8F00'} //color of selected item in tab bar
                    backgroundColor={'#212121'} //background color of tab bar
                    onSelect={(index)=>console.log(index)} //on select an item , index starts at 1 :-D
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
You can’t perform that action at this time.