React-native-paper: undefined is not an object (evaluating '_reactNative.Appearance.getColorScheme') w/ v4.0

[kpervin]

Current behaviour

After updating npm package to v4.0.0, app will not start and throws following error:

undefined is not an object (evaluating '_reactNative.Appearance.getColorScheme')
- node_modules/react-native-paper/src/core/Provider.tsx:22:10 in Provider
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8251:26 in constructClassInstance
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12940:6 in updateClassComponent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20488:8 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11484:17 in dispatchAction
* [native code]:null in dispatchAction
* App.js:57:8 in loadResourcesAndDataAsync
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:274:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:145:19 in PromiseImpl.resolve.then$argument_0
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Expected behaviour

Provider would work as intended in v3.*

Code sample

const theme = {
    ...DefaultTheme,
    roundness: 8,
    colors: {
        ...DefaultTheme.colors,
        primary: "#FF6400",
        accent: "#0096af",
        textContrast: "#fff",
    },
};
...
export default function App(props) {
    ...
    return(
        <ReduxProvider store={store}>
            <PersistGate
                loading={<ActivityIndicator />}
                persistor={persistor}
            >
                <PaperProvider theme={theme}>
                    <TouchableWithoutFeedback
                        onPress={() => {
                            Keyboard.dismiss();
                        }}
                    >
                        <SafeAreaProvider>
                            <RootNavigator
                                ref={containerRef}
                                initialState={initialNavigationState}
                            />
                        </SafeAreaProvider>
                    </TouchableWithoutFeedback>
                </PaperProvider>
            </PersistGate>
        </ReduxProvider>
    );
}

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android | ios emulator 13.1
| react-native | https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz
| react-native-paper | ^4.0.0
| node |
| npm or yarn | 6.14.4
| expo sdk | ~37.0.3

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[satya164]

cc @troZee

[SleeplessByte]

This happens because we're "stuck" on 0.11.7 for SDK 38 and below (react-native-web.) A solution is to _alias_ the Appearance module to expo-react-native-appearance (e.g. via babel).

Another solution would be for react-native-paper to use expo-react-native-appearance.

[phanshiwen]

It works with react-native v0.62, as that is when the Appearance getColorScheme was added.
https://reactnative.dev/blog/2020/03/26/version-0.62#new-dark-mode-features

[Trancever]

@ShaggyKris With the v4.0 we dropped support for old RN versions and now we support 0.62+. We forgot to update the readme with that information but we are working on it. Sorry for the inconvenience.

If you can't bump RN version in your project you should still use Paper v3.x as it still being maintained and it will receive bug fixes for next few months.

[satya164]

We still need to address this to support React Native Web.

[Trancever]

v4.0.1 should fix the issue https://github.com/callstack/react-native-paper/releases/tag/v4.0.1

[thomashagstrom]

@Trancever I'm on 4.2.0 and still get it

Failed to compile.

./node_modules/react-native-paper/lib/module/core/Provider.js
Attempted import error: 'Appearance' is not exported from 'react-native'.

package.json
```
"dependencies": {
"core-js": "3",
"file-loader": "^6.1.0",
"react": "16.13.1",
"react-app-rewired": "^2.1.6",
"react-art": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "0.63.2",
"react-native-paper": "^4.2.0",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "^0.11.0-alpha.3"
},

config-overrides.js

config.module.rules.push({
  test: /\.js$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
  use: {
    loader: 'babel-loader',
    options: {
      // Disable reading babel configuration
      babelrc: false,
      configFile: false,

      // The configuration for compilation
      presets: [
        ['@babel/preset-env', {useBuiltIns: 'usage'}],
        '@babel/preset-react',
        '@babel/preset-flow',
        '@babel/preset-typescript',
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread',
      ],
    },
  },
});

```