marudy / react-native-responsive-screen

Make React Native views responsive for all devices with the use of 2 simple methods
MIT License
1.56k stars 142 forks source link

TypeError: this.setState is not a function #82

Open anisharya16 opened 4 years ago

anisharya16 commented 4 years ago

Is this a bug report, a feature request, or a question? Bug

Is the bug reproducible in a production environment (not a debug one)? Yes

Environment "react": "16.11.0", "react-native": "0.62.2", "react-native-responsive-screen": "^1.4.1",

Target Platform: Android (9.0)

Bug: TypeError: this.setState is not a function. (In 'this.setState({orientation: screenWidth < screenHeight ? 'portrait' : 'landscape'})', 'this.setState' is undefined)

I was using class component but had to change it to functional component as per project requirement. Since I changed it to functional component, orientation change is not working and am getting this error. I have attached screenshot for reference to this. Need solution for this, as i have used this library many times in my project.

WhatsApp Image 2020-07-20 at 12 00 28

anisharya16 commented 4 years ago

Any solution for this issue?

gregfenton commented 4 years ago

Is the code where you are calling this a functional component or a class component?

Can you show us the code where you are calling listenOrientationChange() ?

gregfenton commented 4 years ago

I suspect your issue is related to PR https://github.com/marudy/react-native-responsive-screen/pull/70

gregfenton commented 4 years ago

See the PR I just pushed: PR #83

It has instructions on how to download and use it. Hopefully we can get this pulled into master and published soon.

samimhakimi commented 3 years ago

Hello, you have changed from class component to functional component thus, this.setState is now working in Functional component instead you can use Hooks.

tejfaster commented 2 years ago

make some changes in 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'

}