Hai kawan,

Di blog ini, saya akan menjelaskan kepada Anda bagaimana menggunakan social icon di react native. Anda dapat dengan mudah menggunakan social icon di react native. Pertama saya akan membuat import namespace SocialIcon dari react-asli-elemen, setelah saya akan menggunakan social icon menggunakan untuk social icon tagadd di react native.

Di sini, saya akan memberi Anda contoh lengkap untuk hanya menampilkan social icon menggunakan react native seperti di bawah ini.

Pada langkah pertama Jalankan perintah berikut untuk membuat proyek.

expo init SocialIcon 

Langkah 2 - Installation of Dependency

Pada langkah ini, Jalankan perintah berikut untuk menginstal Dependency.

Untuk menggunakan ikon sosial Anda perlu menginstal npm react-native-elements --save.

Untuk menginstal ini buka terminal dan lompat ke proyek Anda.

cd SocialIcon

Jalankan perintah berikut:

npm install react-native-elements --save

Langkah 3 - App.js

Pada langkah ini, Anda akan membuka file App.js dan memasukkan kodenya.

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { SocialIcon } from 'react-native-elements';

export default class App extends Component<{}> {
render() {
return (
<ScrollView>
  <View style={styles.container}>
  <Text style={{ fontSize: 20, marginBottom: 20, textAlign: 'center' }}>
    Social Icons
  </Text>
  <View
    style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
  <View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flexDirection: 'column' }}>
    <SocialIcon
      type="facebook"
      onPress={() => {
      alert('facebook');
    }}
    />
    <Text style={{ textAlign: 'center' }}>facebook</Text>
  </View>
  <View style={{ flexDirection: 'column' }}>
    <SocialIcon
      type="instagram"
      onPress={() => {
      alert('instagram');
      }}
    />
    <Text style={{ textAlign: 'center' }}>instagram</Text>
  </View>
  <View style={{ flexDirection: 'column' }}>
   <SocialIcon
      type="linkedin"
      onPress={() => {
      alert('linkedin');
    }}
    />
    <Text style={{ textAlign: 'center' }}>linkedin</Text>
  </View>
  <View style={{ flexDirection: 'column' }}>
  <SocialIcon
  type="pinterest"
  onPress={() => {
  alert('pinterest');
  }}
  />
  <Text style={{ textAlign: 'center' }}>pinterest</Text>
  </View>
  <View style={{ flexDirection: 'column' }}>
  <SocialIcon
  type="twitter"
  onPress={() => {
  alert('twitter');
  }}
  />
  <Text style={{ textAlign: 'center' }}>twitter</Text>
      </View>
    </View>
   </View>
  </View>
</ScrollView>
  );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 250,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Langkah 4 - Run project

Pada langkah terakhir jalankan proyek Anda menggunakan perintah di bawah ini.

npm start

Output:

Semoga bisa membantu Anda...