diff --git a/src/components/TrainTypeInfoModal.tsx b/src/components/TrainTypeInfoModal.tsx index 3d512b422..64f26b5c9 100644 --- a/src/components/TrainTypeInfoModal.tsx +++ b/src/components/TrainTypeInfoModal.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from 'react' -import { Modal, Platform, SafeAreaView, StyleSheet, View } from 'react-native' +import { Modal, Platform, StyleSheet, View } from 'react-native' import { RFValue } from 'react-native-responsive-fontsize' +import { useSafeAreaInsets } from 'react-native-safe-area-context' import { useRecoilValue } from 'recoil' import { Line, Station, TrainType } from '../../gen/proto/stationapi_pb' import { LED_THEME_BG_COLOR } from '../constants' @@ -34,8 +35,8 @@ const styles = StyleSheet.create({ }, modalView: { paddingVertical: 24, - height: isTablet ? undefined : 'auto', - width: '100%', + justifyContent: 'center', + alignItems: 'center', }, buttons: { marginTop: isTablet ? 12 : 6, @@ -58,6 +59,8 @@ export const TrainTypeInfoModal: React.FC = ({ const isLEDTheme = useRecoilValue(isLEDSelector) const { selectedLine } = useRecoilValue(lineState) + const { left: leftSafeArea, right: rightSafeArea } = useSafeAreaInsets() + const trainTypeLines = useMemo( () => trainType.lines.length @@ -85,7 +88,7 @@ export const TrainTypeInfoModal: React.FC = ({ onRequestClose={onClose} supportedOrientations={['landscape']} > - + = ({ isTablet ? { width: '80%', + maxHeight: '90%', shadowOpacity: 0.25, shadowColor: '#000', borderRadius: 16, } - : { borderRadius: 8 }, + : { + width: '100%', + height: '100%', + paddingLeft: leftSafeArea, + paddingRight: rightSafeArea, + }, ]} > @@ -108,7 +117,7 @@ export const TrainTypeInfoModal: React.FC = ({ : `${selectedLine?.nameRoman} ${trainType.nameRoman}`} - + = ({ - + ) } diff --git a/src/components/TrainTypeList.tsx b/src/components/TrainTypeList.tsx index dbd75a69c..2cea2b910 100644 --- a/src/components/TrainTypeList.tsx +++ b/src/components/TrainTypeList.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useMemo } from 'react' import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native' import { RFValue } from 'react-native-responsive-fontsize' +import { useSafeAreaInsets } from 'react-native-safe-area-context' import { useRecoilValue } from 'recoil' import { Line, TrainType } from '../../gen/proto/stationapi_pb' import { currentLineSelector } from '../store/selectors/currentLine' @@ -117,15 +118,14 @@ export const TrainTypeList = ({ onSelect: (item: TrainType) => void }) => { const isLEDTheme = useRecoilValue(isLEDSelector) - const renderItem = useCallback( ({ item }: { item: TrainType; index: number }) => { return }, [onSelect] ) - const keyExtractor = useCallback((item: TrainType) => item.id.toString(), []) + const { bottom: safeAreaBottom } = useSafeAreaInsets() return ( ) }