Skip to content

how to hide tabBar on scroll? #2202

@alpamys-qanybet

Description

@alpamys-qanybet

how to hide tabBar on scroll?

I have set navBarHideOnScroll to true but I also want to hide tabBar(on bottom). Cannot find the right property to set if exists.

the result and what I want to do (hide navbar and tabbar on scroll)

result0want0

import {Platform} from 'react-native';
import {Navigation} from 'react-native-navigation';

import {registerScreens} from './src/screens';
import { iconsMap, iconsLoaded } from './src/app-icons';

registerScreens();


iconsLoaded.then(() => {
  startApp();
});

// this will start our app
function startApp() {
  const tabs = [{
    screen: 'example.Home',
    icon: iconsMap['ios-home'],
    title: 'Navigation Types',
  }, {
    screen: 'example.Favourite',
    icon: iconsMap['ios-heart'],
    topTabs: [{
      screenId: 'example.Favourite.TabOne',
      title: 'Избранные',
    }, {
      screenId: 'example.Favourite.TabTwo',
      title: 'Подписки',
    }],
  }, {
    screen: 'example.Post',
    icon: iconsMap['ios-add-circle']
  }, {
    screen: 'example.Message',
    icon: iconsMap['ios-mail']
  }, {
    screen: 'example.Profile',
    icon: iconsMap['ios-person']
  }];
  
  Navigation.startTabBasedApp({
    tabs,
    animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
    tabsStyle: {
      tabBarBackgroundColor: '#fff',
      tabBarButtonColor: 'grey',
      tabBarSelectedButtonColor: '#4586e0',
      tabFontFamily: 'BioRhyme-Bold',

      // tabBarHideOnScroll: true, ?
      // topBarCollapseOnScroll: true ?
      // tabBarCollapseOnScroll: true ?
    },
    appStyle: {
      tabBarBackgroundColor: '#fff',
      navBarButtonColor: 'grey',
      tabBarButtonColor: 'grey',
      navBarTextColor: 'grey',
      tabBarSelectedButtonColor: '#4586e0',
      navigationBarColor: '#fff',
      navBarBackgroundColor: '#fff',

      tabBarCollapseOnScroll: true,
      navBarHideOnScroll: true,
      statusBarHideWithNavBar: true,

      statusBarColor: '#002b4c',
      tabFontFamily: 'BioRhyme-Bold',
    }
  });
}

Environment

  • React Native Navigation version: ^1.1.282
  • React Native version: 0.50.3
  • Platform(s) (Android): 6.0
  • Device info (Device. OS version. Debug): Meizu M5 Note, Android 6.0, Debug

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions