Friday, August 19, 2022
HomeiOS Developmentcss - KeyboardAvoidingView not working correctly on iOS react native, expo even...

css – KeyboardAvoidingView not working correctly on iOS react native, expo even when I attempted all options together with the documentation


I’ve a react native Expo undertaking. Sadly I’m blocked by an annoying downside.

That is how the view appears to be like like:

enter image description here

After I click on on the second enter (Amount) an empty clean house is added 🙁

enter image description here

Moreover, once I click on the second time on the enter, the keyboard overlaps once more

enter image description here

And that is the code:

<KeyboardAvoidingView fashion={{ flex: 1 }} habits={"peak"}>
  <View fashion={fashion.container}>
    <Header
      title={t("shoppingList.title")}
      view={AppView.SHOPPING_CART}
      onDelete={() => setConfirmMultipleDeleteModalVisible(true)}
      onSettings={() => setSettingsModalVisible(true)}
    />
    <SettingsModal
      seen={settingsModalVisible}
      onSave={onSaveSettings}
      onClose={() => setSettingsModalVisible(false)}
    />
    <View fashion={{ flex: 1 }}>
      <FlatList
        information={shoppingList}
        keyExtractor={(merchandise, index) => index + ""}
        ListHeaderComponent={
          <ShoppingListTableHeader
            columns={columns}
            selectedColumn={selectedColumn}
            course={course}
            type={sortTable}
          />
        }
        stickyHeaderIndices={[0]}
        renderItem={({ merchandise, index }) => {
          return (
            <GestureHandlerRootView>
              <ConfirmMultipleDeleteModal
                seen={confirmMultipleDeleteModalVisible}
                objects={shoppingList.filter(
                  (merchandise) => selectedItemIds.indexOf(merchandise.id) !== -1
                )}
                onDelete={multipleDeleteAndCloseConfirmModal}
                onClose={() => setConfirmMultipleDeleteModalVisible(false)}
              />

              <Pressable
                onPress={() => {
                  handleOnPress(merchandise);
                  mark(index);
                }}
                onLongPress={() => {
                  selectItems(merchandise);
                }}
              >
                <Card
                  fashion={{
                    ...generalStyles.card,
                    backgroundColor: index % 2 == 1 ? "#F0F0F0" : "white",
                  }}
                >
                  <View fashion={generalStyles.displayOnRow}>
                    {selectedItemIds.size > 0 && (
                      <Checkbox
                        standing={
                          selectedItemIds.indexOf(merchandise.id!) !== -1
                            ? "checked"
                            : "unchecked"
                        }
                        onPress={() => handleOnPress(merchandise)}
                        coloration={"#585858"}
                        uncheckedColor={"black"}
                      />
                    )}
                    <ShoppingItem
                      merchandise={merchandise}
                      index={index}
                      marked={shoppingList[index].purchased}
                    />
                  </View>
                  {selectedItemIds.indexOf(merchandise.id!) !== -1 && (
                    <View fashion={generalStyles.overlay} />
                  )}
                </Card>
              </Pressable>
            </GestureHandlerRootView>
          );
        }}
      />
    </View>
    {addModalVisible ? (
      <AddShoppingListItem
        onSave={onSaveItem}
        onClose={() => setAddModalVisible(false)}
      />
    ) : (
      <MaterialCommunityIcons
        identify={"cart-plus"}
        dimension={40}
        onPress={() => setAddModalVisible(true)}
        fashion={fashion.addIcon}
      />
    )}
    <StatusBar fashion="auto" />
  </View>
</KeyboardAvoidingView>

export const fashion = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
width: “100%”,
}
});

I additionally tried to place the part inside

<KeyboardAvoidingView
      habits={Platform.OS === 'ios' ? 'padding' : 'peak'}
      fashion={kinds.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

but it surely did not work 🙁

Any strategies, pleaseee?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments