React-native-paper: SUPPORT: Add for BottomNavigation

[magworkss]

Hi

Please add PROPS for OPACITY in BottomNavigation.
Opacity calculated from const opacity = this.state.tabs[index]; and substituted in style={[StyleSheet.absoluteFill, { opacity }]} which affects on all content and creates the blink/flash effect.
https://snack.expo.io/@avo/reactnavigation-issue

Thank you before hand

[satya164]

Try this:

import React, { Component } from 'react';
import { DarkTheme, Provider as PaperProvider } from 'react-native-paper';
import MyTabs from './Navigation';

export default class App extends Component {
  render() {
    return ( 
      <PaperProvider theme={DarkTheme}><MyTabs /></PaperProvider>
    );
  }
}

This should set the background color of the actual screen to a dark color to avoid the flash. PR welcome to add the background color as an option in react-navigation-material-bottom-tabs since it's a missing feature there.

PS: You need to install [email protected]. This won't work on Snack because react-navigation-material-bottom-tabs bundles it's own version of paper on Snack.

Edit: You don't need to install the alpha with latest react-navigation-material-bottom-tabs. You can install the latest version of react-native-paper

[magworkss]

@satya164 Thank you, it works