Having problems to show result before validation and storage

React Native
1

Hi, I have some problems. I am trying to do a form where you must fill in the name, the number. This form is validated touching the plus icon at the end of the form. This form appear horizontally on the screen. Once you touch the plus icon to validate the form, i would like to see the result on the screen above the form. But I have some problems store the value from formik (handlesubmit) in my array called “ElementLists” and show this array.
Please, could you help me to solve this problem?

These are my files:

App.js:

import { StatusBar } from ‘expo-status-bar’;
import React, { useEffect, useState } from ‘react’;
import { AccessibilityInfo, Button, Image, SafeAreaView, StyleSheet } from ‘react-native’;

import * as ImagePicker from ‘expo-image-picker’;

import StockScreenWorker from ‘./Screens/Stock/StockScreenWorker’
import ImageInputList from ‘./Components/ImageInputList’;
import AddProduct from ‘./Screens/Stock/AddProduct’;
import WelcomScreen from ‘./Screens/Login/WelcomScreen’;
import AppButton from ‘./Components/AppButton’;
import LoginScreen from ‘./Screens/Login/LoginScreen’;
import RegistrationScreen from ‘./Screens/Login/RegistrationScreen’;
import AddElement from ‘./Components/AddElement’;
import ImageInput from ‘./Components/ImageInput’;
import AddElementList from ‘./Components/Forms/AddElementList’

export default function App()
{

const [ElementList,setElementList]= useState();
const [ElementLists,setElementLists]= useState([]);

const handleAddBill =(line) =>
{
setElementLists([…ElementLists,line]);// en utilisant …ElementLists, uri on a une copie du tableau originale et on lui mat l’uri à la fin
}

const handleRemoveBill =(line) =>
{
setElementLists (ElementLists.filter((ElementList)=> ElementList !==line));

}

return (

  <SafeAreaView>
    <AddElementList
          ElementLists={ElementLists}
          handleAddBill={handleAddBill}
          handleRemoveBill={handleRemoveBill}
    />
  </SafeAreaView>

)}

const styles = StyleSheet.create({
ContainerSearch:
{
flexDirection:‘row’,
},
Safe: {
backgroundColor:“lightgreen”,
},
});

The second files is called “AddElementList.js”:

import React, { useRef } from ‘react’;
import { View, StyleSheet, ScrollView, Text } from ‘react-native’;
import AddFormInput from ‘…/AddFormInput’;

function ImageInputList({ElementLists=[], handleRemoveBill, handleAddBill}) {
const scrollView=useRef();
return (

<ScrollView
ref={scrollView}
onContentSizeChange={()=> scrollView.current.scrollToEnd()}
>

{ElementLists.map( (line)=> (

<AddFormInput
ElementList={line}
onChangeImage={()=> handleRemoveBill(line)}
/>
))}

                            <AddFormInput 
                                 onChangeImage={(line)=> handleAddBill(line)}
                           />
                            
                </View>
        </ScrollView>
    </View>

);
}

const styles = StyleSheet.create({
container: {
flexDirection:‘column’,
},
});

export default ImageInputList;

The third is called “AddFormInput.js”:

import React, { useEffect } from ‘react’;
import { View, StyleSheet, Image, TouchableWithoutFeedback,Alert,Text, TouchableOpacity } from ‘react-native’;
import colors from ‘…/config/colors’;

import AddElement from ‘./AddElement’;

function AddFormInput({ElementList, onChangeImage,handleAddBill}) {

const handlePress= () =>
{
Alert.alert(‘Delete’, ‘Are you sure you want to delete this article ?’,[
{text:‘Yes’, onPress: ()=> onChangeImage(null)},
{text:‘No’}
])
}

return (
  <>
  <TouchableOpacity onPress={handlePress} >
    <View style={styles.container}>
        {ElementList && <Text>Hello</Text>}
    </View>
  </TouchableOpacity>

  <View style={styles.container}>
         {!ElementList && <AddElement/>  }
  </View>

  
  </>

);
}

const styles = StyleSheet.create({
container: {
alignItems:“center”,
backgroundColor:colors.light,
borderRadius:15,
height:100,
overflow:‘hidden’,
marginTop:10,
width:‘100%’
},
});

export default AddFormInput;

The fourth is called “AddElement.js”:

import React from ‘react’;
import { View,StyleSheet} from ‘react-native’;

import Screen from ‘./Screen’;
import AppForm from ‘./Forms/AppForm’
import AppAddForm from ‘./Forms/AppAddForm’;
import SubmitButtonPlus from ‘./SubmitButtonPlus’;

import * as Yup from ‘yup’;

const ValidationSchema= Yup.object().shape(
{
name:Yup.string().required().label(‘Name’),
number:Yup.number().required().label(‘Number’),
billNumber:Yup.string().required().label(‘BillNumber’),
}
);

function AddElement({onChangeImage,ElementList,handleAddBill}) {

return (

<AppForm
initialValues={{billNumber:’’,name:’’,number:’’}}
onSubmit={values => console.log(values)}
validationSchema={ValidationSchema}
>


<AppAddForm
autoCapitalize=‘none’//il capitalize autimatiquemente
keyboardType=“default”
name=“name”
placeholder=“Nom”
/>








<SubmitButtonPlus ElementList={ElementList} onChangeImage={(line)=> handleAddBill(line)}/>


</Screen>

);
}

const styles = StyleSheet.create({
container:
{
flexDirection:‘row’,
height:65,
},
columnOne:
{
// flex:1,
height:50,
justifyContent:‘center’,
marginLeft:10,
},
columnTwo:
{
// flex:1,
height:50,
justifyContent:‘center’,
marginLeft:10,
},
columnThree:
{
// flex:1,
height:50,
justifyContent:‘center’,
marginLeft:10,
},
columnFourth:
{
// flex:0.4,
justifyContent:‘center’,
borderRadius:30,
height:50,
marginLeft:10,
marginRight:10,
marginLeft:40
},
});

export default AddElement;

The fifth is called “SubmitButtonPlus.js”:

import React from ‘react’;

import AppButtonPlus from ‘…/Components/AppButtonPlus’;

import{ useFormikContext} from ‘formik’;

function SubmitButtonPlus({handleAddBill}) {
const {handleSubmit}= useFormikContext()
return (
<AppButtonPlus
onPress={handleSubmit}
onChangeImage={(line)=> handleAddBill(line)}
/>
);
}

export default SubmitButtonPlus;

2

Hello Giu,

I have difficulty in understanding your problem and what you wanna achieve.

Is it possible for you to explain to me more like providing some images or could be on codesandbox or something.

thank you