App chashed when creating a button alert

LOCKED: General
1

Put the Below in Expo Playground and try to see it from a Device.
This is not working,

kyriakosmichail@gmail.com
Thank you

import React, { Component } from ‘react’;
import { Text, View, StyleSheet, Button, Alert } from ‘react-native’;
import { Constants, Accelerometer } from ‘expo’;

export default class App extends Component {
state = {
accelerometerData: { x: 0, y: 0, z: 0 }
};

componentWillUnmount() {
this._unsubscribeFromAccelerometer();
}

componentDidMount() {
this._subscribeToAccelerometer();
}

_handleButtonPress = () => {
Alert.alert(

  <Text>
    Accelerometer:
    x = {this.state.accelerometerData.x.toFixed(2)}{', '}
    y = {this.state.accelerometerData.y.toFixed(2)}{', '}
    z = {this.state.accelerometerData.z.toFixed(2)}
  </Text>
);

};

_subscribeToAccelerometer = () => {
this._acceleroMeterSubscription = Accelerometer.addListener(accelerometerData =>
this.setState({ accelerometerData })
);
};

_unsubscribeFromAccelerometer = () => {
this._acceleroMeterSubscription && this._acceleroMeterSubscription.remove();
this._acceleroMeterSubscription = null;
};

render() {
return (


See Accelerometer Values

    <Button
      title="Show me!"
      onPress={this._handleButtonPress}
    />
  
  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingTop: Constants.statusBarHeight,
backgroundColor: ‘#ecf0f1’,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: ‘bold’,
textAlign: ‘center’,
color: ‘#34495e’,
},
});

2

Haven’t tried your code. But just skimming into it, I found what seems to be the error.

Alert.alert(
  <Text>
    Accelerometer:
    x = {this.state.accelerometerData.x.toFixed(2)}{', '}
    y = {this.state.accelerometerData.y.toFixed(2)}{', '}
    z = {this.state.accelerometerData.z.toFixed(2)}
  </Text>
);

The Alert module only has the alert method which receives these parameters:

static alert(title, message?, buttons?, options?, type?)

What you are trying to do, passing a JSX tag to the title, doesn’t seem valid. Perhaps you should be using the Modal module instead to show your message?

1 Like
3

Here is an example of Alert working correclty