switch to useSafeAreaInsets().top (#85)

StatusBar.currentHeight seems just broken on some devices

app/screens/Home.tsx

@@ -12,7 +12,8 @@ import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import produce from 'immer'
 import React, { useCallback, useState } from 'react'
-import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
+import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import create, { StateSelector } from 'zustand'
 
 const titles: { [key in GetAlbumListType]?: string } = {
@@ -111,6 +112,7 @@ const Home = () => {
   const types = useStoreDeep(store => store.settings.screens.home.listTypes)
   const fetchAlbumList = useStore(store => store.fetchAlbumList)
   const setList = useHomeStore(store => store.setList)
+  const paddingTop = useSafeAreaInsets().top
 
   const refresh = useCallback(async () => {
     setRefreshing(true)
@@ -135,13 +137,13 @@ const Home = () => {
   return (
     <GradientScrollView
       style={styles.scroll}
-      contentContainerStyle={styles.scrollContentContainer}
+      contentContainerStyle={{ paddingTop }}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
           onRefresh={refresh}
           colors={[colors.accent, colors.accentLow]}
-          progressViewOffset={StatusBar.currentHeight}
+          progressViewOffset={paddingTop}
         />
       }>
       <View style={styles.content}>
@@ -157,9 +159,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingBottom: 20,
   },

app/screens/Search.tsx

@@ -5,7 +5,7 @@ import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import TextInput from '@app/components/TextInput'
 import { useActiveServerRefresh } from '@app/hooks/settings'
-import { Song, Album, Artist, SearchResults } from '@app/models/library'
+import { Album, Artist, SearchResults, Song } from '@app/models/library'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -17,11 +17,11 @@ import {
   ActivityIndicator,
   InteractionManager,
   ScrollView,
-  StatusBar,
   StyleSheet,
   TextInput as ReactTextInput,
   View,
 } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
   const setQueue = useStore(store => store.setQueue)
@@ -110,6 +110,7 @@ const Search = () => {
   const [text, setText] = useState('')
   const searchBarRef = useRef<ReactTextInput>(null)
   const scrollRef = useRef<ScrollView>(null)
+  const paddingTop = useSafeAreaInsets().top
 
   useFocusEffect(
     useCallback(() => {
@@ -153,7 +154,7 @@ const Search = () => {
   const resultsCount = results.albums.length + results.artists.length + results.songs.length
 
   return (
-    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={{ paddingTop }}>
       <View style={styles.content}>
         <View style={styles.inputBar}>
           <TextInput
@@ -180,9 +181,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
     paddingBottom: 20,

app/screens/ServerView.tsx

@@ -184,7 +184,7 @@ const ServerView: React.FC<{
   }
 
   return (
-    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView style={styles.scroll}>
       <View style={styles.content}>
         <Text style={styles.inputTitle}>Address</Text>
         <TextInput
@@ -259,9 +259,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    // paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
   },

app/screens/Settings.tsx

@@ -12,8 +12,9 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
 import React, { useCallback, useState } from 'react'
-import { KeyboardTypeOptions, Linking, Modal, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native'
+import { KeyboardTypeOptions, Linking, Modal, Pressable, StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { version } from '../../package.json'
 
@@ -296,8 +297,10 @@ const SettingsContent = React.memo(() => {
 })
 
 const Settings = () => {
+  const paddingTop = useSafeAreaInsets().top
+
   return (
-    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView style={styles.scroll} contentContainerStyle={{ paddingTop }}>
       <SettingsContent />
     </GradientScrollView>
   )
@@ -307,9 +310,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
     paddingBottom: 40,