Cara Membuat Slider di React Native

Halo Sobat coding, kali ini BapakNgoding akan membahas sesuatu tentang ngoding lagi setelah sekian lama saya tidak membahas seputar ngoding. Kali ini saya akan membuat artikel tentang "Cara Membuat Slider di React Native". Sebelum itu bagi kalian yang tidak mengetahui apa itu ReactNative bisa mencari-cari terlebih dahulu di Google. Nah tanpa panjang lebar mari kita masuk ke inti artikel ini.

Sumber
https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native.png

Pertama-tama kita akan mencari tahu dulu apa itu Slider,
Slider atau slide adalah halaman yang bisa di slide ke arah tertentu, yang intinya  halaman yang bisa dislide entah ke kanan atau ke kiri.

Nah berikut langkah-langkah membuat slider atau slide di React Native

1. Download dan install ReactNative AppIntroSlider dengan mengetikan perintah berikut

npm install react-native-app-intro-slider

2. Setelah selesai maka langsung kita buka project kita dan lanjut ke tahap selanjutnya yaitu mengimport package AppIntroSlider dengan menambahkan-nya

import AppIntroSlider from 'react-native-app-intro-slider';

3. Buat variable slides state yang nantinya berfungsi sebagai tempat menyimpan data slides anda nantinya.

const slides = [
  {
    key: 'key1',
    title: 'Title 1',
    text: 'Slides ke 1",
    image: require('./assets/gambar1.jpg'),
    backgroundColor: '#27ae60',
  },

  {
    key: 'key2',
    title: 'Title 2',
    text: 'Slides ke 2',
    image: require('./assets/gambar2.jpg'),
    backgroundColor: '#27ae60',
  },

  {
    key: 'key3',
    title: 'Title 3',
    text: 'Slides ke 1',
    image: require('./assets/gambar3.jpg'),
    backgroundColor: '#2980b9',
  }
];

Baca Juga : Cara Membuat Text to Voice di React Native

4. Buat Fungsi untuk merender atau membaca item di slides array anda:

_renderItem = ({ item }) => {
return (
<View style={_style.parent}>
<Text style={_style.text_header}>Judul ke 1 {item.title}</Text>
 <Text style={_style.text_body}>Text : {item.text}</Text>
<Image
placeholderStyle={{ backgroundColor: "#222f3e" }}
PlaceholderContent={<ActivityIndicator />}
source={item.image}
style={_style.box_style}
/>
</View>
);
}

5. Buat fungsi untuk mengecek apakah slides sudah selesai

_onDone = () => {
// User finished the introduction. Show real app through
// navigation or simply by controlling state
this.setState({ showRealApp: true });
}

6. Berikut jika semua codenya disatukan

import React from 'react';
import { StyleSheet, ActivityIndicator } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 'key1',
    title: 'Title 1',
    text: 'Slides ke 1",
    image: require('./assets/gambar1.jpg'),
    backgroundColor: '#27ae60',
  },

  {
    key: 'key2',
    title: 'Title 2',
    text: 'Slides ke 2',
    image: require('./assets/gambar2.jpg'),
    backgroundColor: '#27ae60',
  },

  {
    key: 'key3',
    title: 'Title 3',
    text: 'Slides ke 1',
    image: require('./assets/gambar3.jpg'),
    backgroundColor: '#2980b9',
  }
];

export default class App extends React.Component {
  this.state = {
    showRealApp: false
  }
     _renderItem = ({ item }) => {
        return (
            <View style={_style.parent}>
                <Text style={_style.text_header}>Judul ke 1 {item.title}</Text>
<Text style={_style.text_body}>Text : {item.text}</Text>
                <Image
                    placeholderStyle={{ backgroundColor: "#222f3e" }}
                    PlaceholderContent={<ActivityIndicator />}
                    source={item.image}
                    style={_style.box_style}
                />
            </View>
        );
    }
  _onDone = () => {
 // saat page sudah selesai
    this.setState({ showRealApp: true });
  }
  render() {
    if (this.state.showRealApp) {
      return <App />;
    } else {
      return <AppIntroSlider
       renderItem={this._renderItem} slides={slides} onDone={this._onDone}/>;
    }
  }
}

Nah berikut adalah artikel tutorial tentang "Cara Membuat Slider di React Native".
Jika ada yang belum jelas atau kurang jelas bisa kalian tanyakan di kolom komentar ya 😀,
Sekian dari saya dan mohon maaf sebesar-besarnya jika ada kata-kata saya yang kurang berkenan.

Baca juga tentang Daftar Perintah di Linux OpenSUSE