A realistic assumption is that a new RN version contains breaking-changes, which is anew struggling for developers, especially when it's unpredicted - headache (!). Facing the upgrade dilemma, there's a simple but efficient solution - find it inside the Medium article
- De-coupling is ensuring that two different components are not tightly dependent on one another.
- Encapsulation is hiding the inner functionality of a component behind a defined interface.
i.e. import and wrap a certain component from react-native package, and use this wrapped component as a source for all code-base.
Inspect this breaking-chage: removing <TextInput>
's onTextInput
event
Wrap and reconsile the breaking-chage:
import React, { useState } from 'react';
import { TextInput } from 'react-native';
import _ from 'lodash';
const AppTextInput = ({ onChangeText, onTextInput, onSelectionChange, ...rest }) => {
const [selection, setSelection] = useState({ start: 0, end: 0 });
const _onSelectionChange = (event) => {
const { nativeEvent: { selection } } = event;
setSelection(selection);
if (_.isFunction(onSelectionChange)) {
return onSelectionChange(event);
}
}
_onChangeText = (newText) => {
const { value: previousText } = rest;
const diiText = _.difference((newText || '').split(''), (previousText || '').split('')).join('');
if (_.isFunction(onTextInput)) {
onTextInput({
nativeEvent: {
text: diiText,
previousText,
range: { ...selection }
}
});
}
if (_.isFunction(onChangeText)) {
return onChangeText(newText);
}
}
return (
<TextInput
{...rest}
onChangeText={_onChangeText}
onSelectionChange={_onSelectionChange}
/>
)
};
export default AppTextInput;