Invariant Violation Module AppRegistry is not a registered callable, after adding Watermelon DatabaseProvider

[jon-dearaujo]

I am working on the implementation of a local database for my app and WatermelonDB seems to be a good option, and I was waiting the release of 0.8.0, with the DatabaseProvider/withDatabase to try it.

Yesterday, after the release I started the integration and I am getting this error right when the application launches using react-native run-android.

I'll drop some code here to try to contextualize. I want to know if I am doing something wrong in the setup for Watermelon.

package.json

"dependencies": {
    "@nozbe/watermelondb": "^0.8.0",
    "@nozbe/with-observables": "^1.0.2",
    ...
    "babel-plugin-transform-inline-environment-variables": "0.4.3",
    ...
    "metro": "0.49.1",
    ...
    "native-base": "2.8.1",
    ...
    "prop-types": "15.6.2",
    "react": "16.6.3",
    "react-native": "0.57.5",
    ...
    "react-native-fabric": "0.5.1",
  },
  "devDependencies": {
    "@babel/core": "7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/preset-env": "7.1.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "babel-plugin-idx": "2.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react-native": "5.0.2",
    "babel-runtime": "6.26.0",
    ...
    "metro-react-native-babel-preset": "^0.49.2",
    "patch-package": "5.1.1",
    "react-devtools": "3.4.2",
    "react-dom": "16.6.3",
    "react-native-dotenv": "0.2.0",
    "react-test-renderer": "16.6.3",
    "reactotron-react-native": "2.1.0"
  }

index.js

...
import React from 'react';
...
import { AppRegistry, YellowBox } from 'react-native';
import firebase from 'react-native-firebase';
import { Provider } from 'react-redux';
import App from './App';
import store from './src/redux/store';

import { Database } from "@nozbe/watermelondb";
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import { schema } from 'src/data/schema';
import DatabaseProvider  from '@nozbe/watermelondb/DatabaseProvider';
import { Notification } from 'src/data';

// Setup local db
const sqlAdapter = new SQLiteAdapter({
  schema: schema
});

const db = new Database({
  sqlAdapter,
  modelClasses: [
    Notification
  ]
});

... some setup here

const Main = () => (
  <DatabaseProvider database={db}>
    <Provider store={store}>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </Provider>
  </DatabaseProvider>
);

console.ignoredYellowBox = ['Remote debugger'];
AppRegistry.registerComponent('App', () => Main);

schema.js

import { appSchema, tableSchema } from '@nozbe/watermelondb';

export const schema = appSchema({
  version: 1.0,
  tables: [
    tableSchema({
      name: 'notifications',
      columns: [
        { name: 'type', type: 'string' },
        { name: 'title', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'deadline_at', type: 'number' }, //Stored as timestamp milliseconds
        { name: 'created_at', type: 'number' }, //Stored as timestamp milliseconds
        { name: 'dtc', type: 'string', isOptional: true }
      ]
    })
  ]
})

Notification.js

import  {Model }  from '@nozbe/watermelondb/Model';
import { date, field, relation } from '@nozbe/watermelondb/decorators';

export default class Notification extends Model {
  static table = 'notifications';

  @field('type')
  type;

  @field('description')
  description;

  @field('title')
  title;

  @date('created_at')
  createdAt;

  @date('deadline_at')
  deadline;

  @field('dtc')
  dtc;
}

AlertScreenContainer.js

import React, { Component } from 'react';

import AlertScreen from './AlertScreen';
import withObservables from '@nozbe/with-observables';
import  { withDatabase }  from '@nozbe/watermelondb/DatabaseProvider';

const POLL_INTERVAL = 2 * 1000; // 2 segundos

class AlertScreenContainer extends Component {
  _mountScreenSubscription = null;
  _unmountScreenSubscription = null;

  state = {
    polling: true
  };

  componentDidMount() {
    this._mountScreenSubscription = this.props.navigation.addListener(
      'didFocus',
      () => {
        this.setState({ polling: true });
      }
    );
    this._unmountScreenSubscription = this.props.navigation.addListener(
      'willBlur',
      () => {
        this.setState({ polling: false });
      }
    );
  }

  componentWillUnmount() {
    this._mountScreenSubscription.remove();
    this._unmountScreenSubscription.remove();
  }

  render() {
    return (
      <AlertScreen navigation={this.props.navigation} notifications={this.props.notifications}/>
    );
  }
}

const observeNotifications = withObservables(
  ['notifications'],
  (props) => ({
    notifications: props.database.collections.get('notifications').query().observe(),
    ...props
  })
);

export default withDatabase(observeNotifications(AlertScreenContainer));

Does anyone have an idea about what could be causing this issue? I know that there are couple of libraries and components being used along with WatermelonDB but they were all working before it.

Thanks

[jon-dearaujo]

Hey guys! I've managed to fix it by fresh installing all my dependencies, including WatermelonDB and WithObservables, uninstalling and running again my app on the device.

Closing it here since it does not seem to be a bug or a problem with WatermelonDB.

[enahum]

Hey @jon-dearaujo can you explain how are you using watermelonDB along side redux?

I have a react-native app that manages the data with redux and I'm looking for paths to update the data store layer but without affecting much how the rest of the components work with react-redux, etc.. any pointers?

[jon-dearaujo]

Sorry @enahum, we are not using redux and WatermelonDB together. I know it might sound a bit weird having both on the project and not taking advantage, but it seems that we don't need it right now. Redux came first as a dependency for redux-form and WatermelonDB came later as an attempt (successful, so far) to add offline features to our app. We probably could have tried some sort of persisted Redux, but we opted for a full database instead.