2.0.0 to 3.0.0 migration? about react-native-loading-spinner-overlay

[irohitb]

@Abhishek2250 @emclab I broke it a while back, Haven't got time to fix it.

Doing it now.

[titanism]

v3.0.1 released - try it out?

https://github.com/ladjs/react-native-loading-spinner-overlay/releases/tag/v3.0.1

[irohitb]

Fixing this now.

[niftylettuce]

I just deprecated v3.0.0, not sure what issue is, I thought it was OK with recent PR's but maybe not. I also don't have time to dedicate to this.

[irohitb]

@niftylettuce I am looking into it.
Should be something wrong with my PR i guess.

[irohitb]

@cristianoccazinsp can you please share your code snippet?

I tried this and it is working for me

        <Spinner
        visible={true}
        textContent={'Loading...'}
        textStyle={{
            color: '#FFF'
        }}
      />

[cristianoccazinsp]

I'm using the following:

spinnerStyle: {
  color: '#FFF',
  height: 'auto',
  fontSize: variables.DefaultFontSize,
  marginHorizontal: 10 * variables.sizeScaling,
},

<SpinnerOverlay
  visible={spinnerVisible}
  textContent={this.state.spinnerMessage}
  textStyle={styles.spinnerStyle}
/>

[irohitb]

@cristianoccazinsp This looks the same as the code snippet I shared? Did 2.x? worked for you? Happy to get on a video call and debug it with you.

[cristianoccazinsp]

2.x works fine as I just reverted. If that's working for you, it means some other component is interfering with my code. I will try to debug later today, can't really join a meeting right now.

I'm using the following packages as well.
"react-native": "0.66.3",
"react-native-screens": "3.10.2",
"react-native-gesture-handler": "2.2.0",
"@react-navigation/compat": "5.3.20",
"@react-navigation/native": "5.9.4",
"@react-navigation/stack": "5.14.9",

[irohitb]

@cristianoccazinsp No worries, Can you share variables.sizeScaling value? Also, are you not seeing the text or even the loading spinner and transparent bg?

[cristianoccazinsp]

It's normally 1, but it changes slightly for bigger devices.

I'm not seeing the overlay at all, the modal pretty much does not open and I can freely tap anywhere on the screen.

[irohitb]

@cristianoccazinsp I copied the spinner overlay example from the repo and tried it in my sample app https://github.com/irohitb/rn-practise/blob/feat/spinner-overlay-example/src/screens/Home/index.tsx

This is working for me.

Would be super helpful if you create a reproduce it there so that I can fix it.

@niftylettuce Can you please add me as maintainer and remove This package has been deprecated from npm

[cristianoccazinsp]

@irohitb your example seems to work fine, I don't know what's wrong with my project that would cause such an issue.

However, looking at your project, you have very old dependencies, can you try upgrading the ones I linked above?

[cristianoccazinsp]

@irohitb have you tried rendering the spinner with visible={false} first? I'm not sure the following line is doing what it should:
https://github.com/joinspontaneous/react-native-loading-spinner-overlay/blob/master/src/index.tsx#L42

The issue was probable created in the hooks migration.
See https://stackoverflow.com/questions/54865764/react-usestate-does-not-reload-state-from-props for an idea.

[irohitb]

@cristianoccazinsp This makes sense. I will fix it.

[irohitb]

@cristianoccazinsp @niftylettuce opened PR:
https://github.com/joinspontaneous/react-native-loading-spinner-overlay/pull/115/files

[irohitb]

@cristianoccazinsp can you please test this once? so that @niftylettuce can remove deprecated from npm

[cristianoccazinsp]

@irohitb I believe it's working fine now.

[erez-unitronics]

@cristianoccazinsp Still not working

[irohitb]

@erez-unitronics this isn't released on npm yet. CC @niftylettuce?

[niftylettuce]

See #115 (comment)

[erez-unitronics]

Is v3.0.0 of the package working correctly now?

[emclab]

Have the same problem with 3.0.0. All spinner no show.

[Abhishek2250]

Not showing for me either

[Salmankhan033]

I updated 2.0.0 to 3.0.0 but did not show Spinner .

<Spinner overlayColor={'rgba(0, 0, 0, 0.65)'} cancelable={false} visible={visible} textContent={spinnerText ? spinnerText : 'Synching data'} textStyle={styles.textStyle} />

[martaaay]

I haven't spent nearly long enough in the source (nor latest react-native) to understand what's going on, but when I changed the code in index.tsx from:

          <Modal
            animationType={animation}
            onRequestClose={() => _handleOnRequestClose()}
            supportedOrientations={['landscape', 'portrait']}
            transparent
            visible={spinnerVisible}
            statusBarTranslucent={true}
          >
            {spinner}
          </Modal>

to

          <Modal
            animationType={animation}
            onRequestClose={() => _handleOnRequestClose()}
            supportedOrientations={['landscape', 'portrait']}
            transparent
            visible={visible}
            statusBarTranslucent={true}
          >
            {spinner}
          </Modal>

Now it works properly when starting with visibility == false and changing it to true later. Not sure why it works now, and I'm not familiar with how React.useState works, but it seems as though this is where things are breaking.

[Poxios]

Thank you for your efforts.
When will the fixed version be updated?

[irohitb]

Any idea why the create pull request button is disabled?

[titanism]

Have you tried refreshing? Giving you maintainer access now @irohitb

[irohitb]

@titanism I have fixed and pushed it to master? how does the release process works? Do you create it manually? I can't see any git action or semantic release (or equivalent) setup?

[titanism]

Are you certain that your recent commits fixes the issue? As far as I know, users reported it broken since this commit ff3ca51. I think that TypeScript definition fixes do not equate to fixing the underlying issue. Your recent commits only modified package.json, tsconfig.json, and yarn.lock.

[titanism]

After further review, we see that your work was merged however the issue was that TS errors on build. Will release a new version now, one moment.

[titanism]

@irohitb can you please pull the latest that we've pushed to master and fix the following TS lint errors? We do not write TypeScript so we're unable to work with this:

❯ npm test

> [email protected] test
> npm run lint


> [email protected] lint
> xo && remark . -qfo


  src/index.tsx:12:7
  ✖  12:7   transparent is assigned a value but never used.                                                         no-unused-vars
  ✖  43:9   Unsafe assignment of an any value.                                                                      @typescript-eslint/no-unsafe-assignment
  ✖  43:50  Unsafe call of an any typed value.                                                                      @typescript-eslint/no-unsafe-call
  ✖  45:5   Unsafe call of an any typed value.                                                                      @typescript-eslint/no-unsafe-call
  ✖  54:3   Unsafe call of an any typed value.                                                                      @typescript-eslint/no-unsafe-call
  ✖  55:5   Unsafe call of an any typed value.                                                                      @typescript-eslint/no-unsafe-call
  ✖  78:25  Prefer using nullish coalescing operator (??) instead of a logical or (||), as it is a safer operator.  @typescript-eslint/prefer-nullish-coalescing
  ✖  92:18  Unsafe assignment of an any value.                                                                      @typescript-eslint/no-unsafe-assignment

  8 errors

[irohitb]

@titanism okay recent dependency update added eslint which was causing these rules to break.

I have fixed it but couldn't get this error when I ran tests

Unsafe call of any typed value.

Also, Function should infer types automatically in this case (although it's probably good to write them).

I have created this PR, Can you please once see if the test cases pass and merge it?

#121