v1.0 – Cleanup, rewrite and long-awaited customizability

[timomeh]

Summary

Cleanup of the old codebase.

Because the old codebase is really messy (what was I thinking?), this is basically is a rewrite of the whole Bottom Navigation. It will also include a large amount of customizability.

Version 1.0 will have breaking changes. It won't immediately be released with a Component for react-navigation. However, react-navigation support will be the next step.

Tasks

General

• [x] Background Ripple Animation
• [x] BottomNavigation
• [x] Tab List
• [x] Tab
• [x] Controlled Component
• [x] Press Ripple Animation
• [x] Flow Type Definitions
• [x] TypeScript Type Definitions
• [x] Test everything
  • [x] BottomNavigation
  • [x] TabList
  • [x] Press Feedbacks
  • [x] Tabs
  • [x] Badge
• [x] Add CI
• [x] Update README
• [x] Support react-native-web
• [x] Create Docs

Pluggable Components

• [x] Icon Tab
• [x] Icon+Label Tab
• [x] Shifting Tab
• [x] Badge

[timomeh]

The new Usage will look something like this:

import React from 'react'
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons'

export default class App extends React.Component {
  state = { activeTab: 'tv' }

  handleTabPress = newTab => this.setState({ activeTab: newTab.key })

  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )

  render() {
    return (
      <View>
        {/* ... */}
        <BottomNavigation
          activeTab={this.state.activeTab}
          onTabPress={this.handleTabPress}
          renderTab={this.renderTab}
          tabs={[
            { key: 'tv', barColor: '#37474F', icon: 'tv', label: 'TV' },
            { key: 'music', barColor: '#00796B', icon: 'music', label: 'Music' },
            { key: 'Books', barColor: '#5D4037', icon: 'book', label: 'Books' },
          ]}
        />
      </View>
    )
  }
}

[timomeh]

@PeterKottas I adapted the typescript config to the new version, but I actually haven't used typescript ever. :D Could you maybe take a look at it, if it looks ok so far?

[santomegonzalo]

can we merge this? works perfect and will fix this weird bug https://github.com/timomeh/react-native-material-bottom-navigation/issues/75

[timomeh]

@santomegonzalo Nice to hear that you used the new version and it worked. I'll write more usage docs later this day and then merge it. I don't want to merge it without at least a bit more documentation.

[santomegonzalo]

@timomeh any news about this PR? because it's blocking a lot.

[timomeh]

I'm currently quite busy, in the meantime you should be able to use this PR in your package.json dependencies with timomeh/react-native-material-bottom-navigation#rewrite-cleanup