Ad

React Native AlertIOS Error: Tried To Display Alert View But There Is No Application Window

- 1 answer

I am trying to use AlertIOS to display a message and I am getting an error below. The code for the alert box is nested below a View and a touchable highlight. Is there an issue calling the AlertIOS component if it is nested within other components?

var TabOption = React.createClass({

deleteConnection: function(){
    AlertIOS.alert('Connection Removed',
      'We are no longer helping you on this account',
      [{text: '😞'}]);
});

render:function(){
return(
<View style={{flex: 1,flexDirection: 'column',backgroundColor: 'white'}}>
  <TouchableHighlight onPress={this.deleteConnection} style={styles.tabOptionContainer}>
    <Text> Disconnect </Text>
  </TouchableHighlight>
</View>
}
});

var styles = StyleSheet.create({
  tabOptionContainer: {
    width:Dimensions.width,
    height:50,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'white',
  }
});

Error:

Tried to display alert view but there is no application window. args: {
    buttons = (
        {
            0 = "\Ud83d\Ude1e";
        }
    );
    message = "We are no longer helping you on this account";
    title = "Connection Removed";
    type = default;
}

Thanks!

Ad

Answer

OK, you have some syntax errors in your code.

Here is your code, exactly the same but corrected (ES6 syntax)

class TabOption extends Component {
  constructor(props) {
    super(props);
  }

  deleteConnection = () => {
    AlertIOS.alert('Connection Removed',
      'We are no longer helping you on this account',
      [{text: '😞'}]);
  };

  render() {
    return(
      <View style={{flex: 1,flexDirection: 'column',backgroundColor: 'white'}}>
        <TouchableHighlight onPress={this.deleteConnection} style={styles.tabOptionContainer}>
          <Text> Disconnect </Text>
        </TouchableHighlight>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  tabOptionContainer: {
    width:Dimensions.width,
    height:50,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'white',
  }
});

I've set up a working example for you here

Ad
source: stackoverflow.com
Ad