feat: Apply default text styles to ReText

src/components/ReText.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 import { StyleSheet, TextInput } from 'react-native';
 import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import useDefaultStyles from './Colors';
 
 const styles = StyleSheet.create({
     baseStyle: {
@@ -19,6 +20,8 @@ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 const ReText = (props: TextProps) => {
     const { text, style } = { style: {}, ...props };
+    const defaultStyles = useDefaultStyles();
+
     const animatedProps = useAnimatedProps(() => {
         return {
             text: text.value,
@@ -26,12 +29,13 @@ const ReText = (props: TextProps) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } as any;
     });
+    
     return (
         <AnimatedTextInput
             underlineColorAndroid="transparent"
             editable={false}
             value={text.value}
-            style={[styles.baseStyle, style]}
+            style={[styles.baseStyle, defaultStyles.text, style]}
             {...{ animatedProps }}
         />
     );

src/components/Text.tsx

@@ -1,11 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { Text as BaseText, TextProps } from 'react-native';
-import useDefaultStyles from './Colors';
-
-export default function Text(props: PropsWithChildren<TextProps>) {
-    const defaultStyles = useDefaultStyles();
-
-    return (
-        <BaseText {...props} style={[defaultStyles.text, props.style]} />
-    );
-}

src/components/Typography.ts

@@ -1,15 +0,0 @@
-import styled from 'styled-components/native';
-import Text from './Text';
-
-export const Header = styled(Text)`
-    margin: 0 0 6px 0;
-    font-size: 28px;
-    font-weight: 400;
-`;
-
-export const SubHeader = styled(Text)`
-    font-size: 16px;
-    margin: 0 0 6px 0;
-    font-weight: 400;
-    opacity: 0.5;
-`;

src/components/Typography.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Text as BaseText, TextProps } from 'react-native';
+import { PropsWithChildren } from 'react';
+import useDefaultStyles from './Colors';
+
+export function Text(props: PropsWithChildren<TextProps>) {
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <BaseText {...props} style={[defaultStyles.text, props.style]} />
+    );
+}
+
+export const Header = styled(Text)`
+    margin: 0 0 6px 0;
+    font-size: 28px;
+    font-weight: 400;
+`;
+
+export const SubHeader = styled(Text)`
+    font-size: 16px;
+    margin: 0 0 6px 0;
+    font-weight: 400;
+    opacity: 0.5;
+`;

src/screens/Music/index.tsx

@@ -18,7 +18,7 @@ function MusicStack() {
     const defaultStyles = useDefaultStyles();
 
     return (
-        <GestureHandlerRootView>
+        <GestureHandlerRootView style={{ flex: 1 }}>
             <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
                 headerTintColor: THEME_COLOR,
                 headerTitleStyle: defaultStyles.stackHeader,

src/screens/Music/overlays/NowPlaying/index.tsx

@@ -9,7 +9,8 @@ import useCurrentTrack from 'utility/useCurrentTrack';
 import TrackPlayer, { State, usePlaybackState, useProgress } from 'react-native-track-player';
 import { Shadow } from 'react-native-shadow-2';
 import usePrevious from 'utility/usePrevious';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
 import { useNavigation } from '@react-navigation/native';
 import { calculateProgressTranslation } from 'components/Progresstrack';

src/screens/Music/stacks/components/TrackListView.tsx

@@ -22,7 +22,8 @@ import { useDispatch } from 'react-redux';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
 import { selectDownloadedTracks } from 'store/downloads/selectors';
 import { Header, SubHeader } from 'components/Typography';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 import CoverImage from 'components/CoverImage';
 
 const styles = StyleSheet.create({

src/screens/Settings/components/Cache.tsx

@@ -5,7 +5,8 @@ import music from 'store/music';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import styled from 'styled-components/native';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 
 const ClearCache = styled(Button)`
     margin-top: 16px;

src/screens/Settings/components/Library.tsx

@@ -6,7 +6,8 @@ import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
 import { t } from '@localisation';
 import Button from 'components/Button';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 
 const InputContainer = styled.View`
     margin: 10px 0;

src/screens/Settings/components/Sentry.tsx

@@ -1,4 +1,5 @@
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 import React, { useEffect, useState } from 'react';
 import { Switch } from 'react-native-gesture-handler';
 import styled, { css } from 'styled-components/native';

src/screens/modals/Player/components/Queue.tsx

@@ -7,7 +7,8 @@ import TouchableHandler from 'components/TouchableHandler';
 import TrackPlayer from 'react-native-track-player';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 import Button from 'components/Button';
 import { THEME_COLOR } from 'CONSTANTS';
 import DownloadIcon from 'components/DownloadIcon';

src/screens/modals/Player/index.tsx

@@ -19,7 +19,7 @@ export default function Player() {
     const defaultStyles = useDefaultStyles();
     
     return (
-        <GestureHandlerRootView>
+        <GestureHandlerRootView style={{ flex: 1 }}>
             <ScrollView contentContainerStyle={styles.inner} style={defaultStyles.view}>
                 <NowPlaying />
                 <ConnectionNotice />

src/screens/modals/SetJellyfinServer/index.tsx

@@ -9,7 +9,8 @@ import CredentialGenerator from './components/CredentialGenerator';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 
 export default function SetJellyfinServer() {
     const defaultStyles = useDefaultStyles();

src/screens/modals/TrackPopupMenu.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import Modal from 'components/Modal';
 import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
 import { ModalStackParams } from 'screens/types';
 import { useTypedSelector } from 'store';
@@ -10,7 +9,8 @@ import PlayIcon from 'assets/icons/play.svg';
 import DownloadIcon from 'assets/icons/cloud-down-arrow.svg';
 import QueueAppendIcon from 'assets/icons/queue-append.svg';
 import TrashIcon from 'assets/icons/trash.svg';
-import Text from 'components/Text';
+import { Text } from 'components/Typography';
+
 import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
 import { useDispatch } from 'react-redux';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';