Drop down scroll is not working inside a view that I have customed. But when I put it outside the "input_select_container" view and inside the "container" view, it can scroll. When I remove the style of <View style={[styles.input_select_container, styles.w_100, {zIndex: 3}]}>, It works. How can I scroll the drop-picker? Here is my code:
return (
<SafeAreaView style={styles.container}>
<View style={styles.detailContainer}>
<Item label={t("Order No")+" :"} content={PHORNO} />
<Item label={t("Item No")+" :"} content={ITEMNO} />
<Item label={t("Lot No")+" :"} content={LOTNO} />
<Item label={t("Order Qty")+" :"} content={ORDER_NO} unit={UNIT} />
</View>
{/* Area for input, select box... */}
{/* Receive QTY */}
<View style={[styles.input_select_container, styles.w_100, {zIndex: 3}]}>
<View style={[styles.labelContainer, styles.w_40]}>
<Text style={styles.label}>{t("Received Qty")+" :"}</Text>
</View>
<View style={[styles.input_select_inner, styles.w_60]}>
<TextInput
placeholder={"0"}
keyboardType={'numeric'}
style={[styles.textInput, styles.w_45]}
onChangeText={(text) => setReiveQty(text)}
selectionColor={'#000'}
/>
<DropDownPicker
open={qtyReceiveDropOpen}
value={qtyReceiveDropValue}
items={qtyReceiveDropItems}
setOpen={setQtyReveiveDropOpen}
setValue={setQtyReveiveDropValue}
setItems={setQtyReceiveDropItems}
badgeStyle={{elevation: 999}}
style={styles.picker}
placeholder="Value"
containerStyle={[styles.pickerContainer, styles.w_50]}
/>
</View>
</View>
{/* To Location Area*/}
<View style={[styles.input_select_container, styles.w_100, {zIndex: 2}]}>
<View style={[styles.labelContainer, styles.w_40]}>
<Text style={styles.label}>{t("To location")+" :"}</Text>
</View>
<DropDownPicker
open={locationDropOpen}
value={locationDropValue}
items={locationDropItems}
setOpen={setLocationDropOpen}
setValue={setLocationDropValue}
setItems={setLocationDropItems}
placeholder="Location"
style={styles.picker}
containerStyle={[styles.pickerContainer, styles.w_60]}
/>
</View>
{/* To Manuf Date Area */}
<View style={[styles.input_select_container, styles.w_100]}>
<View style={[styles.labelContainer, styles.w_40]}>
<Text style={styles.label}>{t("Manuf. date")+" :"}</Text>
</View>
<TouchableOpacity style={styles.datePicker} onPress={onDatePicker}>
{manuDate ? <Text style={styles.date}>{`${manuDate}`}</Text> : <Text style={styles.date}>{`Chose date`}</Text>}
</TouchableOpacity>
{datePickerOpen &&
<DateTimePicker
value={datePicker}
mode={'date'}
display={'default'}
onChange={onDateSelected}
dateFormat={'date month year'}
/>}
</View>
{/* Catch weight */}
<View style={[styles.input_select_container, styles.w_100, {zIndex: 1}]}>
<View style={[styles.labelContainer, styles.w_40]}>
<Text style={styles.label}>{t("Catch weight")+" :"}</Text>
</View>
<View style={[styles.input_select_inner, styles.w_60]}>
<TextInput
placeholder={"0"}
keyboardType={'numeric'}
onChangeText={(text)=>setCatchWeight(text)}
style={[styles.textInput, styles.w_45]}
selectionColor={'#000'}
/>
<DropDownPicker
open={weightDropOpen}
value={weightDropValue}
items={weightDropItems}
setOpen={setWeightDropOpen}
setValue={setWeightDropValue}
setItems={setWeightDropItems}
placeholder="Value"
zIndex={1}
style={styles.picker}
containerStyle={[styles.pickerContainer, styles.w_50]}
/>
</View>
</View>
{/* Complete Flag Area */}
<View style={[styles.input_select_container, styles.w_100]}>
<View style={[styles.labelContainer, styles.w_45]}>
<Text style={styles.label}>{t("Completed flag")+" :"}</Text>
</View>
<Switch
trackColor={{false: "#767577", true: "#81b0ff"}}
thumbColor={isSwitchEnabled ? "#f4f3f4" : "#f4f3f4"}
ios_backgroundColor={"#3e3e3e"}
onValueChange={onSwitchPress}
value={isSwitchEnabled}
/>
</View>
{/* Button Area */}
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.goBack()}
>
<Text style={styles.buttonText}>{t("Back")}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate(SCREEN.PoGoodsReceive)}>
<Text style={styles.buttonText}>{t("Choose PO")}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={handleConfirm}>
<Text style={styles.buttonText}>{t("Confirm")}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.white
},
ImageBackground: {
flex: 1,
resizeMode: "cover",
width: "100%",
height: '100%',
},
detailContainer: {
marginTop: 15,
marginBottom: 40,
},
labelContainer: {
width: "40%",
justifyContent: "center",
alignItems: "flex-end",
paddingRight: 15,
},
label: {
fontSize: 16,
fontWeight: "bold",
color: COLORS.label,
},
input_select_container: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 15,
marginBottom: 15,
zIndex: 1
},
input_select_inner: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
textInput: {
borderColor: COLORS.lightGray,
borderWidth: 1,
fontSize: 18,
paddingLeft: 4,
height: 40
},
pickerContainer: {
},
picker: {
height: 40,
borderColor: COLORS.lightGray,
minHeight: 40,
maxHeight: 40,
borderRadius: 0,
paddingLeft: 4,
paddingRight: 2,
elevation: 1
},
datePicker: {
borderWidth: 1,
height: 40,
width: '60%',
borderColor: COLORS.lightGray,
justifyContent: 'center',
},
date: {
marginLeft: 2
},
buttonContainer: {
flexDirection: "row",
justifyContent: "space-around",
flex: 1,
alignItems: 'flex-end',
marginBottom: 20
},
button: {
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
backgroundColor: COLORS.button_primary,
height: 50,
width: "25%",
},
buttonText: {
fontSize: 14,
fontWeight: "bold",
color: COLORS.white,
},
w_40: {
width: '40%'
},
w_45: {
width: '45%',
},
w_50: {
width: '50%'
},
w_60: {
width: '60%'
},
w_100: {
width: '100%'
},
lb_16: {
fontSize: 16
},
lb_18: {
fontSize: 18
}
});
I have tried to change the styles of the parent view but it doesn't work.
