fix component picker untuk ios

view/New_Register.js

 import React from 'react';
-import { StyleSheet, View, Text, TextInput, Button, StatusBar, Picker, Alert, Image } from 'react-native';
+import { StyleSheet, View, Text, TextInput, Button, StatusBar, Picker, Alert, Image, Platform } from 'react-native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import Axios from 'axios';
 import { connect } from 'react-redux';
@@ -8,6 +8,7 @@ import { BASE_URL_GET_ENUM, BASE_URL_REGISTER } from '../model/Base_Model';
 import i18n from 'i18n-js';
 import Spinner from 'react-native-loading-spinner-overlay';
 // import { connect } from 'react-redux';
+import RNPickerSelect from 'react-native-picker-select';
 
 
 var date = [
@@ -42,6 +43,7 @@ class NewRegister extends React.Component {
             dob_month: "",
             dob_day: "",
             list_gender: [],
+            gender_list: [],
             list_domicilie: [],
             list_profesion: [],
             list_dob: [],
@@ -53,6 +55,28 @@ class NewRegister extends React.Component {
 
     componentDidMount() {
         this.load_data();
+
+        let date_list = []
+        for (let i = 1; i <= 31; i++) {
+            date_list.push({label: String(i), value: i});
+        }
+        let month_list = []
+        for (let i = 1; i <= 12; i++) {
+            const month_name = month[i];
+            month_list.push({label: month_name, value: i});
+        }
+        let year_list = []
+        let current_year = new Date().getFullYear();
+        let start_year = current_year - 65;
+        let end_year = current_year - 13;
+        for (let i = start_year; i <= end_year; i++) {
+            year_list.push({label: String(i), value: i});
+        }
+        this.setState({
+            date: date_list,
+            month: month_list,
+            year: year_list
+        })
     }
 
     load_data() {
@@ -62,10 +86,18 @@ class NewRegister extends React.Component {
             const list_gender = data_enum.gender
             const list_profesion = data_enum.profession
             const list_domicilie = data_enum.domicile
+            let gender_list = []
+            for (const key in list_gender) {
+                if (list_gender.hasOwnProperty(key)) {
+                    const row = list_gender[key];
+                    gender_list.push({label: row, value: key})
+                }
+            }
             this.setState({
                 list_gender: list_gender,
                 list_profesion: list_profesion,
                 list_domicilie: list_domicilie,
+                gender_list: gender_list,
             })
         })
     }
@@ -308,10 +340,34 @@ class NewRegister extends React.Component {
                         </View>
                         <View style={styles.itemsRow}>
                             <View style={styles.items1}>
-                                {/* <Text>{i18n.t('dob')}</Text> */}
                                 <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Date Of Birth</Text>
                             </View>
+                                {Platform.OS === 'ios' ? (
+                                <View style={styles.itemPicker}>
 
+                                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginLeft: 10 }}>
+                                        <RNPickerSelect onValueChange={(value) => this.setState({ dob_day: value })}
+                                            items={this.state.date}
+                                            placeholder={{ label: '-- Select --' }}
+                                            style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
+                                        />
+                                    </View>
+                                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                                        <RNPickerSelect onValueChange={(value) => this.setState({ dob_month: value })}
+                                            items={this.state.month}
+                                            placeholder={{ label: '-- Select --' }}
+                                            style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
+                                        />
+                                    </View>
+                                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}>
+                                        <RNPickerSelect onValueChange={(value) => this.setState({ dob_year: value })}
+                                            items={this.state.year}
+                                            placeholder={{ label: '-- Select --' }}
+                                            style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
+                                        />
+                                    </View>
+                                </View>
+                                ) : (
                                 <View style={styles.itemPicker}>
 
                                     <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
@@ -327,7 +383,6 @@ class NewRegister extends React.Component {
                                         </Picker>
                                     </View>
                                     <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
-
                                         <Picker
                                             mode="dropdown"
                                             selectedValue={this.state.dob_month}
@@ -354,12 +409,24 @@ class NewRegister extends React.Component {
                                         </Picker>
                                     </View>
                                 </View>
+
+                                )}
                         </View>
+
+
                         <View style={styles.itemsRow}>
                             <View style={styles.items1}>
-                                {/* <Text>{i18n.t('gender')}</Text> */}
                                 <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Gender</Text>
                             </View>
+                            {Platform.OS === 'ios' ? (
+                            <View style={styles.pickerGender}>
+                                    <RNPickerSelect onValueChange={(value) => this.setState({ gender: value })}
+                                        items={this.state.gender_list}
+                                        placeholder={{ label: '-- Select --' }}
+                                        style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
+                                    />
+                            </View>
+                            ) : (
                             <View style={styles.pickerGender}>
                                 <Picker selectedValue={this.state.gender}
                                     onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
@@ -371,8 +438,8 @@ class NewRegister extends React.Component {
                                         )
                                     }
                                 </Picker>
-
                             </View>
+                            )}
                         </View>
                         <TouchableOpacity onPress={() => this.validate()}>
                             <View style={styles.button}>
@@ -442,6 +509,8 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderRadius: 10,
         height: 40,
+        justifyContent: 'space-between', 
+        alignItems: 'center',
     },
     titleText: {
         margin: 15,
@@ -463,11 +532,10 @@ const styles = StyleSheet.create({
         borderColor: 'gray',
         borderWidth: 1,
         borderRadius: 10,
-        padding: 10,
-        paddingLeft: 100,
+        // padding: 10,
         marginLeft: 44,
         marginRight: 44,
-        alignItems: 'stretch',
+        // alignItems: 'stretch',
         justifyContent: 'center'
     },
     button: {