Merge pull request #3082 from digitalfabrik/1258-bottom-sheet-scrolling

2189: Refactor and upgrade pois and bottom sheet

native/package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@dr.pogodin/react-native-static-server": "^0.5.5",
     "@dr.pogodin/react-native-webview": "^13.13.0",
-    "@gorhom/bottom-sheet": "^4.6.4",
+    "@gorhom/bottom-sheet": "^5.0.6",
     "@maplibre/maplibre-react-native": "^9.1.0",
     "@notifee/react-native": "^9.1.8",
     "@react-native-async-storage/async-storage": "^2.0.0",

native/src/components/BottomSheetHandle.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components/native'
+
+const Handle = styled.View`
+  width: 34px;
+  border: 1px solid ${props => props.theme.colors.textSecondaryColor};
+  background-color: ${props => props.theme.colors.textSecondaryColor};
+  border-radius: 10px;
+  align-self: center;
+  margin: 20px 0;
+`
+
+const BottomSheetHandle = (): ReactElement => <Handle />
+
+export default BottomSheetHandle

native/src/components/List.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { FlatList, RefreshControl, ViewStyle } from 'react-native'
 import styled from 'styled-components/native'
 
-const NoItemsMessage = styled.Text`
+export const NoItemsMessage = styled.Text`
   color: ${props => props.theme.colors.textColor};
   font-family: ${props => props.theme.fonts.native.contentFontRegular};
   align-self: center;

native/src/components/MapView.tsx

@@ -66,10 +66,9 @@ type MapViewProps = {
   selectedFeature: MapFeature | null
   userLocation: LocationType | null
   setUserLocation: (userLocation: LocationType | null) => void
-  iconPosition: string | number
   selectFeature: (feature: MapFeature | null) => void
-  setSheetSnapPointIndex: (index: number) => void
   bottomSheetHeight: number
+  bottomSheetFullscreen: boolean
   zoom: number | undefined
   Overlay?: ReactElement
 }
@@ -78,13 +77,12 @@ const MapView = ({
   boundingBox,
   features,
   selectedFeature,
-  iconPosition,
   userLocation,
   setUserLocation,
   selectFeature,
-  setSheetSnapPointIndex,
   Overlay,
   bottomSheetHeight,
+  bottomSheetFullscreen,
   zoom,
 }: MapViewProps): ReactElement => {
   const cameraRef = useRef<MapLibreGL.Camera>(null)
@@ -158,7 +156,6 @@ const MapView = ({
 
     const feature = featureCollection?.features.find((it): it is MapFeature => it.geometry.type === 'Point')
     selectFeature(feature ?? null)
-    setSheetSnapPointIndex(1)
 
     zoomOnClusterPress(pressedCoordinates)
   }
@@ -202,7 +199,7 @@ const MapView = ({
       <StyledIcon
         icon={<Icon Icon={locationPermissionIcon} />}
         onPress={onRequestLocation}
-        position={iconPosition}
+        position={bottomSheetFullscreen ? 0 : bottomSheetHeight}
         accessibilityLabel={t('showOwnLocation')}
       />
     </MapContainer>

native/src/components/PoiListItem.tsx

@@ -30,7 +30,7 @@ const StyledPressable = styled(Pressable)<{ language: string }>`
   border-bottom-width: 1px;
   border-bottom-color: ${props => props.theme.colors.textDisabledColor};
   flex-direction: ${props => contentDirection(props.language)};
-  padding: 24px 0;
+  padding: 16px 0;
 `
 
 const Description = styled.View`

native/src/components/PoisBottomSheet.tsx

@@ -0,0 +1,117 @@
+import BottomSheet, {
+  BottomSheetFlatList,
+  BottomSheetFlatListMethods,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet'
+import React, { memo, ReactElement, Ref } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform } from 'react-native'
+import styled from 'styled-components/native'
+
+import { LocationType } from 'shared'
+import { ErrorCode, PoiModel } from 'shared/api'
+
+import useCityAppContext from '../hooks/useCityAppContext'
+import BottomSheetHandle from './BottomSheetHandle'
+import Failure from './Failure'
+import { NoItemsMessage } from './List'
+import PoiDetails from './PoiDetails'
+import PoiListItem from './PoiListItem'
+
+const StyledBottomSheet = styled(BottomSheet)<{ isFullscreen: boolean }>`
+  ${props => props.isFullscreen && `background-color: ${props.theme.colors.backgroundColor};`}
+`
+
+const BottomSheetContent = styled.View`
+  flex: 1;
+  margin: 0 24px;
+`
+
+const Title = styled.Text`
+  color: ${props => props.theme.colors.textColor};
+  font-family: ${props => props.theme.fonts.native.decorativeFontBold};
+  font-size: 18px;
+  font-weight: bold;
+`
+
+type PoiBottomSheetProps = {
+  poiListRef: Ref<BottomSheetFlatListMethods>
+  pois: PoiModel[]
+  poi: PoiModel | undefined
+  userLocation: LocationType | null
+  slug: string | undefined
+  selectPoi: (poi: PoiModel) => void
+  deselectAll: () => void
+  snapPoints: number[]
+  snapPointIndex: number
+  setSnapPointIndex: (index: number) => void
+  setScrollPosition: (position: number) => void
+  isFullscreen: boolean
+}
+
+const PoisBottomSheet = ({
+  poiListRef,
+  pois,
+  poi,
+  userLocation,
+  slug,
+  selectPoi,
+  deselectAll,
+  snapPoints,
+  snapPointIndex,
+  setSnapPointIndex,
+  setScrollPosition,
+  isFullscreen,
+}: PoiBottomSheetProps): ReactElement | null => {
+  const { languageCode } = useCityAppContext()
+  const { t } = useTranslation('pois')
+  // ios has scrolling issues if content panning gesture is not enabled
+  const enableContentPanningGesture = Platform.OS === 'ios' || !isFullscreen
+
+  const PoiDetail = poi ? (
+    <PoiDetails language={languageCode} poi={poi} distance={userLocation && poi.distance(userLocation)} />
+  ) : (
+    <Failure code={ErrorCode.PageNotFound} buttonAction={deselectAll} buttonLabel={t('detailsHeader')} />
+  )
+
+  const renderPoiListItem = ({ item: poi }: { item: PoiModel }): ReactElement => (
+    <PoiListItem
+      key={poi.path}
+      poi={poi}
+      language={languageCode}
+      navigateToPoi={() => selectPoi(poi)}
+      distance={userLocation && poi.distance(userLocation)}
+    />
+  )
+
+  return (
+    <StyledBottomSheet
+      index={snapPointIndex}
+      isFullscreen={isFullscreen}
+      snapPoints={snapPoints}
+      enableContentPanningGesture={enableContentPanningGesture}
+      enableDynamicSizing={false}
+      animateOnMount
+      handleComponent={BottomSheetHandle}
+      onChange={setSnapPointIndex}>
+      <BottomSheetContent>
+        {slug ? (
+          <BottomSheetScrollView showsVerticalScrollIndicator={false}>{PoiDetail}</BottomSheetScrollView>
+        ) : (
+          <BottomSheetFlatList
+            ref={poiListRef}
+            data={pois}
+            role='list'
+            renderItem={renderPoiListItem}
+            onMomentumScrollBegin={event => setScrollPosition(event.nativeEvent.contentOffset.y)}
+            showsVerticalScrollIndicator={false}
+            ListHeaderComponent={<Title>{t('listTitle')}</Title>}
+            ListEmptyComponent={<NoItemsMessage>{t('noPois')}</NoItemsMessage>}
+          />
+        )}
+      </BottomSheetContent>
+    </StyledBottomSheet>
+  )
+}
+
+export default memo(PoisBottomSheet)