'Why onLayout returns the same x/y coordinates for all elements?

I have created custom Input using react-native-elements library and it looks like this:

       <Input
            {...props}
            ref={this.ref}
            autoCapitalize={'none'}
            scrollEnabled={false}
            enablesReturnKeyAutomatically
            textAlignVertical='top'
            placeholderTextColor='grey'
            label={props.label}
            errorStyle={customStyles.errorStyle}
            onFocus={() => {
                this.setState({ focused: true });
                props.multiline && props.scrollToEnd();
            }}
            onChange={this.checkInput}
            onEndEditing={this.checkInput}  
            errorMessage={this.getErrorMessage()}
            onLayout={e => console.log(e.nativeEvent)}
        />

Then I render this input in custom component where I can change type of input:

    renderInput = () => {
    const result = [];
    const { inputNames, inputData, noTooltips, settingsData, getFormRef, childrenRefs } = this.props;

    inputNames.split(', ').forEach(inputName => {
        result.push(
            inputData
                .filter(item => {
                    return item.name === inputName;
                })
                .map(item => {
                    // here also are types of input
                    return this.inputModel(item, getFormRef, childrenRefs);
                })
        );
    });
    return result;
};

And finally I render main component in the ScrollView component:

                        <Forms
                            highlightWarnings={this.state.highlightWarnings}
                            getValue={setValue.bind(this)}
                            _onLayout={addRequiredField.bind(this)}
                            inputValues={this.state.inputValues}
                            inputNames={'email, phone'}
                            getFormRef={this.getFormRef}
                            childrenRefs={this.state.childrenRefs}
                        />

So I use this component 8 times in ScrollView and of course every input should has own x and y coordinates. But when I call:

            onLayout={e => console.log(e.nativeEvent)}

it shows me the same coordinates for all items, but they all have unique ids image with items

So, please help me figure out what's going on? If you need I can add more info.

Additional info ----

        onLayout={
            !item.optioned &&
            !this.props.placeholder &&
            !this.props.inputValues[item.name]
                ? this.props._onLayout.bind(this, item.name)
                : null              
        }


        _onLayout={addRequiredField.bind(this)}


export function addRequiredField(name, event) {
const copyEvent = {...event};

this.setState(({ requiredEmptyFields, coorditantes }) => {
    if (!requiredEmptyFields.includes(name)) {
        return { 
            requiredEmptyFields: [...requiredEmptyFields, name],
            coorditantes: [...coorditantes, copyEvent.nativeEvent],
        };
    }
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source