Simple blacklist hook for react-navigation to toggle top/bottom tabs.

Last update: Nov 22, 2021

react-navigation-blacklist

Simple blacklist hook for react-navigation to toggle top/bottom tabs.

Installation

Make sure you have installed react-navigation

npm install react-navigation-blacklist

Usage

First, get blacklist function via useTabBarBlacklist.

export default function App() {
  const { blacklist } = useTabBarBlacklist();
  // ...
}

Create blacklist array

const blackListExample = ['SubScreen2'];

Give blacklist function to TabNavigator screenOptions' tabBarVisible prop

">
<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarVisible: blacklist({ route, list: blackListExample }),
  })}
>
  <Tab.Screen name="Stack1" component={Stack1} />
  <Tab.Screen name="Stack2" component={Stack2} />
</Tab.Navigator>

Whole Example

); } // Stacks const Stack1 = () => { return ( Stack 1 Root Screen ); }; // Stack for Stack2 const Stack = createStackNavigator(); const Stack2 = () => ( ); // Sub Screens const SubScreen1 = ({ navigation }: ScreenProps) => ( Stack 2 Sub Screen 1

GitHub

https://github.com/oguzturker8/react-navigation-blacklist
You might also like...

💃 Make your react tab dance🕺

💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for ReactJS. Support react = v16.3 Note: Since v2, we don't support v15 and old styled-compon

Jul 18, 2022

A fully accessible, extravagantly flexible, React-powered Tab Panel component

react-aria-tabpanel SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers

Aug 7, 2022

Atom like draggable tab react component

Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Apr 27, 2022

React reusable tab component

React reusable tab component

react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

May 7, 2022

A React component for rendering tabbed content.

A React component for rendering tabbed content.

Jan 10, 2022

React tabindex content

React tabindex content

react-tabindex-content you can use tab to switch the focus of dom elements Example the following order of focus is 3-4-0 , if the allowReadOnly is t

Dec 8, 2021

UI Bar in javascript for react native

UI Bar in javascript for react native

react-native-bottom-toolbar Bottom toolbar styled as in iOS, implemented in JS, typed with Flow. Highly configurable with text or icons (I recommend r

May 6, 2022

PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Jun 6, 2022

React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

react-tabs-navigation This react component enables navigating through tabs in your web app. It is composed of three different parts: Banner This conte

Aug 8, 2020

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | 简体中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

Aug 5, 2022

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

📃 React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

Jul 12, 2022

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

Jul 12, 2022

Rewrite of react-dark-mode-toggle - the cutest dark mode toggle around 🦉

Rewrite of react-dark-mode-toggle - the cutest dark mode toggle around 🦉

react-dark-mode-toggle-2 Rewrite of a cute dark mode toggle 🦉 Original library react-dark-mode-toggle was created by Alex Thoma. Credit goes out to t

Jul 27, 2022

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

react-native-tabs React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) Why I need t

Jul 12, 2022

React Native Slick Bottom Tabs

React Native Slick Bottom Tabs

A fully customizable react native Animated Bottom navigation tabs 🚀.

Jun 16, 2022

Immutable data structures with history for top-to-bottom properties in component based libraries like React. Based on Immutable.js

Immstruct A wrapper for Immutable.js to easily create cursors that notify when they are updated. Handy for use with immutable pure components for view

Jul 15, 2021

A basic React Native app that contains Drawer, Stack, Bottom and Top Navigators.

A basic React Native app that contains Drawer, Stack, Bottom and Top Navigators.

⚛️ React Native Navigations This project was created with React Native CLI and TypeScript template. Description This project is a new practical item o

May 30, 2022

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

react-native-curved-bottom-bar A high performance, beautiful and fully customizable curved bottom navigation bar for React Native. Getting started

Jul 30, 2022

React Native component to change bottom bar/navigation bar color on Android

React Native component to change bottom bar/navigation bar color on Android

React Native Navigation Bar Color Change React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar

Aug 4, 2022
Tabs navigation component for React.

Easy to use React tab component 3 different looks/themes Define transition speed or use the navigation in the bottom Nest tab components inside other

Dec 10, 2018
A React component used to render accessible and simple tabs

Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

May 30, 2022
React tabs with hooks

@bumaga/tabs Headless tabs component for React Features ?? super small, 381 B vs 3.5kB react-tabs ?? no styles, just logic. Style what you want, as yo

Jul 27, 2022
Draggable atom-like tabs for React
Draggable atom-like tabs for React

React draggable tabs The plugin is inspired by Atom and allows you to use these beautiful tabs in your React App Install just download the repo from n

Mar 27, 2022
An accessible React tabs component

React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

Dec 4, 2020
Declarative, modular and accessible React tabs component

react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

Apr 29, 2022
React Tabs component.
React Tabs component.

rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

Aug 8, 2022
React responsive tabs
 React responsive tabs

React responsive tabs Live demo Your feedback is highly appreciated! Please, file an issue if something went wrong or let me know via Twitter @maslian

May 12, 2022
Headless, simple, and highly flexible tab-like primitives built with react hooks

react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

Jul 28, 2022
A simple tab scroll view for react native

react-native-tab-flatlist ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑 安装 使用前需要先安装react-native-tab-view 与 react-n

Feb 23, 2022