React-Native ios App crashes on my phone - ios

Question

I recently started to develop React Native apps...
Now i'm building an iOS app...When i test the app with iOS simulator every thing is ok and when i attached my iPhone to my laptop and build and run the app directly on my iPhone i don't have any problem and my apps work...But when i detached my iPhone from laptop the app crash and i can't run it again...
I don't know what is problem...
here is my code :
import React, {Component} from "react";
import {Image, Text, View} from "react-native";
import Proximity from "react-native-proximity";
import {Card, CardSection} from "./common";
let rekatCounter = 0;
let sajdeCounter = 0;
class Main extends Component {
constructor(props) {
super(props);
this.state = {
proximity: false,
sajdeCounter: 0
};
this._proximityListener = this._proximityListener.bind(this);
}
componentDidMount() {
Proximity.addListener(this._proximityListener);
}
/**
* State of proximity sensor
* #param {object} data
*/
_proximityListener(data) {
if (data.proximity) {
sajdeCounter += 1;
this.setState({
proximity: data.proximity,
});
}
}
componentWillUpdate() {
if (sajdeCounter % 2 === 1 && sajdeCounter !== 1) {
sajdeCounter = 1;
rekatCounter += 1;
}
if (sajdeCounter === 1 && rekatCounter == 0) {
rekatCounter = 1;
}
if (rekatCounter === 5 && sajdeCounter % 2 === 1) {
sajdeCounter = 0;
rekatCounter = 0;
}
}
componentWillUnmount() {
Proximity.removeListener(this._proximityListener);
}
render() {
const resizeMode = 'cover';
return (
<Card>
<CardSection>
<View style={styles.sajdeCounterWrapper}>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={ require('../../assets/bg.jpg')}
/>
</View>
<Text style={styles.sajdeCounter}> {sajdeCounter}</Text>
</View>
<View style={styles.sajdeLabelWrapper}>
<Text style={styles.sajdeLabel}>Some string</Text>
</View>
</CardSection>
<CardSection>
<View style={styles.rekatCounterWrapper}>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
style={{
flex: 1,
resizeMode,
}}
source={ require('../../assets/bg.jpg')}
/>
</View>
<Text style={styles.rekatCounter}>{rekatCounter}</Text>
</View>
<View style={styles.rekatLabelWrapper}>
<Text style={styles.rekatLabel}>Some string</Text>
</View>
</CardSection>
</Card>
);
}
}
const styles = {
sajdeCounterWrapper: {
flex: 3,
justifyContent: 'center',
alignItems: 'center'
},
sajdeCounter: {
fontSize: 45
},
sajdeLabelWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
sajdeLabel: {
fontSize: 45
},
rekatCounterWrapper: {
flex: 3,
justifyContent: 'center',
alignItems: 'center'
},
rekatCounter: {
fontSize: 45
},
rekatLabelWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
rekatLabel: {
fontSize: 45
}
};
export default Main;

Answer 1

The reason your app crashed is because it needs to be connected to the laptop.
To run your app on your phone without connecting it to the pc via cable, you need to have your phone connected to the same wifi that the laptop is connected to.