not showing at all with bottom tab on Android

[npbg]

Issue Description

react-native: 0.60.3 rn-sliding-up-panel: ^2.3.1

test device & emulator : both Galaxy S7 Android API 26

literally the SlidingUpPanel component isn't showing at all in react-navigation's bottomTabNavigation's screen on Android while working perfect on iOS.

was testing on iOS firstly and made it work perfect already, and tried almost everything(read all opened and closed issues related Android in Issues) to try to solve this problem, but nothing worked :(

by the way, it was strange that scrollIntoView method made app crash sometimes. (it didn't fix the problem when it worked tho.)

any help or fix would be so much appreciated and thank you for this great library !

Steps to Reproduce / Code Snippets / Screenshots

<View style={{ flex: 1 }}>
      <View style={{ paddingTop: Header.HEIGHT }}>
      </View>

      <SlidingUpPanel
        containerStyle={{ flex: 1 }}
        ref={slidingPanelElement}
        animatedValue={draggedAnimatedValue}
        draggableRange={draggableRange}
        snappingPoints={
          Platform.select({
            ios: [
              (Dimensions.get('window').height - getStatusBarHeight() - Header.HEIGHT) / 3 + getBottomSpace(),
              Dimensions.get('window').height - getStatusBarHeight() - Header.HEIGHT
            ],
            android: [
              (Dimensions.get('screen').height - Header.HEIGHT) / 3,
              Dimensions.get('screen').height - Header.HEIGHT,
            ],
          })
        }
        friction={0.6}
        showBackdrop={true}
      >
        <View style={{ flex: 1, backgroundColor: '#ffffff', }} />
      </SlidingUpPanel>

    </View>

---

Environment

• Version: ^2.3.1
• React Native version: 0.60.3
• Platform(s) (iOS, Android, or both?): Android API 26, Galaxy S7
• Device info (Simulator/Device? OS version? Debug/Release?): Device, Emulator both / Debug

[npbg]

self found solution:

SlidingUpPanel doesn't show in TabNavigator made by react-navigation's createBottomTabNavigator .

so I tried to change the TabNavigator to make with createMaterialTopTabNavigator only for Android (using Platform.select() method) then it worked :)

by the way, to make createMaterialTopTabNavigator show tabs at the bottom like createBottomTabNavigator one, add this line to navigator config

  tabBarPosition: 'bottom' 

and style it same.

[octopitus]

@thegreatLSJ Have you tried to move the panel to the bottom most of components hierarchy, bellow the navigation stack?

render() {
  return (
    <>
      <NavigationStack />
      <SlidingUpPanel />
    </>
  )
}

[npbg]

@thegreatLSJ Have you tried to move the panel to the bottom most of components hierarchy, bellow the navigation stack?

render() {
  return (
    <>
      <NavigationStack />
      <SlidingUpPanel />
    </>
  )
}

nah in my case the SlidingUpPanel had to be inside a screen in bottom tab navigator. but it works inside a screen in material top tab navigator.

SUMMARY : SlidingUpPanel inside a react-navigation BottomTabNavigator - works only on iOS. SlidingUpPanel inside a react-navigation MaterialTopTabNavigator - works on Android (didn't test with iOS yet).

for all who wanna see how I'm personally dealing with it, here's my code. any idea for better one is welcome ;)

import { Platform, } from 'react-native';
import { createBottomTabNavigator, createMaterialTopTabNavigator, } from 'react-navigation';

const RouteConfigs = { ... };

const TabNavigatorConfigIOS = { ... };
const TabNavigatorConfigAndroid = {
  tabBarPosition: 'bottom',
  ...
};

const MainTabNavigatorIOS = createBottomTabNavigator(RouteConfigs, TabNavigatorConfigIOS);
const MainTabNavigatorAndroid = createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfigAndroid);

const MainTabNavigator = Platform.select({
  ios: MainTabNavigatorIOS,
  android: MainTabNavigatorAndroid,
});

export default MainTabNavigator;

[octopitus]

Thanks. Let me add this to the document.

[npbg]

Thanks. Let me add this to the document.

you're welcome. of course!