react-native-orientation Orientation.addOrientationListener callback function does not execute on orientation change

I have a static image I want to resize on an orientation change. I am using react-native-orientation to set a listener for a change in orientation but the listener function never executes on an orientation change. I have added a touchable element to call a function to change the image to match the orientation of the phone and it works. I am running the code in a snack and am testing it with an iphone. Here is the code.

    import React from 'react';
    import Orientation from 'react-native-orientation';
    import { Dimensions, Image, Text, View, Button, TouchableOpacity, StyleSheet} from 'react-native';

    export default class DashboardHeader extends React.Component{
        constructor(props){
          super(props);
          this.state = {
                        showGraph:false,
                        width: Dimensions.get('window').width,
                        };
          this.resetImageWidth= this.resetImageWidth.bind(this); 
          this._orientationDidChange = this._orientationDidChange.bind(this);  
        }

        resetImageWidth(){
          this.setState({width:Dimensions.get('window').width});
        }

        _orientationDidChange(orientation){
          alert("here");
          this.setState({width:Dimensions.get('window').width});
        }

      componentDidMount() {
          Orientation.addOrientationListener(this._orientationDidChange);
        }

      componentWillUnmount() {
        Orientation.removeOrientationListener(this._orientationDidChange);
      }
        render() {
          return (
            <View >
              <TouchableOpacity style={graphHistoryStyles.historyToggleButton} onPress={this.resetImageWidth} >
                <Text style={graphHistoryStyles.historyToggleFont}>"Screen Width " {Dimensions.get('window').width} "State Width " {this.state.width} </Text>
              </TouchableOpacity>
              <View >
                <Image 
                  source={require('./headerBanner.jpg')} 
                  style={{width: this.state.width, height: this.state.width * 148/960}}
                />
              </View>
            </View>
          );
        }
    }

    const graphHistoryStyles = StyleSheet.create({


      historyToggleButton:{
        borderColor:'#ffcc00',
        borderWidth:2,
        backgroundColor:'#fcf8e3',
        borderRadius: 4,
        marginBottom:2,
        justifyContent: 'center',
        alignContent: 'center',
        height:100,
      },
      historyToggleFont:{
        color:"#8a6d3b",
        textAlign:'center',
        paddingBottom: 5,
        paddingTop: 5,
        fontWeight: 'bold',
      },

    });