recipes visible

src/components/modals/recipes/ModalAddIngredients.js

@@ -7,12 +7,13 @@ import { findRecipeById } from '../../../redux/slices/recipesSlice'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong
+    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
 } from '../styles/modal'
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
 import theme from '../../../styles/theme';
+import { Text } from 'react-native';
 
 const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
 
@@ -56,7 +57,12 @@ const ModalAddIngredients = (props) => {
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{margin: 0}} >
+            <Wrapper>
             <ModalHeader>Add to grocerylist</ModalHeader>
             <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
             <WrapperInput>
@@ -65,7 +71,7 @@ const ModalAddIngredients = (props) => {
                     style={{ fontSize: 20 }}
                     type="text"
                     value={listName}
-                    onChange={(text) => setListName(text.target.value)}
+                    onChangeText={(text) => setListName(text)}
                     onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                     placeholder="Grocery list" />
                 {listName ? <IconCheck /> : <IconWrong />}
@@ -78,9 +84,9 @@ const ModalAddIngredients = (props) => {
                 <IconMeal />
                 <Input
                     style={{ fontSize: 20, width: 100 }}
-                    type="number"
+                    type="number-pad"
                     value={servings}
-                    onChange={(text) => setServings(Number(text.target.value))}
+                    onChangeText={(text) => setServings(text)}
                     min={amountOfServings}
                     step={amountOfServings}
                     placeholder="Multiplier" />
@@ -88,10 +94,11 @@ const ModalAddIngredients = (props) => {
             </WrapperInput>
             {IngredientsList}
             <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                 <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add</Button>
+                <Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
             </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }