diff --git a/src/screens/SelectLineScreen.render.test.tsx b/src/screens/SelectLineScreen.render.test.tsx index c749030a2..c8c2b2038 100644 --- a/src/screens/SelectLineScreen.render.test.tsx +++ b/src/screens/SelectLineScreen.render.test.tsx @@ -282,18 +282,16 @@ describe('SelectLineScreen', () => { }); describe('ローディング状態', () => { - it('nearbyStationLoading=true のとき路線リストのスケルトンが表示される', () => { + it('nearbyStationLoading=true のときスケルトンが表示される', () => { setupDefaults({ nearbyStationLoading: true }); - const { getByTestId } = render(); + const { getByTestId, queryByTestId } = render(); expect(getByTestId('skeleton-placeholder')).toBeTruthy(); - // プリセットカードは上部固定表示になり最寄り駅のローディングとは独立したため、 - // ローディング中でも常に表示される - expect(getByTestId('presets')).toBeTruthy(); + expect(queryByTestId('presets')).toBeNull(); }); - it('nearbyStationLoading=false のとき路線リストのスケルトンは表示されない', () => { + it('nearbyStationLoading=false のときプリセットが表示される', () => { setupDefaults({ nearbyStationLoading: false }); const { getByTestId, queryByTestId } = render(); diff --git a/src/screens/SelectLineScreen.tsx b/src/screens/SelectLineScreen.tsx index ca79cfa37..d6cdebe11 100644 --- a/src/screens/SelectLineScreen.tsx +++ b/src/screens/SelectLineScreen.tsx @@ -45,7 +45,10 @@ import { SelectLineScreenPresets } from './SelectLineScreenPresets'; const styles = StyleSheet.create({ root: { paddingHorizontal: 24, flex: 1 }, - listScroll: { flex: 1 }, + listContainerStyle: { + paddingBottom: 24, + paddingHorizontal: 24, + }, heading: { fontSize: 24, fontWeight: 'bold', @@ -66,10 +69,6 @@ const styles = StyleSheet.create({ // https://github.com/facebook/react-native/issues/53987 const REFRESH_TINT_DELAY_MS = 500; -// 路線リストのスクロール領域下端の基本パディング。実際の下端余白はこれに -// フッタータブバーの高さ(useFooterHeight)を加算して算出する -const LIST_CONTENT_PADDING_BOTTOM = 24; - const NearbyStationLoader = () => ( @@ -153,10 +152,12 @@ const SelectLineScreen = () => { // --- 派生値 --- const footerHeight = useFooterHeight(); - const listPaddingBottom = useMemo( - () => LIST_CONTENT_PADDING_BOTTOM + footerHeight, - [footerHeight] - ); + const listPaddingBottom = useMemo(() => { + const flattened = StyleSheet.flatten(styles.listContainerStyle) as { + paddingBottom?: number; + }; + return (flattened?.paddingBottom ?? 24) + footerHeight; + }, [footerHeight]); const orientation = useDeviceOrientation(); const isPortraitOrientation = useMemo( @@ -302,47 +303,36 @@ const SelectLineScreen = () => { // --- JSX --- return ( <> - {/* - 上下のセーフエリアは絶対配置オーバーレイの NowHeader / FooterTabBar が - それぞれ処理するため上下インセットは無効化する。一方、横向き/タブレットの - ノッチでコンテンツが欠けないよう、左右インセットだけは SafeAreaView で確保する。 - */} - - {/* - プリセットカードは上部に固定表示し、Pull to Refresh の対象外にする。 - paddingTop で固定ヘッダー(NowHeader)の直下に配置する。 - */} - - - - - - - {/* プリセットカードより下の路線リストのみ Pull to Refresh の対象にする */} + } - contentContainerStyle={{ paddingBottom: listPaddingBottom }} + contentContainerStyle={[ + styles.listContainerStyle, + nowHeaderHeight ? { paddingTop: nowHeaderHeight } : null, + { paddingBottom: listPaddingBottom }, + ]} > {nearbyStationLoading && !refreshing ? ( ) : ( <> + + + {stationLines.length > 0 && (