ReactJS / JavaScript : Not receiving resize event for many cases

Question

I am working on chat interface and want my chat log items to fit on screen when the window resizes. For the main list I'm using a FlatList and each individual item is a separate Component.

To achieve this, I have subscribed to the resize and fullscreenchange events using the window.addEventLister method but still cannot get resize in many cases such as when leaving or entering macOS Full screen mode.

Is there some other events I should subcribe to or follow a different approach. Is there a library that can give me all thee kinds of events in one place?

Code Snippet on Request:

Flat List Views:

export class ChatListItem extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
       //Is there anything wrong with doing it the above way?   
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}

However the same screen has a input box (that I made into a different Component for some reason) and that is able to resize with the same logic:

export class ChatInputBox extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}

We can't help you with code we can't see. :-) Please update your question with a [mcve] demonstrating the problem. (Please be sure to read that link before saying you can't do that because it's "too big" or "proprietary", the link explains why those are not valid reasons for not doing it.) — T.J. Crowder, May 23 '19 at 12:26
What I have provided is still a code snippet, not the real thing and i had some reasons to do this initially — Divyansh Goenka, May 24 '19 at 12:50
Possible duplicate of [*How to access the correct `this` inside a callback?*](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) Adding `this.forceUpdate = this.forceUpdate.bind(this);` in your constructor will fix it, see that question for why and how. — T.J. Crowder, May 24 '19 at 13:15
A) Why do you think that? How do you think `forceReload` knows which component to reload if not by using `this`? B) Did you *try* it? If you did, again, provide a [mcve] demonstrating the problem. — T.J. Crowder, May 24 '19 at 13:53
I have used the same logic in other screen elements and can get the desired effect without ```bind```ing.. seems that for some reason the problem is specifically occurring here - in the ```FlatList```views.. to the extent that new views added to the FlatList also follow the new window dimensions, but not the existing ones — Divyansh Goenka, May 24 '19 at 14:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193892/discussion-between-divyansh-goenka-and-t-j-crowder). — Divyansh Goenka, May 24 '19 at 14:11

score 1 · Answer 1 · answered May 23 '19 at 12:29

The following is a Box component that listens to screen resize.

class Box extends React.Component{
     state = {
         width : window.innerWidth
         height : window.innerHeight
     }

     onResize = () => this.setState({width: window.innerWidth, height: window.innerHeight})

     componentDidMount(){
         window.addEventListener('resize', this.onResize)
     }

     componentWillUnmount(){
         window.removeEventListener('resize', this.onResize)
     }  
    render(){
        const { width, height } = this.state 
        return(
            <div 
                style={{width, height, backgroundColor: 'red}}
            />
        )
    }
}

appreciate you answer, but i think I'm altogether not geting these events on macOS fullscreen entry / exit — Divyansh Goenka, May 23 '19 at 12:31
Updated question . with some necessary the snippet, please let me know if you want to know more — Divyansh Goenka, May 24 '19 at 05:23

ReactJS / JavaScript : Not receiving resize event for many cases

1 Answers1