wecare-react-native-meteor
v1.0.10
Published
Full Meteor Client for React Native in 1.0.3
Downloads
2
Maintainers
Readme
react-native-meteor
Meteor-like methods for React Native.
If you have questions, you can open a new issue in the repository or ask in the our Gitter chat:
https://gitter.im/react-native-meteor/Lobby
- react-native-meteor
- Connect your components
- Reactive variables
- Additionals collection methods
- ListView Components
- API
- How To ?
- Author
- Want to help ?
Compatibility notes
- Since RN 0.26.0 you have to use ws or wss protocol to connect to your meteor server. http is not working on Android.
What is it for ?
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.
Install
npm i --save react-native-meteor
!! See detailed installation guide
Install from Git
Sometimes we do not have time to update the version of the NPM package. In this case, you can use the latest version from the repository.
npm i --save https://github.com/inProgress-team/react-native-meteor
Example usage
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';
Meteor.connect('ws://192.168.X.X:3000/websocket');//do this only once
class App extends Component {
renderRow(todo) {
return (
<Text>{todo.title}</Text>
);
}
render() {
const { settings, todosReady } = this.props;
return(
<View>
<Text>{settings.title}</Text>
{!todosReady && <Text>Not ready</Text>}
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderRow}
/>
</View>
)
}
}
export default createContainer(params=>{
const handle = Meteor.subscribe('todos');
Meteor.subscribe('settings');
return {
todosReady: handle.ready(),
settings: Meteor.collection('settings').findOne()
};
}, App)
Connect your components
Since Meteor 1.3, createContainer is the recommended way to populate your React Components.
createContainer
Very similar to getMeteorData but your separate container components from presentational components.
Example
import Meteor, { createContainer } from 'react-native-meteor';
class Orders extends Component {
render() {
const { pendingOrders } = this.props;
//...
);
}
}
export default createContainer(params=>{
return {
pendingOrders: Meteor.collection('orders').find({status: "pending"}),
};
}, Orders)
connectMeteor && getMeteorData
connectMeteor is a React Mixin which enables getMeteorData (the old way of populating meteor data into your components).
Example
import Meteor, { connectMeteor } from 'react-native-meteor';
/*
* Uses decorators (see detailed installation to activate it)
* Or use :
class Todos extends Component {
...
}
connectMeteor(Todos);
export default Todos;
*/
@connectMeteor
class Orders extends Component {
getMeteorData() {
return {
pendingOrders: Meteor.collection('orders').find({status: "pending"}),
};
}
render() {
const { pendingOrders } = this.data;
//...
);
}
}
Reactive variables
These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.
- Meteor.subscribe()
- Meteor.collection(collectionName, options)
- Meteor.user()
- Meteor.userId()
- Meteor.status()
- Meteor.loggingIn()
- ReactiveDict()
Additionals collection methods
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, options)
ListView Components
MeteorListView Component
Same as ListView Component but does not need dataSource and accepts three arguments :
collection
string requiredselector
[string / object]options
objectlistViewRef
[string / function] ref to ListView component.
Example usage
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderItem}
//...other listview props
/>
MeteorComplexListView Component
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.listViewRef
[string / function] ref to ListView component.
Example usage
<MeteorComplexListView
elements={()=>{return Meteor.collection('todos').find()}}
renderRow={this.renderItem}
//...other listview props
/>
API
Meteor Collections
Meteor.subscribe
Meteor.subscribe() returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.
Meteor.collection(collectionName, options)
You need pass the cursoredFind
option when you get your collection if you want to use cursor-like method:
Meteor.collection("collectionName", { cursoredFind: true })
Or you can simply use find()
to get an array of documents. The option default to false for backward compatibility. Cursor methods are available to share code more easily between a react-native app and a standard Meteor app.
Meteor DDP connection
Meteor.connect(endpoint, options)
Connect to a DDP server. You only have to do this once in your app.
Arguments
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.
Meteor.disconnect()
Disconnect from the DDP server.
Meteor methods
- 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
Availables packages
Convenience packages
Example `import { composeWithTracker } from 'react-native-meteor';``
- EJSON
- Tracker
- composeWithTracker: If you want to use react-komposer, you can use react-native-meteor compatible composeWithTracker
- Accounts (see below)
ReactiveDict
See documentation.
Meteor.Accounts
`import { Accounts } from 'react-native-meteor';``
- Accounts.createUser
- Accounts.changePassword
- Accounts.forgotPassword
- Accounts.resetPassword
- Accounts.onLogin
- Accounts.onLoginFailure
FSCollection
- 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}}
/>
Meteor.ddp
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')
- ...
How To ?
react-native-router-flux
- You can use Switch with createContainer. Example :
componentWillMount() {
this.scenes = Actions.create(
<Scene key="root" component={createContainer(this.composer, Switch)} selector={this.selector} tabs={true}>
<Scene key="loading" hideNavBar={true} component={Loading} />
<Scene key="login" hideNavBar={true}>
<Scene key="loginbis" component={Login} />
</Scene>
<Scene key="loggedIn" component={Layout}>
<Scene key="main" hideNavBar={true}>
//...
</Scene>
</Scene>
</Scene>
);
}
composer() {
return {
connected: Meteor.status().connected,
user: Meteor.user()
}
}
selector(data, props) {
if(!data.connected) {
return "loading";
} else if (!data.user) {
return "login";
} else {
return "loggedIn";
}
}
Author
- Théo Mathieu (@Mokto)
- From inProgress
Want to help ?
Pull Requests and issues reported are welcome! :)