Git Product home page Git Product logo

react-native-appstate-hook's People

Contributors

amrlabib avatar bobinrinder avatar juanpag94 avatar rikschefferoberon avatar shamilovtim avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-native-appstate-hook's Issues

[ Small Optimization ] Excess useEffect dependency

Note: I could make a PR for this if this package is still being maintained and is open to PRs, but seeing as the directory structure only includes a dist folder, I assume this package only includes the JS-compiled package.

I was looking to wrap the RN AppState in my own custom hook and came across this package. While there's some functionality I still wish to add myself, I noticed that it looked like the hook has appState as a dependency, which creates a lot of excess listener creations and cleanups.

By modifying the handleAppStateChange function to:

function handleAppStateChange(nextAppState) {
  setAppState((prevAppState) => {
    if (nextAppState === 'active' && prevAppState !== 'active')
      isValidFunction(onForeground) && onForeground();
    else if (prevAppState === 'active' && nextAppState.match(/inactive|background/))
      isValidFunction(onBackground) && onBackground();
  });
  isValidFunction(onChange) && onChange(nextAppState);
}

and make the dependency list: [onChange, onForeground, onBackground] so that changes to the appState do not trigger the creation of a new AppState listener after the previous listener is cleaned up.

This change isn't strictly necessary, since the hook's appState and callback function calls remain unaffected by the number of times the change listeners are added/removed, but it was just something I noticed while testing the two methods.

Just say thank you.

Hello !

This first issue is clearly not an issue.
I would like to thank you for this very useful hook.

Keep going ! 🚀

Can´t use in 0.6x

npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR! react-native@"0.62.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.59.0" from [email protected]
npm ERR! node_modules/react-native-appstate-hook
npm ERR! react-native-appstate-hook@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

TypeError: undefined is not an object (evaluating 'appState.remove')

node_modules/react-native-appstate-hook/dist/index.js

`import { useState, useEffect } from 'react';
import { AppState } from 'react-native';

export default function useAppState(settings) {
const { onChange, onForeground, onBackground } = settings || {};
const [appState, setAppState] = useState(AppState.currentState);

useEffect(() => {
function handleAppStateChange(nextAppState) {
if (nextAppState === 'active' && appState !== 'active') {
isValidFunction(onForeground) && onForeground();
} else if (appState === 'active' && nextAppState.match(/inactive|background/)) {
isValidFunction(onBackground) && onBackground();
}
setAppState(nextAppState);
isValidFunction(onChange) && onChange(nextAppState);
}
const appState = AppState.addEventListener('change', handleAppStateChange);

// removing -> return appState.remove();
return;
}, [onChange, onForeground, onBackground, appState]);

// settings validation
function isValidFunction(func) {
return func && typeof func === 'function';
}
return { appState };
}`

Interim solution!

Android behavior is incorrect / inconsistent with iOS

Testing on a Galaxy J7 with Expo 36 release build and the following code:

  useAppState({
    onForeground: () => {
      alert('on foreground. this is a test.');
    },
    onBackground: () => {
      alert('on background. this is a test.');
    },
  });

On iOS this code works correctly. onForeground and onBackground are never called unless the app is minimized which changes the appState.

On Android, this code does not work the same way. First off, onForeground gets called on screen mount when it shouldn't. this isn't an appstate change, this is just when first running the hook. Then subsequently onForeground gets called on future app state changes. This behavior occurs only on device release build -- it does not occur on emulator or on a USB cable connected device.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.