Tron Nguyen

1 bundle
1 file22 days ago
3

List Football Player React Native

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

const LIST_OF_PLAYER = [
  {
    name: 'Cristiano Ronaldo',
    club: 'Juvetus',
    position: 'CF',
    playerAvatar:
      'https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5d2388f14c687b00085c0f91%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D0%26cropX2%3D1559%26cropY1%3D130%26cropY2%3D1690',
  },
  {
    name: 'Lionel Messi',
    club: 'Barcelona',
    position: 'CF',
    playerAvatar: '',
  },
  {
    name: 'Romeo Lukaku',
    club: 'Inter Milan',
    position: 'CF',
    playerAvatar: '',
  },
  {
    name: 'M. Salah',
    club: 'Liverpool',
    position: 'LFW',
    playerAvatar: '',
  },
  {
    name: 'G. Bale',
    club: 'Real Marid',
    position: 'RFW',
    playerAvatar: '',
  },
];

export default class App extends Component {
  renderPlayerItem = ({item, index}) => {
    return (
      <View
        style={{
          margin: 16,
          padding: 12,
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 3,
          },
          shadowOpacity: 0.27,
          shadowRadius: 4.65,
          elevation: 6,
          backgroundColor: 'white',
          alignItems: 'center',
          flexDirection: 'row',
        }}>
        <Image
          style={{aspectRatio: 5 / 5, height: 100}}
          source={{uri: item.playerAvatar}}
        />
        <View style={{marginLeft: 8}}>
          <Text style={{fontSize: 20}}>{item.name}</Text>
          <Text style={{fontSize: 14}}>{item.club}</Text>
          <Text style={{fontSize: 14}}>{item.position}</Text>
        </View>
      </View>
    );
  };

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <Text style={{fontSize: 34, textAlign: 'center', fontWeight: 'bold'}}>
          {'React Native Examples'}
        </Text>
        <FlatList
          data={LIST_OF_PLAYER}
          renderItem={this.renderPlayerItem}
          keyExtractor={item => item.name}
        />
      </SafeAreaView>
    );
  }
}