mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-05-04 09:49:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixes Issue with SafeAreaView (#476)

Browse Source
This commit is contained in:
Ritesh Shukla
2025-08-16 05:56:00 +05:30
committed by GitHub
parent 1f185094d8
commit efc58a2e36
5 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/index.tsx
+21 -18
View File
@@ -11,6 +11,7 @@ import FrequentlyPlayedTracks from './helpers/frequent-tracks'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useJellifyContext } from '../../providers'
import { usePreventRemove } from '@react-navigation/native'
import { SafeAreaView } from 'react-native-safe-area-context'
export function ProvidedHome({
navigation,
@@ -23,29 +24,31 @@ export function ProvidedHome({
const insets = useSafeAreaInsets()
return (
<ScrollView
contentInsetAdjustmentBehavior='automatic'
contentContainerStyle={{
marginVertical: getToken('$4'),
}}
refreshControl={<RefreshControl refreshing={refetching} onRefresh={onRefresh} />}
removeClippedSubviews // Save memory usage
>
<YStack alignContent='flex-start'>
<RecentArtists navigation={navigation} />
<SafeAreaView style={{ flex: 1 }}>
<ScrollView
contentInsetAdjustmentBehavior='automatic'
contentContainerStyle={{
marginVertical: getToken('$4'),
}}
refreshControl={<RefreshControl refreshing={refetching} onRefresh={onRefresh} />}
removeClippedSubviews // Save memory usage
>
<YStack alignContent='flex-start'>
<RecentArtists navigation={navigation} />
<Separator marginVertical={'$3'} />
<Separator marginVertical={'$3'} />
<RecentlyPlayed navigation={navigation} />
<RecentlyPlayed navigation={navigation} />
<Separator marginVertical={'$3'} />
<Separator marginVertical={'$3'} />
<FrequentArtists navigation={navigation} />
<FrequentArtists navigation={navigation} />
<Separator marginVertical={'$3'} />
<Separator marginVertical={'$3'} />
<FrequentlyPlayedTracks navigation={navigation} />
</YStack>
</ScrollView>
<FrequentlyPlayedTracks navigation={navigation} />
</YStack>
</ScrollView>
</SafeAreaView>
)
}
src/components/Player/index.tsx
+30 -28
View File
@@ -2,7 +2,7 @@ import { StackParamList } from '../types'
import { usePlayerContext } from '../../providers/Player'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import React, { useCallback, useState } from 'react'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
import { YStack, XStack, getToken, useTheme, ZStack, useWindowDimensions, View } from 'tamagui'
import Scrubber from './components/scrubber'
import Controls from './components/controls'
@@ -38,37 +38,39 @@ export default function PlayerScreen({
const { bottom } = useSafeAreaInsets()
return (
<View flex={1}>
{nowPlaying && (
<ZStack fullscreen>
<BlurredBackground width={width} height={height} />
<SafeAreaView style={{ flex: 1 }}>
<View flex={1}>
{nowPlaying && (
<ZStack fullscreen>
<BlurredBackground width={width} height={height} />
<YStack flex={1} marginBottom={bottom}>
<PlayerHeader navigation={navigation} />
<YStack flex={1} marginBottom={bottom}>
<PlayerHeader navigation={navigation} />
<XStack
justifyContent='center'
alignItems='center'
marginHorizontal={'auto'}
width={getToken('$20') + getToken('$20') + getToken('$5')}
maxWidth={width / 1.1}
flex={2}
>
<SongInfo navigation={navigation} />
</XStack>
<XStack
justifyContent='center'
alignItems='center'
marginHorizontal={'auto'}
width={getToken('$20') + getToken('$20') + getToken('$5')}
maxWidth={width / 1.1}
flex={2}
>
<SongInfo navigation={navigation} />
</XStack>
<XStack justifyContent='center' flex={1}>
{/* playback progress goes here */}
<Scrubber />
</XStack>
<XStack justifyContent='center' flex={1}>
{/* playback progress goes here */}
<Scrubber />
</XStack>
<Controls />
<Controls />
<Footer navigation={navigation} />
</YStack>
</ZStack>
)}
{showToast && <Toast config={JellifyToastConfig(theme)} />}
</View>
<Footer navigation={navigation} />
</YStack>
</ZStack>
)}
{showToast && <Toast config={JellifyToastConfig(theme)} />}
</View>
</SafeAreaView>
)
}
src/screens/Home/index.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export default function Home(): React.JSX.Element {
<HomeProvider>
<HomeStack.Navigator
initialRouteName='HomeScreen'
screenOptions={{ headerShown: true }}
screenOptions={{ headerShown: false }}
>
<HomeStack.Group>
<HomeStack.Screen
@@ -88,7 +88,7 @@ export default function Home(): React.JSX.Element {
name='Playlist'
component={PlaylistScreen}
options={({ route }) => ({
headerShown: true,
headerShown: false,
headerTitleStyle: {
color: theme.background.val,
},
src/screens/Library/index.tsx
+2 -2
View File
@@ -50,7 +50,7 @@ export default function LibraryStack(): React.JSX.Element {
name='Album'
component={AlbumScreen}
options={({ route }) => ({
headerShown: true,
headerShown: false,
title: route.params.album.Name ?? 'Untitled Album',
headerTitleStyle: {
color: theme.background.val,
@@ -62,7 +62,7 @@ export default function LibraryStack(): React.JSX.Element {
name='Playlist'
component={PlaylistScreen}
options={({ route }) => ({
headerShown: true,
headerShown: false,
title: route.params.playlist.Name ?? 'Untitled Playlist',
headerTitleStyle: {
color: theme.background.val,
src/screens/Search/index.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export default function SearchStack(): React.JSX.Element {
name='Album'
component={AlbumScreen}
options={({ route }) => ({
headerShown: true,
headerShown: false,
title: route.params.album.Name ?? 'Untitled Album',
headerTitleStyle: {
color: theme.background.val,
@@ -52,7 +52,7 @@ export default function SearchStack(): React.JSX.Element {
name='Playlist'
component={PlaylistScreen}
options={({ route }) => ({
headerShown: true,
headerShown: false,
title: route.params.playlist.Name ?? 'Untitled Playlist',
headerTitleStyle: {
color: theme.background.val,