Waiting till Meteor is connected using react-native-meteor - meteor

Question

I'm using react-native-meteor to connect to Meteor server. When I run following code, I get the output as the screenshot. Connection doesn't established before the render method is called for the first time. How can I handle this? Can I block till the connection happens? ( onConnection method is not available in the react-native-meteor)
export default class App extends Component {
componentWillMount() {
console.log("GOing to connect");
Meteor.connect(SERVER_URL);
console.log("After connect : " + JSON.stringify(Meteor.status()));
}
render() {
console.log(Meteor.status());
console.log(JSON.stringify(Meteor.user()));
if (Meteor.status().status === "connected") {
if (Meteor.user()) {
return ( <
TestViewOne / >
);
} else {
return ( <
TestViewTwo / >
);
}
} else {
return ( < View > < /View>)
}
}
}
When I use the following code, the Meteor.user() still returns null.
Meteor.ddp.on('connected', function() {
console.log("on Connected : " + JSON.stringify(Meteor.user()));
localForceUpdate();
});

Answer 1

You need to set up the app to render a loading screen until the server is connected using withTracker, this way the main app will not progress to parts that assume the connection has been made:
class App extends Component {
constructor(props) {
super(props);
}
render() {
if (!this.appLaunched) {
if (!this.props.serverConnected || this.props.loggingIn) {
return <LoadingScreen />;
}
}
this.appLaunched = true; //this prevents the app reloading to front page everytime server reconnects
return (
<Root>
<AppContainer />
</Root>
);
}
}
export default withTracker(params => {
return {
loggingIn: Meteor.loggingIn(),
serverConnected: Meteor.status().connected
};
})(App);