9 thoughts on “[Orientation] Re-Layout on orientation change

  1. @sahrens Where in the UIExplorer example do you handle rotation? It seems like I can’t find it. As I’m trying to add rotation detection support to my npm module this could be really usefull.

    PS: maybe the inline documentation in the Dimensions.js utility should be changed, because the width and height don’t change on device rotation (Probably because they are set as constants here on application start?)

  2. When I try to change orientation for <View style={{flex: 1, backgroundColor: 'green'}} /> I got this
    simulator screen shot 1 2016 11 20 55

    It resizes to fullscreen when I open Inspector
    How to fix it?

  3. No, I’m not agree with you because I have resolved this issue without setState
    and re-render().

    [image: Inline image 1]
    [image: Inline image 2]

    Thanks & Regards
    Mohammed HUSAIN
    Senior Apps Developer, uCertify
    +91 9919475253

    On Tue, Nov 8, 2016 at 12:03 PM, lin onetwo notifications@github.com
    wrote:

    @uc-hus https://github.com/uc-hus AFAIK react-native-menu-button solve
    its orientation problem by some workaround, you may take a look.


    You are receiving this because you were mentioned.
    Reply to this email directly, view it on GitHub
    #25 (comment),
    or mute the thread
    https://github.com/notifications/unsubscribe-auth/ALoZ1LjzjJAFFyPIbAWRqPFIVrgBt7mfks5q8Be1gaJpZM4DaIiJ
    .

  4. flex:1 makes a component resize to take up all available space within its container, so if you set it on your root component it will resize to take up the whole screen on rotation. If you need to resize child views according to the new dimensions you can set onLayout for that view to capture that event and trigger a rerendering.
    If you use something like redux you can easily write those dimensions to your app state and use them as props for any components that need to be responsive (I personally prefer this over Dimensions.get).
    Here is an example that draws a red rectangle that fills the top-left quarter of the screen:

    import React, { Component } from 'react';
    import {
      AppRegistry,
      Dimensions,
      StyleSheet,
      View
    } from 'react-native';
    
    var app = React.createClass({
      getInitialState() {
        return {
          pageHeight: Dimensions.get('window').height,
          pageWidth: Dimensions.get('window').width
        }
      },
      getNewDimensions(event){
        this.setState({
          pageHeight: event.nativeEvent.layout.height,
          pageWidth: event.nativeEvent.layout.width
        })
      },
      render() {
        return (
          <View
            style={styles.page}
            onLayout={this.getNewDimensions}>
            <View style={[styles.rectangle, {
              height: this.state.pageHeight / 2,
              width: this.state.pageWidth / 2
            }]}/>
          </View>
        );
      }
    });
    
    const styles = StyleSheet.create({
      page:{
        backgroundColor: 'blue',
        flex:1
      },
      rectangle:{
        backgroundColor: 'red'
      }
    });
    
    AppRegistry.registerComponent('app', () => app);
    
    

    Of course, if you try to set onLayout on a view with fixed dimensions nothing interesting will happen. Dimensions.get(‘window’) seems to return fixed numbers and set them, so if you use that you will need to force the component to rerender on rotation.

  5. @ababba15 I added backgroundColor = 'red' in styles to test your code. It does not respond to rotations for me. StyleSheets are initialized once and cannot be changed dynamically.

    screenshot at 2017-05-22 18 25 55
    screenshot at 2017-05-22 18 26 03

5 thoughts on “[Orientation] Re-Layout on orientation change

  1. When I try to change orientation for <View style={{flex: 1, backgroundColor: 'green'}} /> I got this
    simulator screen shot 1 2016 11 20 55

    It resizes to fullscreen when I open Inspector
    How to fix it?

  2. flex:1 makes a component resize to take up all available space within its container, so if you set it on your root component it will resize to take up the whole screen on rotation. If you need to resize child views according to the new dimensions you can set onLayout for that view to capture that event and trigger a rerendering.
    If you use something like redux you can easily write those dimensions to your app state and use them as props for any components that need to be responsive (I personally prefer this over Dimensions.get).
    Here is an example that draws a red rectangle that fills the top-left quarter of the screen:

    import React, { Component } from 'react';
    import {
      AppRegistry,
      Dimensions,
      StyleSheet,
      View
    } from 'react-native';
    
    var app = React.createClass({
      getInitialState() {
        return {
          pageHeight: Dimensions.get('window').height,
          pageWidth: Dimensions.get('window').width
        }
      },
      getNewDimensions(event){
        this.setState({
          pageHeight: event.nativeEvent.layout.height,
          pageWidth: event.nativeEvent.layout.width
        })
      },
      render() {
        return (
          <View
            style={styles.page}
            onLayout={this.getNewDimensions}>
            <View style={[styles.rectangle, {
              height: this.state.pageHeight / 2,
              width: this.state.pageWidth / 2
            }]}/>
          </View>
        );
      }
    });
    
    const styles = StyleSheet.create({
      page:{
        backgroundColor: 'blue',
        flex:1
      },
      rectangle:{
        backgroundColor: 'red'
      }
    });
    
    AppRegistry.registerComponent('app', () => app);
    
    

    Of course, if you try to set onLayout on a view with fixed dimensions nothing interesting will happen. Dimensions.get(‘window’) seems to return fixed numbers and set them, so if you use that you will need to force the component to rerender on rotation.