CreateStudent.js

/**
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { View, Text, StyleSheet, Picker, Dimensions, ScrollView } from 'react-native';
import { Appbar, TextInput, RadioButton, Checkbox } from 'react-native-paper';

type State = {}
type Props = $ReadOnly<{}>

const SCREEN_WIDTH = Dimensions.get('window').width;

export default class CreateStudent extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View>
        <Appbar>
          <Appbar.Header>
            <Appbar.BackAction onPress={() => alert('hi')} />
          </Appbar.Header>
          <Appbar.Content title="Tambah Siswa" />
          <Appbar.Action icon="content-save" onPress={() => {}} />
        </Appbar>
        <ScrollView>
          <View style={styles.container}>
            <View style={styles.row}>
              <TextInput
                label="Nama Depan"
                mode="outlined"
                style={[styles.formFlex, {marginRight: 4}]}
              />
              <TextInput
                label="Nama Belakang"
                mode="outlined"
                style={[styles.formFlex, {marginLeft: 4}]}
              />
            </View>
            
            <TextInput
              label="No. Hp"
              mode="outlined"
              style={styles.formControl}
            />

            <Text style={styles.label}>Gender</Text>

            <View style={styles.row}>
              <View style={[styles.row, styles.radioButton]}>
                <RadioButton
                  value="first"
                  status={ false ? 'checked' : 'unchecked' }
                />
                <Text style={styles.radioButtonText}>Pria</Text>
              </View>
              <View style={[styles.row, styles.radioButton]}>
                <RadioButton
                  value="second"
                  status={ true ? 'checked' : 'unchecked' }
                />
                <Text style={styles.radioButtonText}>Wanita</Text>
              </View>
            </View>

            <Text style={styles.label}>Jenjang</Text>
            <Picker
              selectedValue={'TK'}
              style={{ height: 50, width: SCREEN_WIDTH*0.95 }}
            >
              <Picker.Item label="TK" value="tk" />
              <Picker.Item label="SD" value="sd" />
              <Picker.Item label="SMP" value="smp" />
              <Picker.Item label="SMK" value="smk" />
            </Picker>

            <Text style={styles.label}>Hobi</Text>
            <View style={styles.row}>
              <Checkbox
                status={true ? 'checked' : 'unchecked'}
              />
              <Text style={styles.checkboxText}>Ngoding</Text>
            </View>
            <View style={styles.row}>
              <Checkbox
                status={false ? 'checked' : 'unchecked'}
              />
              <Text style={styles.checkboxText}>Membaca</Text>
            </View>
            <View style={styles.row}>
              <Checkbox
                status={false ? 'checked' : 'unchecked'}
              />
              <Text style={styles.checkboxText}>Menulis</Text>
            </View>

            <TextInput
              label="Alamat"
              mode="outlined"
              style={styles.formControl}
            />
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 12
  },
  row: {
    flexDirection: 'row'
  },
  formFlex: {
    flex: 2,
  },
  formControl: {
    marginVertical: 16
  },
  label: {
    color: '#6300ee',
    marginVertical: 16
  },
  radioButton: {
    marginHorizontal: 6
  },
  radioButtonText: {
    marginTop: 8
  },
  checkboxText: {
    marginTop: 8
  }
})