react-native-realm

A higher-order component for listening to Realm data in React Native components.

Usage

// realm.js
import Realm from 'realm';
 
class Person extends Realm.Object {}
Person.schema = {
  name: 'Person',
  properties: {
    firstName: {
      type: 'string',
    },
    lastName: {
      type: 'string',
    },
  },
};
 
return new Realm({
  schema: [Person],
});
 

// App.js
 
import realm from './realm';
import { RealmProvider } from 'react-native-realm';
 
...
// render function of your top level component for your app
render() {
  <RealmProvider realm={realm}>
    <MyComponent />
  </RealmProvider>
}
...

// MyComponent.js
 
import { connectRealm } from 'react-native-realm';
 
class MyComponent extends Component {
 
  addPerson = () => {
    const { realm } = this.props;
    realm.write(() => {
      realm.create('Person', {
        firstName: 'Tim',
      });
    });
  };
 
  render() {
    <PeopleList people={this.props.people} />
  }
}
 
export default connectRealm(MyComponent, {
  schemas: ['Person'],
  mapToProps(results, realm, ownProps) {
    // the object that is returned from the mapToProps function
    // will be merged into the components props
    return {
      realm,
      // property on the results argument is the camel-cased and
      // pluralized version of the schema name, so...
      // instead of person being the property we get people
      people: results.people,
    };
  },
});

Examples

Check out the example react native app to see react-native-realm in use.