react-native-keep-awake VS customize-cra

componentDidMount() { this.recalcTotalSeconds(); KeepAwake.activate(); this._interval = setInterval(() => { this.step(); }, 999);} It works nicely as long as the phone is unlocked. When the phone is locked the interval is not fired and the sound is not played. As a first measure I uploaded a version with Keep Awake that prevents the screen from locking. I am looking for a battery-friendly solution.

React Native for Web is compatible with many native modules that ship with React Native: Button, Views, TextInput, etc… will be automatically mapped to their web counterparts correctly when imported from react-native. Unfortunately, using other external native libraries like react-native-sound or react-native-keep-awake can be a bit hit-and-miss because many native functionalities are not available on the web.

Install react-app-rewired and customize-cra:

If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

Now, for customize-cra to work we need to modify the config-overrides.js file once again. The override method from customize-cra receives a list of functions, so we need to change the signature like this:

Eventually, you might need to customize your project beyond what Create React App allows you to do. Most of these customizations will probably be just slight changes to the Webpack and Babel configuration of Create React App where ejecting would be overkill — which is why you might wanna use something like react-app-rewired, customize-cra, or craco to apply these changes without ejecting.