jellyfin-audio-player/src/screens/Player/components/NowPlaying.tsx

import React from 'react';
import { Text, Dimensions, View, StyleSheet } from 'react-native';
import useCurrentTrack from 'utility/useCurrentTrack';
import styled from 'styled-components/native';
import FastImage from 'react-native-fast-image';
import { colors } from 'components/Colors';

const Screen = Dimensions.get('screen');

const Artwork = styled(FastImage)`
    border-radius: 10px;
    width: ${Screen.width * 0.8}px;
    height: ${Screen.width * 0.8}px;
    margin: 25px auto;
    display: flex;
    flex: 1;
`;

const styles = StyleSheet.create({
    artist: {
        ...colors.text,
        fontWeight: 'bold',
        fontSize: 24,
        marginBottom: 12,
    },
    title: {
        ...colors.text,
        fontSize: 18,
        marginBottom: 12,
        textAlign: 'center',
        paddingLeft: 20,
        paddingRight: 20,
    }
});


export default function NowPlaying() {
    const track = useCurrentTrack();

    return (
        <View style={{ alignItems: 'center' }}>
            <Artwork style={colors.imageBackground} source={{ uri: track?.artwork }} />
            <Text style={styles.artist} >{track?.artist}</Text>
            <Text style={styles.title}>{track?.title}</Text>
        </View>
    );
}