Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-02-10 15:02:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

switch to useSafeAreaInsets().top (#85)

Browse Source 
StatusBar.currentHeight seems just broken on some devices
This commit is contained in:
austinried
2022-04-04 12:48:10 +09:00
committed by GitHub
parent 8bc4caae78
commit caf544069e
9 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/GradientScrollView.tsx
View File

@@ -4,6 +4,7 @@ import dimensions from '@app/styles/dimensions'
import React, { ForwardedRef, PropsWithChildren } from 'react'
import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
import Animated from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
export type GradientScrollViewProps = PropsWithChildren<
Animated.AnimateProps<ScrollViewProps> & {
@@ -13,8 +14,9 @@ export type GradientScrollViewProps = PropsWithChildren<
const GradientScrollView = React.forwardRef<ScrollView, GradientScrollViewProps>((props, ref) => {
const layout = useWindowDimensions()
const paddingTop = useSafeAreaInsets().top
const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
return (
<Animated.ScrollView

18
app/components/HeaderBar.tsx
View File

@@ -1,15 +1,16 @@
import { Album, Song } from '@app/models/library'
import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/core'
import React, { useCallback } from 'react'
import { View, StatusBar, Text, StyleSheet, ViewStyle } from 'react-native'
import Animated from 'react-native-reanimated'
import PressableOpacity from './PressableOpacity'
import IconMat from 'react-native-vector-icons/MaterialIcons'
import { ReactComponentLike } from 'prop-types'
import React, { useCallback } from 'react'
import { StyleSheet, Text, View, ViewStyle } from 'react-native'
import Animated from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import IconMat from 'react-native-vector-icons/MaterialIcons'
import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu'
import { Album, Song } from '@app/models/library'
import PressableOpacity from './PressableOpacity'
export type HeaderContextItem = Song | Album
@@ -53,6 +54,7 @@ const HeaderBar = React.memo<{
contextItem?: HeaderContextItem
}>(({ title, headerStyle, HeaderCenter, contextItem }) => {
const navigation = useNavigation()
const top = useSafeAreaInsets().top
const back = useCallback(() => {
navigation.goBack()
@@ -61,7 +63,7 @@ const HeaderBar = React.memo<{
const _headerStyle = Array.isArray(headerStyle) ? headerStyle : [headerStyle]
return (
<Animated.View style={[styles.container, ..._headerStyle]}>
<Animated.View style={[styles.container, { paddingTop: top, height: dimensions.header + top }, ..._headerStyle]}>
<PressableOpacity onPress={back} style={styles.icons}>
<IconMat name="arrow-back" color="white" size={25} />
</PressableOpacity>
@@ -81,8 +83,6 @@ const HeaderBar = React.memo<{
const styles = StyleSheet.create({
container: {
height: dimensions.top(),
paddingTop: StatusBar.currentHeight,
backgroundColor: colors.gradient.high,
width: '100%',
flexDirection: 'row',

4
app/components/ImageGradientScrollView.tsx
View File

@@ -3,11 +3,13 @@ import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions'
import React from 'react'
import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
const ImageGradientScrollView: React.FC<ScrollViewProps & ImageGradientBackgroundProps> = props => {
const layout = useWindowDimensions()
const paddingTop = useSafeAreaInsets().top
const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
return (
<ScrollView