React Native Realm Connect
Connect React Native components to Realm queries:
- Map a proptype to a Realm query quite like you would map Redux store state to props with Redux
connect
. - Every time the Realm query changes, your component will receive the updated props (and thus re-render).
Installation
npm install @elao/react-native-realm-connect
Usage
Get the connector method:
import connectToQuery from '@elao/react-native-realm-connect';
The connectToQuery
method is similar to the connect
method from redux (but not exactly the same) and should be used as follow:
connectToQuery({
[prop name]: [function that returns a Realm Results object],
[...other props]
})(MyWrappedComponent);
List
Example:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
import connectToQuery from '@elao/react-native-realm-connect';
import Dog from './model/Dog';
class DogList extends Component {
static propTypes = {
dogs: PropTypes.arrayOf(PropTypes.instanceOf(Dog)).isRequired,
};
render() {
const { dogs } = this.props;
return <FlatList data={dogs} /*...*/ />;
}
}
export default connectToQuery({
dogs: () => realm.objects('Dog').filtered('goodBoy == $0', true),
})(DogList);
Unique result
Get the unique
filter:
import connectToQuery, { unique } from '@elao/react-native-realm-connect';
Mark the query function as unique
so that it only returns the first result of the Realm Results object:
connectToQuery({
[prop name]: unique([function that returns a Realm Results object]),
[...other props]
})(MyWrappedComponent)
Example:
import connectToQuery, { unique } from '@elao/react-native-realm-connect';
class MyCat extends Component {
static propTypes = {
userId: PropTypes.string.isRequired,
cat: PropTypes.instanceOf(Cat).isRequired,
};
render() {
const { cat } = this.props;
return <Text>{cat.name}</Text>;
}
}
export default connectToQuery({
cat: unique(props => realm.objects('Cat').filtered('user.id == $0', props.userId)),
})(MyCat);
Get the extract
filter:
import connectToQuery, { extract } from '@elao/react-native-realm-connect';
You can use extract
for any other need, just provide a callback that will be applied on the results
object and its return value will be passed as props.
connectToQuery({
[prop name]: extract([function that returns a Realm Results object with (props)], [callback function with (results, props) parameters],
[...other props]
})(MyWrappedComponent)
Example:
import connectToQuery, { unique } from '@elao/react-native-realm-connect';
class MyCat extends Component {
static propTypes = {
userId: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};
render() {
const { age } = this.props;
return <Text>I'm {age} years old.</Text>;
}
}
export default connectToQuery({
age: extract(
props => realm.objects('User').filtered('id == $0', props.userId),
(results, props) => results ? results[0].age : null,
),
})(MyCat);
Usage with Redux
You can use a prop that comes from Redux state and use it in your Realm Query by chainning the two connectors:
import { connect } from 'react-redux';
import connectToQuery from '@elao/react-native-realm-connect';
class FishBowl extends Component {
static propTypes = {
fishes: PropTypes.arrayOf(PropTypes.instanceOf(Fish)).isRequired,
};
render() {
const { fishes } = this.props;
return <FlatList data={fishes} /*...*/ />;
}
}
const mapStateToProps = state => ({
color: state.filter.fishColor,
});
const RealmConnectedFishBowl = connectToQuery({
dogs: props => realm.objects('Fish').filtered('color == $0', props.color),
})(FishBowl)
export default connect(mapStateToProps)(RealmConnectedFishBowl);