Pada dasarnya react native sama dengan react js sama-sama dalam bentuk component, cara penulisan juga sama. Anda perlu tahu component, props, state, hooks untuk lanjut jika belum maka silahkan baca materi react pada minggu sebelumnya disini

Hello World!

Ini adalah tradisi yang turun temurun, saat pertamakali belajar hal baru dalam koding biasanya dengan menampilkan Hello World! jadi Hello Asrul Dev. Langsung saja mari tulis kode berikut pada file App.js.

import React from "react";
import { View, Text } from "react-native";

const App = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "blue", fontSize: 32 }}>Hello Asrul Dev</Text>
    </View>
  );
};

export default App;

Hasilnya akan terlihat seperti berikut.

Terlihat jelas pada kode diatas, jika pada web kita menggunakan <div> maka pada react native kita menggunakan <View>, begitu juga penggunaan <p>, <h1>, ... atau <span> menjadi <Text> pada react native.

Style

Desain yang bagus bisa menjadi daya tarik untuk menggunakan aplikasi, maka materi ini saya anggap penting. Style pada react native mirip dengan css pada web tapi dalam bentuk kode object javascript.

React native telah menyediakan StyleSheet yang dapat kita gunakan untuk kumpulan style kode yang dimiliki. Sebelumnya terlihat bahwa saya telah memperlihatkan style pada <View> dan <Text>, dengan menggunakan StyleSheet maka kode akan terlihat lebih rapi.

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

const App = () => {
  return (
    <View style={styles.AllCenter}>
      <Text style={styles.textDemo}>Hello Asrul Dev</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  AllCenter: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textDemo: {
    color: "blue",
    fontSize: 32,
  },
});

Layout

Pada react native, layout menggunakan konsep flex yang dapat dibaca disini

Text Input

Jika pada html ada <input type="text" /> maka gantinya pada react native adalah <TextInput />. Perhatikan contoh berikut.

import React, { useState } from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";

const App = () => {
  const [teks, updateTeks] = useState("");
  return (
    <View style={styles.AllCenter}>
      <Text style={styles.textDemo}>Hello Asrul Dev</Text>

      <TextInput
        style={styles.inputHope}
        placeholder="Tulis apapun"
        onChangeText={(text) => updateTeks(text)}
        value={teks}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  AllCenter: {
    flex: 1,
    padding: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  textDemo: {
    color: "blue",
    fontSize: 32,
  },
  inputHope: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "100%",
  },
});

Hasilnya akan seperti berikut.

Button

Intraksi pada mobile akan sering berhubungan dengan yang namanya sentuh untuk melakukan interaksi, biasanya untuk pindah halaman atau lainnya. Button merupakan salah satu bentuk interaksi tersebut. Button pada react native dapat dilihat pada contoh berikut.

import React, { useState } from "react";
import { View, Text, StyleSheet, TextInput, Button } from "react-native";

const App = () => {
  const [teks, updateTeks] = useState("");
  return (
    <View style={styles.AllCenter}>
      <Text style={styles.textDemo}>Hello Asrul Dev</Text>

      <TextInput
        style={styles.inputHope}
        placeholder="Tulis apapun"
        onChangeText={(text) => updateTeks(text)}
        value={teks}
      />
      <View style={styles.fullButton}>
        <Button onPress={() => alert(teks)} title="Sentuh Aku" />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  AllCenter: {
    flex: 1,
    padding: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  textDemo: {
    color: "blue",
    fontSize: 32,
  },
  inputHope: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "100%",
  },
  fullButton: {
    height: 40,
    width: "100%",
    marginTop: 8,
  },
});

Hasilnya akan seperti berikut.

ScrollView

Aplikasi mobile memiliki ruang yang sempit, sehingga scroll akan sangat membantu untuk tampilan yang panjang. Berikut penggunaan ScrollView pada react native.

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  ScrollView,
  Image,
} from "react-native";

const App = () => {
  const [teks, updateTeks] = useState("");
  return (
    <ScrollView>
      <View style={styles.AllCenter}>
        <Text style={styles.textDemo}>Hello Asrul Dev</Text>

        <TextInput
          style={styles.inputHope}
          placeholder="Tulis apapun"
          onChangeText={(text) => updateTeks(text)}
          value={teks}
        />
        <View style={styles.fullButton}>
          <Button onPress={() => alert(teks)} title="Sentuh Aku" />
        </View>
      </View>

      <View style={styles.AllCenter}>
        <Image
          source={{
            uri: "https://avatars2.githubusercontent.com/u/15111402?s=460&v=4",
            width: 200,
            height: 200,
          }}
          style={{ marginTop: 8 }}
        />
        <Image
          source={{
            uri: "https://avatars2.githubusercontent.com/u/38931702?s=460&v=4",
            width: 200,
            height: 200,
          }}
          style={{ marginTop: 8 }}
        />
        <Image
          source={{
            uri: "https://avatars0.githubusercontent.com/u/51555828?s=460&v=4",
            width: 200,
            height: 200,
          }}
          style={{ marginTop: 8 }}
        />
        <Image
          source={{
            uri: "https://avatars1.githubusercontent.com/u/44023987?s=460&v=4",
            width: 200,
            height: 200,
          }}
          style={{ marginTop: 8 }}
        />
      </View>
    </ScrollView>
  );
};

export default App;

const styles = StyleSheet.create({
  AllCenter: {
    flex: 1,
    padding: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  textDemo: {
    color: "blue",
    fontSize: 32,
  },
  inputHope: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "100%",
  },
  fullButton: {
    height: 40,
    width: "100%",
    marginTop: 8,
  },
});

Hasilnya akan seperti berikut.