Membuat Splash Screen Sederhana dengan React Native

Halo sahabat codectivist,

Berhubung karena saya lagi ada projek untuk mengerjakan aplikasi ojek online berbasis android. Sekalian saya share nih cara membuat splash screen, atau animasi sebelum lanjut ke form berikutnya.

Disini saya buat sederhana saja, karena jangan sampai justru membuat optimasi aplikasi yang di buat malah kurang efektif.

Jadi, langsung saja langkah-langkahnya:

1. Pastikan teman-teman sudah install react-native yah dan sudah masuk ke folder projectnya.

2. Silahkan buat file baru dan beri nama sesuai keinginan teman-teman. Disini saya beri nama splash.js

dan berikut listing code untuk splash.js

import React, { Component } from 'react'
import {StyleSheet, Text, View, Image} from 'react-native'

export default class Splash extends Component{
    constructor(){
        super()
        this.state={timer:0}
        setInterval(() => {
           this.setState({timer:this.state.timer + 1}) 
        }, 1000);
    }
    render(){
        return(
            <View style={styles.container}>
                <Image style={styles.logo} source={require('../images/logo.png')}/>
                <Text style={styles.title}>MEGAJEK</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        backgroundColor: 'white',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        marginTop: 5,
        fontWeight: 'bold',
        fontSize: 30,
        fontFamily : 'bauhaus 93',
        justifyContent: 'center'
    },
    logo :{ 
        height: 169,
        width: 128,
        alignItems: 'center'
    }
})

silahkan disetting sendiri untuk source gambar dan aset-aset yang lainnya.
Nah, sedikit penjelasannya yaitu, kita set timer dan mereset nilai intervalnya ke 0, dan pada saat aplikasi di run, maka akan melakukan looping dengan menambah detiknya menjadi 1 (1000ms)

3. Selanjutnya silahkan teman-teman buat halaman kedua, setelah splash dijalankan. *(Disini tampilannya silahkan di kreasikan sendiri)*

4. Lakukan setting di file index.js, seperti listing berikut

/**
 * @format
 */
import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import Splash from './src/components/Splash';
import {name as appName} from './app.json';
import Login from './src/pages/Login';
import Home from './src/pages/Home';

class Main extends Component{
    constructor(){
        super();
        this.state = {currentScreen: 'Splash'};        
        console.log('Done 3 seconds')
        setTimeout(()=>{
            console.log('Done 3 seconds')
            this.setState({currentScreen: 'Login'})
        },3000) 
    }
    render(){
        const {currentScreen} = this.state
        let mainScreen = currentScreen === 'Splash' ? <Splash/> : <Login/>
        return mainScreen
    }
}

AppRegistry.registerComponent(appName, () => Main);

Nah, selanjutnya di index.js inilah kita set batas akhir timernya, dan akan otomatis berpindah ke halaman selanjutnya. Disini saya set 3 detik (3000ms).

Mungkin itu saja dulu, selanjutnya akan saya share bagaimana membuat tampilan login atau layouting dengan react native.

#STAYCODE

Muhammad Noviyanto

Alumni Teknik Informatika, Universitas Islam Negeri Alauddin Makassar, Angkatan 2013.

Subscribe to receive free email updates: