Not working internal vendor component until "refreshed"

Expo SDK
1

Please provide the following:

  1. SDK Version: 39
  2. 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.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.