react-native-responsive-screen icon indicating copy to clipboard operation
react-native-responsive-screen copied to clipboard

Orientation listeners don't work in functional components

Open LucasMallmann opened this issue 4 years ago • 6 comments

I was writing a functional component and I just don't know how to subscribe to the orientation changes. Since the method listenOrientationChange accepts a class instance and use the method useState from class components.

I guess that extending the listener to functional components would be great ;)

LucasMallmann avatar Feb 06 '20 14:02 LucasMallmann

I would like to see that feature as well. I am using hooks and I really don't want to use class-based components.

AVATAR197 avatar Apr 16 '20 12:04 AVATAR197

im faceing this issue too and my whole app is build with funcational componants please add the support

mshafex avatar Jul 12 '20 17:07 mshafex

same

ahmedjaafar6 avatar Aug 20 '20 11:08 ahmedjaafar6

See my pull request: PR https://github.com/marudy/react-native-responsive-screen/pull/83

It has updated docs and a hook example and everything. And the change to RNRS itself is pretty small. And adds a new feature 😃

gregfenton avatar Aug 20 '20 14:08 gregfenton

the error for that.setState is stil here , im also using hooks

janpaulalmanoche avatar Mar 14 '21 08:03 janpaulalmanoche

maybe we can change some code like :

const Orientation = () => { const [dimensions, setDimensions] = useState({ window, screen });

useEffect(() => {
    const subscription = Dimensions.addEventListener(
        'change',
        ({ window, screen }) => {
            setDimensions({ window, screen });
        }
    );
    return () => subscription?.remove();
});
return dimensions.screen.height > dimensions.screen.width ? 'portrait' : 'landscape'

}

tejfaster avatar Jul 30 '22 19:07 tejfaster