text: import React from 'react';
  import { StyleSheet, View, SafeAreaView, Text } from 'react-native';
  import { Button } from 'react-native-elements'
  import Constants from 'expo-constants';
  import NavigationBar from '../../component/navigationBar';
  import FormGroup from '../../component/form/formGroup';
  
  function Separator() {
    return <View style={styles.separator} />;
  }
  
  const dropdown = [{value:'laki-laki', name:'laki-laki'}, {value:'perempuan', name:'perempuan'}];
  const formData = [
    {label: 'Nama Tersangka', name: 'Nama Tersangka', fieldName: 'nama_tersangka'},
    {label: 'Umur', name: 'Umur', fieldName: 'umur', type: 'number'},
    {label: 'Jenis Kelamin', name: 'Jenis Kelamin', fieldName: 'jenis_kelamin', dropdown: dropdown, type: 'select'},
    {label: 'Foto', name: 'foto', fieldName: 'foto', type: 'upload'}
  ]
  
  export default class TersangkaNew extends React.Component {
    state = {
      loading: false,
    }
  
    componentDidMount(){
      this.setState({loading:true})
      //do api call here
      setTimeout(() => this.setState({loading:false}), 2000);
    }
  
    render(){
      //refer navigation path in component navigator , buttonGroup is button that will be render in bottom animation menu
      const buttonGroup = (
        <Button
          title="Solid Button"
          type="outline"
          containerStyle={{padding:10}}
        />
      )
      return (
        <NavigationBar hideSearch disableMenu renderButton={buttonGroup} loading={this.state.loading}>
          <SafeAreaView style={styles.container}>
          <FormGroup title="FORM TERSANGKA" formData={formData}/>
          <Button
            title="Buat Tersangka"
            type="outline"
            containerStyle={{padding:10}}
            onPress={() => {
              this.props.navigation.navigate('penangkapan.edit')
            }}
          />
          <Separator />
        </SafeAreaView>
        </NavigationBar>
      )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: Constants.statusBarHeight,
      marginHorizontal: 16,
    },
    title: {
      textAlign: 'center',
      marginVertical: 8,
    },
    fixToText: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    separator: {
      marginVertical: 8,
      borderBottomColor: '#737373',
      borderBottomWidth: StyleSheet.hairlineWidth,
    },
  });
  