https://github.com/lvlrSajjad/react-native-animated-bottom-tabbar

Animated bottom Tab bar for react native
https://github.com/lvlrSajjad/react-native-animated-bottom-tabbar

bottom-tabbar react-native react-native-animated react-native-animated-bottom-tabbar react-native-bottom react-native-bottom-bar react-native-bottom-tabbar react-native-component tab-bar tabbar

Last synced: 3 months ago
JSON representation

Animated bottom Tab bar for react native

• Host: GitHub
• URL: https://github.com/lvlrSajjad/react-native-animated-bottom-tabbar
• Owner: lvlrSajjad
• License: mit
• Created: 2018-09-22T16:18:10.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-24T08:17:11.000Z (about 6 years ago)
• Last Synced: 2024-08-03T13:28:39.363Z (3 months ago)
• Topics: bottom-tabbar, react-native, react-native-animated, react-native-animated-bottom-tabbar, react-native-bottom, react-native-bottom-bar, react-native-bottom-tabbar, react-native-component, tab-bar, tabbar
• Language: JavaScript
• Homepage:
• Size: 553 KB
• Stars: 20
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-animated-bottom-tabbar ★2 - Animated bottom Tab bar for react native (Components / UI)
• awesome-react-native - react-native-animated-bottom-tabbar ★2 - Animated bottom Tab bar for react native (Components / UI)
• awesome-react-native - react-native-animated-bottom-tabbar ★2 - Animated bottom Tab bar for react native (Components / UI)
• awesome-react-native - react-native-animated-bottom-tabbar ★2 - Animated bottom Tab bar for react native (Components / UI)

README

        

# react-native-animated-bottom-tabbar [![npm version](https://img.shields.io/npm/v/react-native-animated-bottom-tabbar.svg)](https://www.npmjs.com/package/react-native-animated-bottom-tabbar)

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

```javascript

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 = [

    ,

    ,

    ,

    ,

    

];

type Props = {};

export default class App extends Component {

    render() {

        return (

            

                Welcome to React Native!

                To get started, edit App.js

                {instructions}

                {/* here*/}

                console.log(index)} //on select an item , index starts at 1 :-D

                />

            

        );

    }

}

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,

    },

});

```