'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 |
|---|
