06. REACT NATIVE – BASIC LAYOUTING

1) Flexbox Dengan Flexbox dapat membuat ukuran tinggi lebar komponen secara responsif yang artinya akan menyesuaikan dengan ukuran perangkat layar yang digunakan untuk mengaksesnya. Untuk mendapatkan posisi tata letak yang responsif dapat mengkombinasikan property flexDirection, alignItems, dan justifyContent. Pada tabel berikut menunjukan deskripsi dari masing-masing property : Berikut contoh sintaks Flex untuk membuat sebuah box yang dinamis : App.js import React, { Component } from "react"; import { View, StyleSheet } from "react-native"; const App = () => { return ( ); }; const styles = StyleSheet.create({ containerRow: { flexDirection: "row", justifyContent: "center", alignItems: "center", backgroundColor: "white", marginBottom: 15, }, containerColumn: { flexDirection: "column", marginRight: 5, backgroundColor: "white", }, redbox: { width: 100, height: 100, backgroundColor: "red", }, bluebox: { width: 100, height: 100, backgroundColor: "blue", }, blackbox: { width: 100, height: 100, backgroundColor: "black", }, greenbox: { width: 100, height: 100, backgroundColor: "green", }, lingkaran: { borderRadius: 50, margin: 3, }, }); export default App; Outputnya: 2) ListView Berikutnya pembuatan listView. Dalam membuat sebuah list digunakan method map(). Method tersebut akan melakukan iterasi sebuah array dari item dan merendernya masing-masing. Berikut contoh penggunaan List View : App.jsx import React, { Component } from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; const App = () => { return ; }; export default App; class ListView extends Component { state = { names: [ { name: "Ben", id: 1 }, { name: "Susan", id: 2 }, { name: "Robert", id: 3 }, { name: "Mary", id: 4 }, { name: "Daniel", id: 5 }, ], }; alertItemName = (item) => { alert(item.name); }; render() { return ( {this.state.names.map((item, index) => ( this.alertItemName(item)}> {item.name} ))} ); } } const styles = StyleSheet.create({ item: { justifyContent: "space-between", alignItems: "center", padding: 30, margin: 2, borderColor: "#2a4944", borderWidth: 1, backgroundColor: "#d2f7f1", }, text: { color: "black", alignItems: "center", }, }); Outputnya: 3) ScrollView Pembangunan aplikasi terkadang membutuhkan banyak komponen, elemen, dan halaman yang panjang. Untuk mendukung hal tersebut, React Native memiliki elemen ScrollView. Elemen ini harus diletakkan di dalam komponen View dan memiliki tag penutup. Pembuatan ScrollView dapat dilakukan dengan dua cara yaitu : ScrollView Vertikal App.jsx import React, { Component } from "react"; import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native"; const App = () => { return ; }; export default App; class Scrollview extends Component { state = { names: [ { name: "Ben", id: 1 }, { name: "Susan", id: 2 }, { name: "Robert", id: 3 }, { name: "Mary", id: 4 }, { name: "Daniel", id: 5 }, { name: "Laura", id: 6 }, { name: "John", id: 7 }, { name: "Debra", id: 8 }, { name: "Aron", id: 9 }, { name: "Ann", id: 10 }, { name: "Steve", id: 11 }, { name: "Olivia", id: 12 }, ], }; alertItemName = (item) => { alert(item.name); }; render() { return ( {this.state.names.map((item, index) => ( this.alertItemName(item)}> {item.name}31 ))} ); } } const styles = StyleSheet.create({ item: { justifyContent: "space-between", alignItems: "center", padding: 30, margin: 2, borderColor: "#2a4944", borderWidth: 1, backgroundColor: "#d2f7f1", }, text: { color: "black", alignItems: "center", }, }); Outputnya : ScrollView Horizontal App.jsx import React, { Component } from "react"; import { View, StyleSheet, ScrollView } from "react-native"; const App = () => { return ( ); }; const styles = StyleSheet.create({ containerRow: { flexDirection: "row", justifyContent: "center", alignItems: "center", backgroundColor: "white", marginBottom: 15, }, redbox: { width: 100, height: 100, backgroundColor: "red", }, bluebox: { width: 100, height: 100, backgroundColor: "blue",

Feb 27, 2025 - 10:42

1) Flexbox
Dengan Flexbox dapat membuat ukuran tinggi lebar komponen secara responsif yang artinya akan menyesuaikan dengan ukuran perangkat layar yang digunakan untuk mengaksesnya. Untuk mendapatkan posisi tata letak yang responsif dapat mengkombinasikan property flexDirection, alignItems, dan justifyContent. Pada tabel berikut menunjukan deskripsi dari masing-masing property :

Berikut contoh sintaks Flex untuk membuat sebuah box yang
dinamis :
App.js

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
const App = () => {
  return (
    
      
        
        
        
        
      
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    
  );
};
const styles = StyleSheet.create({
  containerRow: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    marginBottom: 15,
  },
  containerColumn: {
    flexDirection: "column",
    marginRight: 5,
    backgroundColor: "white",
  },
  redbox: {
    width: 100,
    height: 100,
    backgroundColor: "red",
  },
  bluebox: {
    width: 100,
    height: 100,
    backgroundColor: "blue",
  },
  blackbox: {
    width: 100,
    height: 100,
    backgroundColor: "black",
  },
  greenbox: {
    width: 100,
    height: 100,
    backgroundColor: "green",
  },
  lingkaran: {
    borderRadius: 50,
    margin: 3,
  },
});
export default App;

Outputnya:

2) ListView

Berikutnya pembuatan listView. Dalam membuat sebuah list
digunakan method map(). Method tersebut akan melakukan iterasi
sebuah array dari item dan merendernya masing-masing. Berikut
contoh penggunaan List View :

App.jsx

import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
const App = () => {
  return ;
};
export default App;

class ListView extends Component {
  state = {
    names: [
      { name: "Ben", id: 1 },
      { name: "Susan", id: 2 },
      { name: "Robert", id: 3 },
      { name: "Mary", id: 4 },
      { name: "Daniel", id: 5 },
    ],
  };
  alertItemName = (item) => {
    alert(item.name);
  };
  render() {
    return (
      
        {this.state.names.map((item, index) => (
           this.alertItemName(item)}>
            {item.name}
          
        ))}
      
    );
  }
}
const styles = StyleSheet.create({
  item: {
    justifyContent: "space-between",
    alignItems: "center",
    padding: 30,
    margin: 2,
    borderColor: "#2a4944",
    borderWidth: 1,
    backgroundColor: "#d2f7f1",
  },
  text: {
    color: "black",
    alignItems: "center",
  },
});

Outputnya:

3) ScrollView

Pembangunan aplikasi terkadang membutuhkan banyak komponen,
elemen, dan halaman yang panjang. Untuk mendukung hal tersebut,
React Native memiliki elemen ScrollView. Elemen ini harus
diletakkan di dalam komponen View dan memiliki tag penutup.
Pembuatan ScrollView dapat dilakukan dengan dua cara yaitu :

ScrollView Vertikal

App.jsx

import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
const App = () => {
  return ;
};
export default App;
class Scrollview extends Component {
  state = {
    names: [
      { name: "Ben", id: 1 },
      { name: "Susan", id: 2 },
      { name: "Robert", id: 3 },
      { name: "Mary", id: 4 },
      { name: "Daniel", id: 5 },
      { name: "Laura", id: 6 },
      { name: "John", id: 7 },
      { name: "Debra", id: 8 },
      { name: "Aron", id: 9 },
      { name: "Ann", id: 10 },
      { name: "Steve", id: 11 },
      { name: "Olivia", id: 12 },
    ],
  };
  alertItemName = (item) => {
    alert(item.name);
  };
  render() {
    return (
      
        
          {this.state.names.map((item, index) => (
             this.alertItemName(item)}>
              {item.name}31
            
          ))}
        
      
    );
  }
}
const styles = StyleSheet.create({
  item: {
    justifyContent: "space-between",
    alignItems: "center",
    padding: 30,
    margin: 2,
    borderColor: "#2a4944",
    borderWidth: 1,
    backgroundColor: "#d2f7f1",
  },
  text: {
    color: "black",
    alignItems: "center",
  },
});

Outputnya :

ScrollView Horizontal
App.jsx

import React, { Component } from "react";
import { View, StyleSheet, ScrollView } from "react-native";
const App = () => {
  return (
    
      
        
          
          
          
          
          
          
        
      
    
  );
};
const styles = StyleSheet.create({
  containerRow: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    marginBottom: 15,
  },
  redbox: {
    width: 100,
    height: 100,
    backgroundColor: "red",
  },
  bluebox: {
    width: 100,
    height: 100,
    backgroundColor: "blue",
  },
  blackbox: {
    width: 100,
    height: 100,
    backgroundColor: "black",
  },
  greenbox: {
    width: 100,
    height: 100,
    backgroundColor: "green",
  },
  lingkaran: {
    borderRadius: 50,
    margin: 3,
  },
});
export default App;

Outputnya :