Pure component or hooks version of codePushStatusDidChange

[MaffooBristol]

Expected Behaviour

CodePush should have a version of codePushStatusDidChange that does not require using stateful components in React.

I'd assume the syntax would be something similar to this:

import codePush, { useCodePush } from 'react-native-code-push';

function Router() {
  const { SyncStatus } = useCodePush();
  switch (SyncStatus) {
    case SyncStatus.CHECKING_FOR_UPDATE:
      console.log("Checking for updates.");
      break;
    // ...
  }
  return <Foo />;
}

const App = codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  installMode: codePush.InstallMode.ON_NEXT_RESUME,
})(Router);

AppRegistry.registerComponent(appName, () => App);

This may already be up for consideration, or already vetoed, and I know it would be a large architectural change throughout the codebase. Just thought I would see what the situation is. Thanks!

• react-native-code-push version: 6.0.0
• react-native version: 0.61.4
• iOS/Android/Windows version: Any
• Does this reproduce on a debug build or release build? Any
• Does this reproduce on a simulator, or only on a physical device? Any

[mingyjongo]

Here's an example of how to accomplish this currently:

CodePushProvider.tsx

import React, { createContext, useContext } from 'react'
import codePush, { DownloadProgress } from 'react-native-code-push'

interface CodePushContext {
  status: null | codePush.SyncStatus
  progress: null | number
}

// @ts-ignore
const CodePushContext = createContext<CodePushContext>({})

export const useCodePush = () => useContext<CodePushContext>(CodePushContext)

export const CodePushProvider = codePush()(
  class extends React.Component<{}, CodePushContext> {
    state = {
      status: null,
      progress: null,
    }

    codePushStatusDidChange(status: codePush.SyncStatus) {
      this.setState({ status })
    }

    codePushDownloadDidProgress(progress: DownloadProgress) {
      this.setState({ progress: progress.receivedBytes / progress.totalBytes })
    }

    render() {
      return (
        <CodePushContext.Provider
          value={{
            status: this.state.status,
            progress: this.state.progress,
          }}
        >
          {this.props.children}
        </CodePushContext.Provider>
      )
    }
  }
)

export default CodePushProvider

ChildComponent.tsx

const ChildComponent: React.FC = () => {
  const { progress, status } = useCodePush()
  return (
    <View>
      <Text>{JSON.stringify({ progress, status }, null, 2)}</Text>
    </View>
  )
}

This issue has been automatically marked as stale because it has not had any activity for 60 days. It will be closed if no further activity occurs within 15 days of this comment.

[someshwari55]

Not working

[Alaa-Ben]

Hi !
Any news on this ? Is a "functional component" version of codePushStatusDidChange on the roadmap ?
thanks !

[samchan0221]

Hi ! Any news on this ? Is a "functional component" version of codePushStatusDidChange on the roadmap ? thanks !

I think the static methods are enough to do what we want to do with hooks. So it is not really needed.

The downside is we need to implement our own AppStart and AppResume logic though, because that means we can only use the CheckFrequency.MANUAL

[Alaa-Ben]

@samchan0221 How so ? there's no listener (on the status change) among the static methods, is there ?

[samchan0221]

@samchan0221 How so ? there's no listener (on the status change) among the static methods, is there ?

I write something like that anywhere (useEffect/eventHandler) in react.

CodePush.sync(
  options,
  onAppResumeSyncStatusChange,
  onDownlodProgress,
  onBinaryVersionMismatch,
).catch(console.error);

[awitherow]

We're not sure why our code push is not working anymore recently.

I'm trying to base my codePush installation off the documentation by wrapping the App.tsx component with the codePush(opts)(App) version instead of the sync version to try to determine if this is a potential cause of the failure.

I see now that I'll lose access to the codePushStatusDidChange callback.

It would be great if this was exported from CodePush.

[DmitriyKirakosyan]

As we do not have plans to add support for this feature in the next year, I'm closing the issue.