Build a Google Maps style panel overlay with scrollable inner content in React Native using rn-sliding-up-panel and react-native-maps

expo init -t expo-template-blank-typescript rn-google-maps-style-draggable-panel

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Map, { MarkerData } from './Map';
import MapPanel from './MapPanel';

export default function App() {
  const [selectedMarker, setSelectedMarker] = useState(null as MarkerData);

  function onMarkerPress(marker: MarkerData): void {
    setSelectedMarker(marker);
  }

  function onMapPress(): void {
    setSelectedMarker(null);
  }

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Map onMarkerPress={onMarkerPress} onMapPress={onMapPress} />
      {selectedMarker !== null
        ?
          <MapPanel marker={selectedMarker} />
        :
          null
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import React from 'react';
import { MarkerData } from './Map';

interface IMapPanelProps {
  marker: MarkerData
}

const MapPanel: React.FunctionComponent<IMapPanelProps> = ({ marker }) => {
  return null;
};

export default MapPanel;

yarn add rn-sliding-up-panel

import React, { useRef, useState } from 'react';
import { 
  Platform, StatusBar, Animated,
  ScrollView, StyleSheet, useWindowDimensions,
  View
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import SlidingUpPanel from 'rn-sliding-up-panel';
import { MarkerData } from './Map';
import MarkerDisplay from './MarkerDisplay';
import PanelHandle from './PanelHandle';

const ios = Platform.OS === 'ios';

interface IMapPanelProps {
  marker: MarkerData
}

const MapPanel: React.FunctionComponent<IMapPanelProps> = ({ marker }) => {
  const deviceHeight = useWindowDimensions().height;
  const insets = useSafeAreaInsets();
  const statusBarHeight: number = ios ? insets.bottom : StatusBar.currentHeight as number;
  const draggableRange = {
    top: deviceHeight - statusBarHeight,
    bottom: deviceHeight / 2.8
  };

  const snappingPoints = [
    draggableRange.top,
    draggableRange.bottom
  ];

  const panelRef = useRef<SlidingUpPanel | null>(null);
  const [panelPositionVal] = useState(new Animated.Value(draggableRange.bottom));

  return (
    <SlidingUpPanel
      ref={panelRef}
      animatedValue={panelPositionVal}
      draggableRange={draggableRange}
      snappingPoints={snappingPoints}
      backdropOpacity={0}
      showBackdrop={false}
      height={deviceHeight}
    >
      <View style={styles.panelContent}>
        <PanelHandle />
        <ScrollView scrollEnabled={false}>
          <MarkerDisplay marker={marker} />
        </ScrollView>
      </View>
    </SlidingUpPanel>
  );
};

const styles = StyleSheet.create({
  panelContent: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: 'white'
  }
});

export default MapPanel;

const [scrollEnabled, setScrollEnabled] = useState(false);
const [allowDragging, setAllowDragging] = useState(true);
const [atTop, setAtTop] = useState(true);

// fired when panel is finished being dragged up or down
// if panel is dragged to 'top' position, then we switch to scrollmode
const onMomentumDragEnd = useCallback((value: number) => {
  if (value === draggableRange.top && !scrollEnabled) {
    setScrollEnabled(true);
    setAtTop(true);
  }
}, [draggableRange, scrollEnabled]);

// fired when scroll is finished inside the panel,
// if the content in the panel has scrolled to the very top,
// then we allow the panel to be dragged down
// (only if the next gesture is down, not up)
const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
  const { nativeEvent } = event;
  if (nativeEvent.contentOffset.y === 0) {
    setAtTop(true);
    if (ios) {
      setAllowDragging(true);
    }
  }
}, []);

const PANEL_VELOCITY = ios ? 1 : 2.3;
const hideFullScreenPanelOptions: SlidingUpPanelAnimationConfig = {
  velocity: PANEL_VELOCITY,
  toValue: draggableRange.bottom
};

// if panel is at the top and scrolling is allowed
// check the velocity of the drag,
// if the velocity is downward, then we animate the panel to its bottom state
// if the velocity is upward, we treat the drag like a scroll instead
const onDragStart = useCallback((_: number, gestureState: PanResponderGestureState) => {
  if (atTop && scrollEnabled) {
    if (gestureState.vy > 0) {
      setScrollEnabled(false);
      if (ios) {
        setAllowDragging(true);
      }
      if (panelRef && panelRef.current) {
        panelRef.current.show(hideFullScreenPanelOptions);
      }
    } else {
      setAtTop(false);
      if (ios) {
        setAllowDragging(false);
      }
    }
  }
}, [atTop, scrollEnabled, panelRef]);

return (
  <SlidingUpPanel
    ref={panelRef}
    animatedValue={panelPositionVal}
    draggableRange={draggableRange}
    snappingPoints={snappingPoints}
    backdropOpacity={0}
    showBackdrop={false}
    height={deviceHeight}
    allowDragging={allowDragging}
    onMomentumDragEnd={onMomentumDragEnd}
    onDragStart={onDragStart}
  >
    <View style={styles.panelContent}>
      <PanelHandle />
      <ScrollView
        scrollEnabled={scrollEnabled}
        showsVerticalScrollIndicator={false}
        bounces={false}
        onMomentumScrollEnd={onMomentumScrollEnd}
      >
        <MarkerDisplay marker={marker} />
      </ScrollView>
    </View>
  </SlidingUpPanel>
);