Simple Example Fails to Work on Android

[stiofand]

Expo 35 react native app, using mobx, rn-sliding up library simple example works on IOS (very poorly) but not at all on Android, it attempts to render, but the background does not show. No error messages or logs given

Android 8.0, 8.1 and 9 tested 4 different devices, 2 hardware 2 virtual all 4 g ram

Assume all basic App Scaffold components are fine, variables are not null and correct, and an event is fired from a click on a google map component successfully passing visible property Example

const panelRef = useRef(null)
return <SlidingUpPanel
        visible={visible}
        startCollapsed={true}
        showBackdrop={false}
        ref={panelRef}
        allowDragging={true}
        onRequestClose={() => RootStore.updateVisible(false)}>
        <View style={{
            zIndex: 1001,
            width: '100%',
            height: '100%',
            flex: 1,
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center'
        }}><Text>Test</Text></View>

IOS OK

Andorid, no full render, though it began as the search bar in the map is no longer present (its controlled by the visiblity property too)

[octopitus]

Seems like you are using the old version? From v2, you don't need to pass any of those props. It's simply:

const ref = useRef(null);
// Later on you can call ref.current.show()
return <SlidingUpPanel ref={ref}>{...}</SlidingUpPanel>

Read more from the docs.

[stiofand]

So how do you set visibility, close action and draggable behaviour then? Even with these items removed, the issue persists.

Your explanation still does not explain why it runs on IOS and not Android.

Updating to your suggestion, I now have this:

[stiofand]

This issue now also occurs on IOS,

[jsdaniell]

I'm with the same problem, but testing on IOS

import React, { useEffect, useRef } from 'react';
import { View } from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';
import Text from '../Texts/Text';

const QuestionSlidePanel = ({
  mainStore, state, mainAction, secondaryAction, title, description
}) => {
  const _panel = useRef(null);

  useEffect(() => {
    togglePanel(true);
  }, [state]);

  const togglePanel = (condition) => {
    console.log('PANEL: ', condition);

    if (condition) {
      _panel.current.show();
    } else {
      _panel.current.hide();
    }
  };

  return (
    <SlidingUpPanel ref={_panel}>
      <View style={{
        height: 200,
        backgroundColor: 'blue'
      }}
      >
        <Text text="Test" />
      </View>
    </SlidingUpPanel>
  );
};

export default QuestionSlidePanel;

Don't render, even the default state variable is true

[jsdaniell]

I think that the problem is that you have to put the slide panel component down to the tree of components of the main view like:

<View>
// others components
<SlidingUpPanel />
</View>