Open haveamission opened 3 years ago
I'm not clear on what you mean. If you want to use the width and height functions in a component, you'll need to import them or fetch them via a hook (e.g. Context API). In my components where I use them, I have:
import {
widthPercentageToDP as wPct,
heightPercentageToDP as hPct,
} from 'react-native-responsive-screen';
But I only have the listener in one place in my app, at the very top of the component tree:
const App = () => {
const [responsiveScreen, setResponsiveScreen] = useState();
useEffect(() => {
listenOrientationChange({setStateHook: setResponsiveScreen});
return () => removeOrientationListener();
});
return <Providers />;
}
(Note: I'm using the version from this Pull Request I created that adds support for functional components/hooks as used in the example above, but you could achieve similar with class components and the existing setState capability of the main release)
I was just thinking - is it possible to have a stylesheet based listener? Right now, it seems like you need to add the listener into each and every single component you want to resize, but I want to use this with React Native Web, and update styles upon window resize.
Having to include the styles in every component I use seems like writing a bunch of code, and couples the styles very heavily to the code in question.
Is there a better, more decoupled way to use this library?