Basic React Native Part 28 - React Native Copy to Clipboard

react-native • Jan 20, 2020

Pada  Part 27 kita telah belajar dan mengenal AppState jadi jika anda belum mengikuti tutorial Part 27 diharapkan anda mengikuti tutorial Part 27 terlebih dahulu. Pada Tutorial Part 28 ini kita mengenal terlebih dahulu Basic React Native Copy to Clipboard.

Membaca dan Menulis dari Clipboard sangat mudah di react native dengan menggunakan api clipboard. Komponen akan bekerja pada kedua android dan ios Platform.

Mengimplementasikan Pada Project React Native

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject
Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android
Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
Code Default App.js
Tampilan Default File App.js
Tampilan Default File App.js

Menghapus Code Default App.js

Untuk memudahkan memahami component Copy to Clipboard kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

  • Import React
import React, { Component } from 'react';
Import React
  • Import Component React Native Untuk Project React Native dari React Native
import { StyleSheet, Text, View, Button, TextInput, Clipboard } from 'react-native';
Import Component
  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}
Membuat Class
  • Kemudian tambahkan code berikut ini diatas render
//Tambahkan code ini diatas render
constructor(props) {
    super(props);
    this.state = {
      text: '',
      clipboardContent: null,
    };
  }
  readFromClipboard = async () => {
    const clipboardContent = await Clipboard.getString();   
    this.setState({ clipboardContent }); 
  };
  writeToClipboard = async () => {
    await Clipboard.setString(this.state.text);
    alert('Copied to Clipboard!');
  };
Code Diatas Render
  • Kemudian tambahan code berikut ini didalam return.
return (
    //Code return
<View style={styles.container}>
        <TextInput
          style={styles.textInput}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          placeholder="Type here..."/>
        <Button
          onPress={this.writeToClipboard}
          title="Copy to Clipboard"/>
        <Text style={styles.boldText}>Clipboard Contents: </Text>
        <Text>{this.state.clipboardContent}</Text>
        <Button
          onPress={this.readFromClipboard}
          title="Paste from Clipboard"
        />
      </View>
Tambahkan code pada return
  • Setelah itu export class App.
export default App
export class
  • Berikut code style, letakkan sebelum export default
//Buat Style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    marginTop:50,
  },
  boldText: {
    fontWeight: '600',
    marginTop:60,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 10,
    marginBottom:20,
  },
});
Code Style
  • Berikut Code lengkap nya
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Clipboard } from 'react-native';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      clipboardContent: null,
    };
  }
  readFromClipboard = async () => {
    const clipboardContent = await Clipboard.getString();   
    this.setState({ clipboardContent }); 
  };
  writeToClipboard = async () => {
    await Clipboard.setString(this.state.text);
    alert('Copied to Clipboard!');
  };
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          placeholder="Type here..."/>
        <Button
          onPress={this.writeToClipboard}
          title="Copy to Clipboard"/>
        <Text style={styles.boldText}>Clipboard Contents: </Text>
        <Text>{this.state.clipboardContent}</Text>
        <Button
          onPress={this.readFromClipboard}
          title="Paste from Clipboard"
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    marginTop:50,
  },
  boldText: {
    fontWeight: '600',
    marginTop:60,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 10,
    marginBottom:20,
  },
});
export default App
Code Lengkap
  • Tampilan Copy to Clipboard
Tampilan Section List
Tampilan Copy to Clipboard

Demikianlah pembahasan Tutorial Part 28 ini akan kita lanjutkan pada Tutorial Part 29.

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Recommended for you

No results for your search, try something different.