Please provide the following:
- SDK Version: 39
- Platforms(Android/iOS/web/all): Android/iOS
In order to share common company components across multiple application projects, I created a react-native library.
I have a Button confirmation where I recently added an update for confirmation feature, using the Alert
component:
export const Button: FunctionComponent<ButtonProps> = ({
onPress, title, titleStyle, variant, disabled, confirmation,
}) => {
const variantStyle = variants[variant || 'secondary'];
const [loading, setLoading] = useState<boolean>(false);
const handlePress: TouchableOpacityProps['onPress'] = (event) => {
const process = (): Promise<void> => Promise.resolve(onPress ? onPress(event) : undefined)
.then(() => setLoading(false))
.catch(() => setLoading(false));
setLoading(true);
if (!confirmation) {
process();
} else {
Alert.alert(confirmation.title, confirmation.message, [
{
text: confirmation.cancelLabel || 'Cancel',
onPress: () => setLoading(false),
},
{
text: confirmation.confirmLabel || 'Confirm',
onPress: process,
},
]);
}
};
return (
<TouchableOpacity
style={[
styles.button,
variantStyle.button,
disabled ? styles.buttonDisabled : {},
]}
onPress={handlePress}
disabled={disabled || loading}
>
{
loading
? (
<ActivityIndicator
color={variantStyle.buttonTitle.color}
/>
)
: (
<Text
style={[
styles.buttonTitle,
variantStyle.buttonTitle,
disabled ? styles.buttonTitleDisabled : {},
titleStyle,
]}
>
{title}
</Text>
)
}
</TouchableOpacity>
);
};
The component comes with stories and works very well on the Storybook App.
Then I update my internal package to the last version to use my new feature like this:
import React from 'react';
import { Button, ButtonProps } from '@company/apps-components';
const AppScreen = (): ReactElement => {
const handleAction: ButtonProps['onPress'] => () {
console.log('process');
}
return (
<View>
<Button
title="Delete"
variant="danger"
onPress={handleAction}
confirmation={{
title: 'Really delete ?',
message: 'This will be definitive.',
confirmLabel: 'Delete this thing.',
}}
/>
</View>
);
};
export default AppScreen;
But when I test by pressing the button, I don’t get any confirmation prompt and the process is done immediately.
This is when the funny business begins. I opened node_modules/@company/apps-components/src/Button.tsx
file with VSCode and hit Ctrl+S
.
And voilà! The expo app is refreshed and the component is working again like a charm.
I have of course cleaned all the not versioned file using git clean -fdx
, guessing a cache issue, but this did not change a thing.
So my question is quite simple because I am lost: What the hell am I missing?
Any help, even clues or test asking, are welcomed.