React-Native ios App crashes on my phone

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;

score 1 · Accepted Answer · answered Nov 24 '17 at 17:27

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.

answered Nov 24 '17 at 17:27

ShaneG

1,498
7
16

so, how can my app run without laptop? i want to run my app independent – Ali NAghavi Nov 24 '17 at 18:31
@AliNAghavi Your phone needs to be connected to the same wifi that the laptop is on. To use this you need to configure the Dev settings on your phone to operate over wifi. Here is a helpful post to assist you: https://stackoverflow.com/questions/44382841/how-do-you-perform-wireless-debugging-in-xcode-9-with-ios-11-apple-tv-4k-etc and here is a apple docs link to the same details: https://help.apple.com/xcode/mac/9.0/index.html?localePath=en.lproj#/devbc48d1bad – ShaneG Nov 27 '17 at 11:27

React-Native ios App crashes on my phone

1 Answers1