From 80bb08127b6337fb233139a03530c9bb5ddf444c Mon Sep 17 00:00:00 2001 From: Guy Carmeli Date: Tue, 9 Jun 2020 15:36:46 +0300 Subject: [PATCH] Implement bottomTabs.hideOnScroll This option is currently available only on Android and can be used to allow the user to hide the BottomTabs on scroll. --- .../parse/BottomTabsOptions.java | 4 ++ .../presentation/BottomTabsPresenter.java | 4 ++ .../views/BottomTabs.java | 1 - playground/src/screens/Screens.js | 1 + playground/src/screens/ScrollViewScreen.js | 70 ++++++++++--------- .../src/screens/SecondBottomTabScreen.js | 3 + playground/src/screens/index.js | 4 +- website/api/options-bottomTabs.mdx | 8 +++ 8 files changed, 58 insertions(+), 37 deletions(-) diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java index 2e8eb8c150d..ba45e695a1c 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java @@ -28,6 +28,7 @@ public static BottomTabsOptions parse(JSONObject json) { options.backgroundColor = ColorParser.parse(json, "backgroundColor"); options.currentTabId = TextParser.parse(json, "currentTabId"); options.currentTabIndex = NumberParser.parse(json,"currentTabIndex"); + options.hideOnScroll = BoolParser.parse(json, "hideOnScroll"); options.visible = BoolParser.parse(json,"visible"); options.drawBehind = BoolParser.parse(json, "drawBehind"); options.preferLargeIcons = BoolParser.parse(json, "preferLargeIcons"); @@ -41,6 +42,7 @@ public static BottomTabsOptions parse(JSONObject json) { } public Colour backgroundColor = new NullColor(); + public Bool hideOnScroll = new NullBool(); public Bool visible = new NullBool(); public Bool drawBehind = new NullBool(); public Bool animate = new NullBool(); @@ -55,6 +57,7 @@ public static BottomTabsOptions parse(JSONObject json) { void mergeWith(final BottomTabsOptions other) { if (other.currentTabId.hasValue()) currentTabId = other.currentTabId; if (other.currentTabIndex.hasValue()) currentTabIndex = other.currentTabIndex; + if (other.hideOnScroll.hasValue()) hideOnScroll = other.hideOnScroll; if (other.visible.hasValue()) visible = other.visible; if (other.drawBehind.hasValue()) drawBehind = other.drawBehind; if (other.animate.hasValue()) animate = other.animate; @@ -69,6 +72,7 @@ void mergeWith(final BottomTabsOptions other) { void mergeWithDefault(final BottomTabsOptions defaultOptions) { if (!currentTabId.hasValue()) currentTabId = defaultOptions.currentTabId; if (!currentTabIndex.hasValue()) currentTabIndex = defaultOptions.currentTabIndex; + if (!hideOnScroll.hasValue()) hideOnScroll = defaultOptions.hideOnScroll; if (!visible.hasValue()) visible = defaultOptions.visible; if (!drawBehind.hasValue()) drawBehind = defaultOptions.drawBehind; if (!animate.hasValue()) animate = defaultOptions.animate; diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabsPresenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabsPresenter.java index 1df7a137066..b46b69b0a43 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabsPresenter.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabsPresenter.java @@ -88,6 +88,9 @@ private void mergeBottomTabsOptions(Options options, ViewController view) { int tabIndex = bottomTabFinder.findByControllerId(bottomTabsOptions.currentTabId.get()); if (tabIndex >= 0) tabSelector.selectTab(tabIndex); } + if (bottomTabsOptions.hideOnScroll.hasValue()) { + bottomTabs.setBehaviorTranslationEnabled(bottomTabsOptions.hideOnScroll.get()); + } if (view.isViewShown()) { if (bottomTabsOptions.visible.isTrue()) { if (bottomTabsOptions.animate.isTrueOrUndefined()) { @@ -154,6 +157,7 @@ private void applyBottomTabsOptions(Options options) { if (bottomTabsOptions.elevation.hasValue()) { bottomTabs.setUseElevation(true, bottomTabsOptions.elevation.get().floatValue()); } + bottomTabs.setBehaviorTranslationEnabled(bottomTabsOptions.hideOnScroll.get(false)); } @NotNull diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java index c829a6b52a2..a7a957b8e47 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java @@ -22,7 +22,6 @@ public class BottomTabs extends AHBottomNavigation { public BottomTabs(Context context) { super(context); setId(R.id.bottomTabs); - setBehaviorTranslationEnabled(false); } public void disableItemsCreation() { diff --git a/playground/src/screens/Screens.js b/playground/src/screens/Screens.js index 1225feee1e3..111d6a57822 100644 --- a/playground/src/screens/Screens.js +++ b/playground/src/screens/Screens.js @@ -23,6 +23,7 @@ module.exports = { SetRoot: 'SetRoot', Overlay: 'Overlay', OverlayAlert: 'OverlayAlert', + ScrollViewScreen: 'ScrollViewScreen', ScrollViewOverlay: 'ScrollViewOverlay', Lifecycle: 'Lifecycle', BackHandler: 'BackHandler', diff --git a/playground/src/screens/ScrollViewScreen.js b/playground/src/screens/ScrollViewScreen.js index a717de5d42e..339abca323c 100644 --- a/playground/src/screens/ScrollViewScreen.js +++ b/playground/src/screens/ScrollViewScreen.js @@ -1,55 +1,50 @@ const React = require('react'); const { Component } = require('react'); - -const { StyleSheet, ScrollView, View, Button, Platform } = require('react-native'); - -const { Navigation } = require('react-native-navigation'); -const testIDs = require('../testIDs'); - -const FAB = 'fab'; +const { StyleSheet, ScrollView, View } = require('react-native'); +const Button = require('../components/Button'); +const Navigation = require('../services/Navigation'); +const Colors = require('../commons/Colors'); class ScrollViewScreen extends Component { static options() { return { topBar: { title: { - text: 'Collapse', - color: 'black', - fontSize: 16 + text: 'Hide on scroll' }, drawBehind: true, - visible: true, - testID: testIDs.TOP_BAR_ELEMENT + }, + bottomTabs: { + hideOnScroll: true }, fab: { - id: FAB, - backgroundColor: 'blue', - clickColor: 'blue', - rippleColor: 'aquamarine', + id: 'FAB', + icon: require('../../img/whatshot.png'), + iconColor: 'white', + backgroundColor: Colors.primary, + clickColor: Colors.primary, + rippleColor: Colors.accent, hideOnScroll: true } }; } - constructor(props) { - super(props); - this.state = { - topBarHideOnScroll: false - }; - this.onClickToggleTopBarHideOnScroll = this.onClickToggleTopBarHideOnScroll.bind(this); - this.onClickPop = this.onClickPop.bind(this); - } + state = { + topBarHideOnScroll: false, + bottomTabsHideOnScroll: false + }; render() { return ( - - - -