Rotation bug.

[jasongaare]

I'm working on migrating from v3 to v4 and have one thing I can't sort out. When I rotate my device, the view doesn't resize so I have a portrait screen sitting in a landscape view.

What I'm hoping to do is simply add the style { flex: 1 } to the root view... I think this will resolve my problem. In v3 I was previously able to do this:

<Scene key="root" sceneStyle={{ flex: 1 }}>

With sceneStyle no longer a prop, any easy way to do that in v4? Or is there something I'm missing?

[gscanlon21]

React-native won't update a scene unless the state is changed. If the state doesn't change when the screen size does, react-native won't acknowledge the new screen size

You could implement a wrapper view which listens for a layout (orientation) change and adjusts accordingly (or just sets the state)

<View style={styles.wrapper} onLayout={(event) => this.onLayout(event)}>
    ...
</View>

then

export default class Example extends Component {
  constructor (props) {
    super(props)
  }

  onLayout (event) {
    // if (this.state.height) return // Layout was already called
    let {width, height} = event.nativeEvent.layout // Gets the width and height of device screen
    this.setState({height: height, width: width})
  }
}

[jasongaare]

This didn't fix my issue. I'm not sure where it lies, but manually setting the size of my view DOESN'T change the size of my Root Navigator provided via the navigation libraries (because setting the size of the child doesn't change the size of the parent...)

I'll dig more, but still need help if anyone has any suggestions

[aksonov]

Could you reproduce it with Example project? I rotated it without any problem, all links were re-centered properly without any additional logic.

[jasongaare]

Thanks for your prompt response.

You can probably leave it closed for now, we've decided to stick with React Native 42 for now, because upgrading breaks all our navigation. Following the migration guide helps, but we've been using router-flux for over a year now so the new changes with moving to v4 are altering too many things for us to address currently.

I will circle back when (a) we make the decision to bite the bullet and upgrade, and (b) when router-flux v4 is more stable.

If I'm still having issues then I'll try to create an example project. Our codebase is pretty complex so it's probably an internal issue somewhere... (but the sceneStyle={{ flex: 1 }} on the root scene in v3 seems to be our solution for the time being.

[aksonov]

Ok, if you want this issue to be fixed, please reproduce it with Example project from this repo (i.e. fork and modify). Closing it for now.