Player

import React, {Component} from 'react';
import {
  SafeAreaView,
  ScrollView,
  Text,
  View,
  Image,
} from 'react-native';

class Player extends Component {

render() {
  return (
    <SafeAreaView style={{flex: 1}}>
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center', margin: 10}}>
              <Image style={{width: 15, height: 15}} source={require('Player/img/musical-note.png')}/>
            </View>
            <View style={{flex: 8, justifyContent: 'center'}}>
                <Text style={{}}>NOW PLAYING</Text>
            </View>
        </View>
        <View style={{flex: 1}}>
            <View style={{flex: 1, justifyContent: 'flex-end', marginLeft: 40}}>
                <Text style={{fontSize: 32}}>Best Artist</Text>
            </View>
            <View style={{flex: 1, justifyContent: 'flex-start', marginLeft: 40}}>
                <Text style={{fontSize: 24}}>18 Compositions</Text>
            </View>
        </View>
        <View style={{flex: 4, justifyContent: 'center', alignItems: 'center'}}>
            <View style={{flex: 1, margin: 40}}>
                <Image style={{width: 280, height: 280, borderRadius: 40}} source={require('Player/img/cover.jpg')}/>
            </View>
        </View>
        <View style={{flex: 1}}>
            <View style={{flex: 1, flexDirection: 'row'}}>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-around'}}>
                    <Text style={{}}>1:25</Text>
                </View>
                <View style={{flex: 4}}>
                </View>
                <View style={{flex: 1, justifyContent: 'center'}}>
                    <Text style={{}}>3:12</Text>
                </View>
            </View>
            <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
                <View style={{width: 350, height: 3, backgroundColor: 'skyblue',}}></View>
            </View>
        </View>
        <View style={{flex: 2}}>
            <View style={{flex:1, flexDirection: 'row'}}>
              <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center'}}>
                <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
                  <Image style={{width: 30, height: 30}} source={require('Player/img/back.png')}/>
                </View>
              </View>
              <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
                <View style={{width: 70, height: 70, borderRadius: 60, alignItems: 'center', justifyContent: 'center', backgroundColor: 'skyblue'}}>
                  <Image style={{width: 30, height: 30, marginLeft: 5}} source={require('Player/img/play-button.png')}/>
                </View>
              </View>
              <View style={{flex:1, justifyContent: 'center'}}>
                <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
                  <Image style={{width: 30, height: 30}} source={require('Player/img/for.png')}/>
                </View>
              </View>
            </View>
        </View>
    </SafeAreaView>
    )
  }
};

export default Player;