Meteor-like methods for React Native. ! For old docs, see v0.6.2 documentation (classic ddp interface).
The purpose of this library is :
- to set up and maintain a ddp connection with a ddp server, freeing the developer from having to do it on their own.
- be fully compatible with react-native and help react-native developers.
- to match with Meteor documentation used with React.
npm i --save react-native-meteor@latest
!! See detailed installation guide
import { View, Text, Component } from 'react-native';
import Meteor, { connectMeteor, MeteorListView } from 'react-native-meteor';
/*
* Uses decorators (see detailed installation to activate it)
* Or use :
class Todos extends Component {
...
}
connectMeteor(Todos);
export default Todos;
*/
@connectMeteor
export default class App extends Component {
componentWillMount() {
const url = 'http://192.168.X.X:3000/websocket';
Meteor.connect(url);
}
getMeteorData() {
const handle = Meteor.subscribe('todos');
Meteor.subscribe('settings');
return {
todosReady: handle.ready(),
settings: Meteor.collection('settings').findOne()
};
}
renderRow(todo) {
return (
<Text>{todo.title}</Text>
);
}
render() {
const { settings, todosReady } = this.data;
<View>
<Text>{settings.title}</Text>
{!todosReady && <Text>Not ready</Text>}
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderRow}
/>
</View>
}
}
Inside this method, you can create subscriptions (see below) when component is mounted. It will automatically unsubscribe if the component is unmounted.
- Meteor.subscribe : returns an handle
Inside getMeteorData, you can also access any Meteor reactive data source, which means :
- Meteor.subscribe handle
- Meteor.collection(collectionName)
- Meteor.user()
- Meteor.userId()
- Meteor.status()
- Meteor.loggingIn()
These methods (except update) work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.
- Meteor.collection(collectionName)
Same as ListView Component but does not need dataSource and accepts three arguments :
collection
string requiredselector
[string / object]options
object
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderItem}
/>
Same as ListView Component but does not need dataSource and accepts one argument. You may need it if you make complex requests combining multiples collections.
elements
function required : a reactive function which returns an array of elements.
<MeteorComplexListView
elements={()=>{return Meteor.collection('todos').find()}}
renderRow={this.renderItem}
/>
Connect to a DDP server. You only have to do this once in your app.
url
string requiredoptions
object Available options are :- autoConnect boolean [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
- autoReconnect boolean [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
- reconnectInterval number [10000] the interval in ms between reconnection attempts.
Disconnect from the DDP server.
- Meteor.call
- Meteor.loginWithPassword (Please note that user is auto-resigned in - like in Meteor Web applications - thanks to React Native AsyncStorage.)
- Meteor.logout
- Meteor.logoutOtherClients
Once connected to the ddp server, you can access every method available in ddp.js.
- Meteor.ddp.on('connected')
- Meteor.ddp.on('added')
- Meteor.ddp.on('changed')
- ...
- Meteor.FSCollection(collectionName) : Helper for Meteor-CollectionFS. Full documentation here
- This plugin also exposes a FSCollectionImagesPreloader component which helps you preload every image you want in CollectionFS (only available on ios)
import { FSCollectionImagesPreloader } from 'react-native-meteor';
<FSCollectionImagesPreloader
collection="imagesFiles"
selector={{metadata.owner: XXX}}
/>
- Github repository
- npm i --save react-native-meteor-router-flux@latest
- Custom scene renderer which allows to select tab scene to show depending from app state. It could be useful for authentication, restricted scenes, etc.
Pull Requests and issues reported are welcome ! :)