03. BUAT PROJECT PERTAMA

sekarang kita coba modifikasi project yang secara default sudah dibuat.

1. Custom index

silahkan masuk ke folder app -> tabs -> index.tsx

selanjutnya hapus seluruh source code pada index.tsk tersebut, sehingga tampilannya menjadi seperti ini

ketik rnfe kemudian enter sehingga nanti dari react native akan generate listing kode sendiri

Jika sudah,kemudian editlah index.tsx tersebut sehingga nanti kodingan menjadi sebagai berikut

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

const index = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Coffee Shop</Text>
    </View>
  )
}

export default index
const styles = StyleSheet.create({
  container :{
    flex: 1,
    flexDirection: 'column',
  },
  text:{
    color:'white',
    fontSize :42,
    fontWeight:'bold',
    textAlign:'center'
  }
})

Hasil kodingan diatas adalah sebagai berikut

2. Menambahkan Background Image

Sebelum mengganti gambar background maka silahkan tambahkan terlebih dahulu assets gambar pada folder assets/images.

Disini saya akan menambahkan 3 gambar seperti gambar berikut :

Jika sudah menambahkan gambar selanjutnya kembali lagi kita buka file index.tsx pada folder (tabs).

Sebelum lanjut, lakukan perubahan ekstensi file index dari format .tsx (typescript XML) ke format .jsx (javascript XML). tujuannya agar mempermudah dalam melakukan import file gambar.

setelah merubah ekstensi file, silahkan edit file index.jsx sehingga hasilnya sebagai berikut.

import { View, Text, StyleSheet,ImageBackground } from 'react-native'

import icedCoffeeImg from "@/assets/images/iced-coffee.png"
const index = () => {
  return (
    <View style={styles.container}>
      <ImageBackground
       source={icedCoffeeImg}
       resizeMode="cover"
       style={styles.image}
      >
      <Text style={styles.text}>Coffee Shop</Text>
      </ImageBackground>
    </View>
  )
}

export default index
const styles = StyleSheet.create({
  container :{
    flex: 1,
    flexDirection: 'column',
  },

  image: {
    width: '100%',
    height: '100%',
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },

  text:{
    color:'white',
    fontSize :42,
    fontWeight:'bold',
    textAlign:'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  }
})

Berikut adalah hasil jika listing program diatas berhasil dijalankan

3. Menambahkan Splash Screen

Untuk menambahkan/mengedit splash screen, silahkan buka file app.json. Kemudian cari bagian ini :

ganti bagian value pada property image, disini saya akan mengganti splash-icon.png menjadi coffee-splash.png, menghapus property imageWidth, mengganti value property resizeMode menjadi cover dan mengganti property backgroundColor menjadi #000000. Berikut ini adalah hasil akhir setelah di edit.

*catatan : splash screen tidak akan muncul dalam mode web namun akan muncul jika aplikasi di buka pada expo di mobile.

4. Mengganti Icon

Untuk mengganti icon , masih pada file app.json silahkan cari bagian ini

edit baris ke 7 , dimana saya akan mengubah value dari property icon dari icon.png menjadi coffee-icon.png

*catatan : icon tidak akan muncul dalam mode web namun akan muncul jika aplikasi di buka pada expo di mobile.