React-native-paper: PaperProvider not working with RNN Wix V2

[trialsNow]

Current behaviour

PaperProvider theming around Wix RNN is not working. Exact same code works well for react-native-elements

Crashed:
2019-02-20 18:29:20.948 [error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating '_ref.theme')

This error is located at:
in RCTView (at View.js:45)
in Settings (at src/index.js:39)
in ThemeProvider (at Provider.js:17)
in RCTView (at View.js:45)
in Portal.Host (at Provider.js:16)
in Provider (at src/index.js:38)
in Unknown (at ComponentWrapper.js:28)
in WrappedComponent (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)

Expected behaviour

Code sample

const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
}
};

Navigation.registerComponent(
key,
() => props => (


),
() => ScreenComponent
)

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android |
| react-native |
| react-native-paper |
| node |
| npm or yarn |
| expo sdk |

[satya164]

Please provide runnable code. The code you provided doesn't have anything related to theming except the theme object you defined and didn't use. Wrap your code like this for syntax highlighting:

```js
your code here
```

[RichardLindhout]

import React, { Component } from 'react'
import Routes from './Routes'
import { Platform } from 'react-native'
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper'
import { Provider } from 'react-redux'
import configureStore from './configureStore'
const store = configureStore()

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#FFFFFF',
    accent: '#2D8E90',
    primary: '#2D8E90',
  },

  roundness: 7,
  fonts:
    Platform.OS === 'web'
      ? {
          regular: 'Montserrat',
          medium: 'Montserrat',
          light: 'Montserrat',
          thin: 'Montserrat',
        }
      : {
          regular: 'Montserrat-SemiBold',
          medium: 'Montserrat-Medium',
          light: 'Montserrat-Regular',
          thin: 'Montserrat-Light',
        },
}

export const HOC = WrappedComponent => {
  class Wrapper extends Component {
    render() {
      return (
        <Provider store={store}>
          <PaperProvider theme={theme}>
            <WrappedComponent {...this.props} />
          </PaperProvider>
        </Provider>
      )
    }
  }
  if (WrappedComponent) {
    Wrapper.options = WrappedComponent.options
  }

  return Wrapper
}

import { Navigation } from 'react-native-navigation'
import { HOC } from './App'
import { allRoutes } from './Routes.config'

export function registerScreens() {
  allRoutes.map(route => {
    Navigation.registerComponent(route.path, () => HOC(route.component))
  })

}

[RichardLindhout]

I have no problems. (I use react-native-navigation also)

[trialsNow]

@RichardLindhout Which RNN version are you using?I do v2, my code works perfectly for react - native -elements. I do the same for react-native-paper and it fails with error.
My repo is really huge I can export it.

I tried your exact code and had the same crash/error

2019-02-20 18:29:20.948 [error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating '_ref.theme')

This error is located at:
in RCTView (at View.js:45)
in Settings (at src/index.js:39)
in ThemeProvider (at Provider.js:17)
in RCTView (at View.js:45)
in Portal.Host (at Provider.js:16)
in Provider (at src/index.js:38)
in Unknown (at ComponentWrapper.js:28)
in WrappedComponent (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)

[satya164]

my code works perfectly for react - native -elements

Please post your code.

[trialsNow]

@satya164
Here is the subset of what I have ..hope this is enough.. I modified my code to follow @RichardLindhout

App.js

import { YellowBox, UIManager, Platform, NetInfo } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { Screens } from './screens/main/home';
import HOC from './screens/Text';

et theme;
// Register screens
const registerScreens = async () => {
  Screens.forEach((ScreenComponent, key) =>
    Navigation.registerComponent(key, () => HOC(ScreenComponent))
  );
};
Navigation.events().registerAppLaunchedListener(async () => {
  UserStore.fetchLastLoggedInUser()
    .then(() => getUsertheme())
    .then(() => registerScreens())
    .then(() => setNavigationOptions())
    .then(() => showSlider());
});

Home.js


import { Navigation } from 'react-native-navigation';
import { StatusBar } from 'react-native';
import * as constants from '../../assets';


export const TRANSACTIONS_SCREEN = 'entrust.TransactionScreen';

export const Screens: Map<string, any> = new Map();
Screens.set(TRANSACTIONS_SCREEN, Settings);

export const home = () => {
  StatusBar.setBarStyle('dark-content', true);
  const newTabs = [
    {
      stack: {
        id: 'TRANSACTIONS_SCREEN',
        children: [
          {
            component: {
              name: TRANSACTIONS_SCREEN,
              passProps: {
                text: 'This is tab 1',
                myFunction: () => 'Hello from a function!'
              },
              options: {
                topBar: {
                  title: {
                    text: i18n.t('HOME_Tx_tab_title')
                  }
                },
                bottomTab: {
                  icon: iconsMap['key-variant'],
                  testID: TRANSACTIONS_SCREEN
                }
              }
            }
          }
        ]
      }
    }
]
return Navigation.setRoot({
    root: {
      bottomTabs: {
        id: 'ROOT',
        children: newTabs
      }
    }
  });

Text.js

/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react';
import { Platform } from 'react-native';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#FFFFFF',
    accent: '#2D8E90',
    primary: '#2D8E90'
  },

  roundness: 7,
  fonts:
    Platform.OS === 'web'
      ? {
          regular: 'Montserrat',
          medium: 'Montserrat',
          light: 'Montserrat',
          thin: 'Montserrat'
        }
      : {
          regular: 'Montserrat-SemiBold',
          medium: 'Montserrat-Medium',
          light: 'Montserrat-Regular',
          thin: 'Montserrat-Light'
        }
};

const HOC = WrappedComponent => {
  class Wrapper extends Component {
    render() {
      return (
        <PaperProvider theme={theme}>
          <WrappedComponent {...this.props} />
        </PaperProvider>
      );
    }
  }
  if (WrappedComponent) {
    Wrapper.options = WrappedComponent.options;
  }

  return Wrapper;
};

export default HOC;

[trialsNow]

@satya164 Any updates?

[satya164]

I haven't gotten time to investigate. Will check when I get some time. But since you have posted your code, maybe someone else can take a look if they have time.

[trialsNow]

@RichardLindhout
Can you help me out? I like react-native-paper over react-native-elements but this issue might push me out? Kind of waiting on some solution on this.

[Kirill-Cherkalov]

Hi guys, I think that I have a similar problem. I also use react-native-navigation v2 and have a problem with react-native-paper. But I have a problem when trying to add any react-native-paper component into the code(in this case with checkbox)

import React from 'react';
import {
  View,
  AsyncStorage,
} from 'react-native';

import { goHome } from 'src/router';
import { USER_KEY } from 'src/helpers/config';
import { Provider as PaperProvider, Checkbox } from 'react-native-paper';

import { styles } from './styled';

export default class SignIn extends React.Component {
  state = {
    username: '',
    // password: '',
  }

  onChangeText = (key, value) => {
    this.setState({ [key]: value });
  }

  signIn = async () => {
    const { username } = this.state;
    try {
      // login with provider
      const user = await AsyncStorage.setItem(USER_KEY, username);
      console.log('user successfully signed in!', user);
      goHome();
    } catch (err) {
      console.log('error:', err);
    }
  }

  render() {
    return (
      <PaperProvider>
        <View style={styles.container}>
          <Checkbox
            status={'checked' ? 'checked' : 'unchecked'}
            onPress={() => { this.setState({ checked: !checked }); }}
          />
        </View>
      </PaperProvider>
    );
  }
}

package.json
```js{
"name": "healthyHelper",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"launch": "react-native run-android",
"lint": "eslint /.js",
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"ignore": [],
"linters": {
"/.{js,jsx}": "eslint"
},
"relative": true
},
"dependencies": {
"axios": "^0.18.0",
"final-form": "^4.11.1",
"immutability-helper": "^3.0.0",
"prop-types": "^15.7.1",
"react": "16.6.3",
"react-final-form": "^4.0.2",
"react-native": "0.57.8",
"react-native-navigation": "^2.11.0",
"react-native-paper": "2.12.0",
"react-native-vector-icons": "^6.2.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.4",
"redux-saga": "^1.0.1",
"reselect": "^4.0.0",
"styled-components": "^4.1.3"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "7.0.0",
"@babel/plugin-syntax-export-namespace-from": "7.0.0",
"@babel/preset-env": "^7.2.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "^23.6.0",
"babel-plugin-transform-decorators": "6.24.1",
"babel-plugin-transform-decorators-legacy": "1.3.5",
"babel-plugin-transform-export-extensions": "6.22.0",
"babel-preset-env": "2.0.0-alpha.20",
"babel-preset-jest": "23.2.0",
"babel-preset-react-native": "5.0.2",
"babel-preset-react-native-stage-0": "1.0.1",
"enzyme": "3.7.0",
"eslint": "5.9.0",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-flowtype": "3.2.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"eslint-plugin-react-native": "3.5.0",
"eslint-plugin-redux-saga": "^1.0.0",
"flow-bin": "0.86.0",
"flow-typed": "2.5.1",
"husky": "^1.3.1",
"jest": "23.6.0",
"jest-enzyme": "7.0.1",
"jest-repl": "23.6.0",
"lint-staged": "^8.1.3",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3",
"schedule": "0.4.0"
},
"jest": {
"preset": "react-native"
}
}

babel.config
```js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

[Trancever]

I'll try to prepare today or tomorrow working example, so you guys will be able to follow it, stay tuned :)

[RichardLindhout]

What happens if you get rid of al your async functions and just register the screens @trialsNow

[RichardLindhout]

@Kirill-Cherkalov I think your issue is something in your react native setup. https://github.com/facebook/react-native/issues/20588

[RichardLindhout]

@Kirill-Cherkalov Maybe upgrade deps. Looks like a lot of babel things which are maybe not needed.

This is my package.json (native and web project in one)

{
  "name": "EyeOnTarget",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8090",
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "^6.1.3",
    "axios": "^0.18.0",
    "base-64": "^0.1.0",
    "color": "^3.1.0",
    "dayjs": "^1.8.6",
    "file-dialog": "^0.0.7",
    "mapbox-gl": "^0.52.0",
    "modal-enhanced-react-native-web": "^0.2.0",
    "react": "16.6.3",
    "react-art": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-id-swiper": "^1.6.8",
    "react-mapbox-gl": "^4.1.0",
    "react-media": "^1.9.2",
    "react-native": "0.58.4",
    "react-native-card-flip": "^1.0.4",
    "react-native-color-picker": "^0.4.0",
    "react-native-file-viewer": "^1.0.14",
    "react-native-fs": "^2.13.3",
    "react-native-gesture-handler": "^1.0.16",
    "react-native-image-crop-picker": "^0.22.0",
    "react-native-image-picker": "^0.28.0",
    "react-native-image-zoom-viewer": "^2.2.25",
    "react-native-iphone-x-helper": "^1.2.0",
    "react-native-linear-gradient": "^2.5.3",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal": "https://github.com/RichardLindhout/react-native-modal.git#portal",
    "react-native-navigation": "2.11.0",
    "react-native-paper": "^2.11.1",
    "react-native-shimmer-placeholder": "^1.0.30",
    "react-native-slider": "^0.11.0",
    "react-native-vector-icons": "^6.2.0",
    "react-native-web": "^0.10.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts-for-react-native-web": "https://github.com/RichardLindhout/create-react-app-for-react-native-web",
    "redux": "^4.0.1",
    "redux-saga": "1.0.0-rc.0",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-hot-loader": "^4.6.3",
    "react-test-renderer": "16.7.0",
    "why-did-you-update": "^1.0.6"
  },
  "scripts": {
    "deploy-beta": "yarn build && aws s3 sync build/ s3://*********************",
    "ios-beta": "fastlane ios beta",
    "android-beta": "fastlane android beta",
    "ios-release": "fastlane ios lane",
    "android-release": "fastlane android lane",
    "web": "react-scripts start",
    "build": "react-scripts build",
    "web-test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug",
    "postinstall": "sed -i.bak -e 's/design:26.1.0/design:28.0.0/g' ./node_modules/react-native-navigation/lib/android/app/build.gradle && sed -i.bak -e 's/targetSdkVersion 25/targetSdkVersion 28/g' ./node_modules/react-native-navigation/lib/android/app/build.gradle && sed -i.bak -e 's/compileSdkVersion 26/compileSdkVersion 28/g' ./node_modules/react-native-navigation/lib/android/app/build.gradle && sed -i.bak -e \"s/buildToolsVersion '27.0.3'/buildToolsVersion '28.0.3'/g\" ./node_modules/react-native-navigation/lib/android/app/build.gradle"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

[RichardLindhout]

@trialsNow Maybe it's an older react version which does not support Context yet? Can you share your versions of react and react native

[trialsNow]

@RichardLindhout
Here is my versions..

"react-native-paper": "^2.11.1",
"react": "16.6.1",
"react-native": "0.57.7",
"react-native-navigation": "^2.12.0",

[Kirill-Cherkalov]

@Kirill-Cherkalov I think your issue is something in your react native setup. facebook/react-native#20588

Thanks for the link. The problem was been connected with babel (because I use decorators), not with react-native-paper. I also removed unused packages, just in case)

[Trancever]

Created example app with paper and react-native-navigation

[trialsNow]

@Trancever

1. The provider in your example doesn't use a theme. I get an error only during setting theme.
2. The provider is not wrapping all the screens at one shot during navigation registration. You have them at all screens.

[Trancever]

I'll check 1 point, but for the second point, you can't wrap all screens in one provider. While using react-native-navigation you have to wrap every screen with it's own provider.

[trialsNow]

@Trancever
For #2 react-native-elements does it at one shot for all screens as provided in my example. Thought @RichardLindhout was able to achieve that.
Will wait to hear from you on #1.

[Trancever]

@trialsNow Check my example again. I updated it to use same approach as you and it works fine. Btw, even though @RichardLindhout is using HOC and he iterates on a routes collection doesn't mean he is using one provider, he still wraps every screen with separate Provider.

[RichardLindhout]

@Trancever You're right. I wrap every screen in a redux provider + paper provider. It's stated in the RNN docs here: https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration?id=registering-screens-with-wrapping-provider-component

[odesey]

I am using react-native-navigation as well and came across this thread while attempting to get things going.

The example the @Trancever provided is excellent, however there is a problem that needs to be addressed in it.

The Home and Overview screen should NOT be wrapped in a <Provider></Provider> component in addition to the HOC component.

Doing this will prevent your theme config from being applied!

Maybe @Trancever can update his example and link it to the official documentation?

Thanks for the excellent package!!

[kopax]

I am having issue when wrapping my app in a <PaperProvider />, I believe this should be mentioned in the documentation that we must use one paper provider per page:

https://callstack.github.io/react-native-paper/theming.html#applying-a-theme-to-the-whole-app