react-native-meteor
Advanced tools
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
The purpose of this library is :
npm i --save react-native-meteor
!! See detailed installation guide
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
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)
Since Meteor 1.3, createContainer is the recommended way to populate your React Components.
Very similar to getMeteorData but your separate container components from presentational components.
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 is a React Mixin which enables getMeteorData (the old way of populating meteor data into your components).
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;
//...
);
}
}
These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.
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.
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.<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderItem}
//...other listview props
/>
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.<MeteorComplexListView
elements={()=>{return Meteor.collection('todos').find()}}
renderRow={this.renderItem}
//...other listview props
/>
Meteor.subscribe() returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.
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.
Connect to a DDP server. You only have to do this once in your app.
Arguments
url string requiredoptions object Available options are :
Disconnect from the DDP server.
Example `import { composeWithTracker } from 'react-native-meteor';``
See documentation.
`import { Accounts } from 'react-native-meteor';``
import { FSCollectionImagesPreloader } from 'react-native-meteor';
<FSCollectionImagesPreloader
collection="imagesFiles"
selector={{metadata.owner: XXX}}
/>
Once connected to the ddp server, you can access every method available in ddp.js.
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";
}
}
Pull Requests and issues reported are welcome! :)
FAQs
Full Meteor Client for React Native
The npm package react-native-meteor receives a total of 14 weekly downloads. As such, react-native-meteor popularity was classified as not popular.
We found that react-native-meteor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Michigan TypeScript founder Dmitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.