React-native-code-push: 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>
  )
}