Rebuild meteor project to support mobile

help
1

Hello all,

We have already build web application using meteor and that has not designed to support mobile app, but now we want to build for mobile(iOS and Android) too and design and functionality is quite different than web. I don’t need to affect web implementation and performance for mobile app also matters.

For example mobile app have tab based navigation feature and web has sidebar for navigation, so many more scenario i have that different than web.

Did it possible if i create another meteor project for mobile and connect to old meteor server if yes than is it best approach?

I need suggestion for best approach to achieve this one.

Thanks in advance.

2

If performance matters and you’re not adverse to a second codebase then React Native is probably the way to go. Have a look at my for of react-native-meteor if you choose this path. @socialize/react-native-meteor

3 Likes
3

Hi @huppmeteor,
What did you use for our web app : boostrap, material or other UI ? did you already use react ?
User experience must be fluid on mobile, so you can’t expect to have the same layout for mobile and sometimes the same view (just take a calendar view for example).
As @copleykj said, react-native-meteor is really easy to learn and deploy (especially if you already know react) with react-native and Expo.

2 Likes
4

I wonder if it is really a good choice using Expo. You have to code (or upload your existing code) on their servers, don’t you? Can you please tell us what you like and dislike about Expo?

5

@lc3t35 We used bootstrap and we didn’t using react in meteor. Ok so i have to create another project for mobile ?

6

@lc3t35 Yes i am familiar with react and react-native, but what features i will lost if i go ahead with react-native-meteor in react-native ? publication and subscribe (react side) will work?

7

of course pub/sub and all meteor advantages are kept with react-native-meteor within react-native.

8

yes and I would redesign all the navigation with react navigation.

9

@lc3t35 Thank you so much for your help.

10

@lc3t35 I have one more question that in react-native-meteor we have to handle user session manually ? because when i logged in with Meteor.loginWithPassword then i can get user data in Meter.user() but after closing app and relaunch it’s value became null.

11

@huppmeteor no, all is handled as usual by react-native-meteor. How do you manage your Meteor.connect ?

12

@gkaradag Expo allowed me to develop and test with dozens of users at light speed. I don’t know anything faster than that (if someone knows a better solution, ping me :wink: ).
A major point of attention is to update on time Expo sdk depending on your need for enhancements and resulting possible instability. Usually I keep one version ahead: for example, I’m still using sdk26 instead of sdk27 until sdk27 be stable enough to update.

1 Like
13

@lc3t35 I have done like something.

import React, { Component } from 'react';
import Meteor from 'react-native-meteor';
import { Text, View, Alert } from 'react-native';

export default class App extends Component {
   componentWillMount() {
        const url = 'ws://192.168.1.101:3000/websocket';
        Meteor.connect(url);
        const data = Meteor.user();
        Alert.alert(JSON.stringify(data));
    }
    
   render(){
     return(
        <View>
          <Text>react-native-meteor app</Text>
        <View>
     )
   }
}

I have not write full code here but after login i tried close app and relaunch app then Meteor.user() shows null(Tried in componentWillMount)

14

You’re missing the container thing !

import Meteor, { createContainer } from 'react-native-meteor';
...
class AppContainer extends React.Component {
    componentWillMount() {
        const url = 'ws://192.168.1.101:3000/websocket';
        Meteor.connect(url);
    }
    render() {
        const { status, user } = this.props;
        .... // here you can play with user and status 
    }
}

export default createContainer(
  () => ({
    status: Meteor.status(),
    user: Meteor.user(),
  }),
  AppContainer,
);
15

@lc3t35 Thank you works now, So i have to wrap all pages inside createContainer or just root component ?

16

design your pages as React components, send them props with needed data, you can also use context, or high order component, otherwise if your app is more complex, use redux.

17

Thank you for great help :grinning: I am really enjoying meteor with react-native.

18

Thank you for sharing your experience