Add prop for custom maxRippleOpacity

[Angelk90]

@timomeh : A curious, why the rippleColor to as maxRippleOpacity 0.12? For performance reasons or do not know so?

[timomeh]

That's a good catch. Could be a customizable prop. If you want to, you could open a PR. Should be an easy fix.

[Angelk90]

@timomeh: I remember reading, that you wanted to rewrite a lot of things, for example when talking about adding the badge, will there be other news?

[Angelk90]

@timomeh: P. S. I'm having a big problem. I'm using your module, so I have a tabNavigator. But I also have screens, which are not part of the tabNavigator, so I put them in a stackNavigator. Now the problem is that these screens that are in the stackNavigator, works only if parameters are passed if they do not give problems. Now how can I call a screen that is in a stackNavigator. I'll give you an example: I have movie, tv, actor. These three views are found in the tabNavigator. Now let's take an actor. Inside actor I have views, with the image of the actor and the name. So when I click on an actor it should be called a screen that is in the stackNavigator, which must pass parameters (id and example name). But I'm not succeeding. Could you give me some help?

For example, clicking on the photo of the actor should be called the screen profileActor which is located in the stackNavigator and must pass (id and name).

[waquidvp]

So do you have a main stack navigator with the tab navigator as a screen inside or do you have a tab navigator with a stack navigator on the individual tabs?

[Angelk90]

@waquidvp : If I understood correctly, the question should be the second question.

The structure is like this [TabNavigator (Main)]:

• Movie
• TV
• Actor
• Pref
• setting

StackNavigator:

• ScheFilm
• ProfileActor

If you see the image the ones you see where there is the blue coffin below, are TabNavigator. When the user clicks on an actor's photo you should open ScheFilm, which is located in StackNavigator (to work it must pass parameters id, name).

But it's giving me a lot of trouble, it's not working properly, and it can not get into parameters that are passed to it in "props.navigation.state.params".

By chance can you give me a hand, some advice?

Code(It does not work very well)

import React from 'react';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { NavigationComponent } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';

import Movie from '../screens/Movie';
import Tv from '../screens/Tv';
import Actor from '../screens/Actor';
import Scheda from '../screens/Scheda';
import Profile from '../screens/Profile';
import Pref from '../screens/Pref';
import Extractor from '../screens/Extractor';
import S from '../screens/Sced';

const StackTab = StackNavigator({
  Scheda:{
    screen:Movie,
    navigationOptions:{
      header:null,
    }
  },
  Scheda2:{
    screen:Scheda,
    navigationOptions:{
      header:null,
    }
  },
  /*
  Profile:{
    screen:Profile,
    navigationOptions:{
      header:null,
    }
  },*/
},
  {
        headerMode: "none",
        mode: "modal",
}
);

export const Stack = TabNavigator({
  Movie: {
    screen: Movie,
    navigationOptions: {
      tabBarLabel: "Movies",
      tabBarIcon: () => <Icon size={24} name="theaters" color="white" />
    }
  },
  Tv: {
    screen: Tv,
    navigationOptions: {
      tabBarLabel: "Tv",
      tabBarIcon: () => <Icon size={24} name="tv" color="white" />
    }
  },
  Actor: {
    screen: Actor,
    navigationOptions: {
      tabBarLabel: "Actor",
      tabBarIcon: () => <Icon size={24} name="face" color="white" />
    }
   },
  Pref: {
    screen: Pref,
    navigationOptions: {
      tabBarLabel: "Star",
      tabBarIcon: () => <Icon size={24} name="star" color="white" />
    }
   },
  Extractor: {
    screen: Extractor,
    navigationOptions: {
      tabBarLabel: "Extractor",
      tabBarIcon: () => <Icon size={24} name="settings" color="white" />
    }
  },
  Stack2: {
    screen: StackTab,
    navigationOptions: {
      tabBarLabel: "Stack2",
      tabBarIcon: () => <Icon size={24} name="settings" color="white" />
    }
  }
  }, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: 'white',
      rippleColor: 'white',
      shifting: true,
      tabs: {
        Movie: {
          barBackgroundColor: '#4589f2'//4589f2
        },
        Tv: {
          barBackgroundColor: '#4589f2'
        },
        Actor: {
          barBackgroundColor: '#4589f2'
        },
        Pref: {
          barBackgroundColor: '#4589f2'
        },
        Extractor: {
          barBackgroundColor: '#4589f2'
        },
        Stack2: { barBackgroundColor: '#4589f2' }
      }
    }
  }
});

[waquidvp]

Hey @Angelk90, so I have a working version of basically what you want to do, it might not be your desired interaction, but let me know what you think. Check it out on expo: https://snack.expo.io/SJ3_zOzEG.

[timomeh]

Regarding @Angelk90's comment https://github.com/timomeh/react-native-material-bottom-navigation/issues/66#issuecomment-356105634: I didn't work on a real project with react-native in the last 8 months. Because of that, I have no project where I could use this (or a new) Bottom Navigation, and currently no interest on working on a better Bottom Navigation.

This issue has a few topics. The initial topic of this issue was a customizable maxRippleOpacity. Please don't mix other topics in here.

[ShayanJavadi]

I can take care of this issue if it's still of interest. @timomeh thoughts?

[timomeh]

Sure! That would be awesome

[timomeh]

I am currently (at this moment) doing a big refactor/rewrite of the whole BottomNavigation. I'll include this feature in the upcoming version.

[timomeh]

Closed with v1.0.0 🎉