react-native-paper does not work on react-native 0.58.x

[syedabuthahirm]

Current behaviour

ReactNativePaper is not working in lastet version of reactnative 0.58 and 0.58.1

Expected behaviour

Code sample

/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React from "react";
import { AppRegistry } from "react-native";
import { name as appName } from "./app.json";
import {
  Provider,
  Button,
  DarkTheme,
  Surface,
  Text,
  Card
} from "react-native-paper";

const Main = () => (
  <Provider theme={DarkTheme}>
    <Card elevation={1}>
      <Card.Content>
        <Text>Hello o</Text>
      </Card.Content>
    </Card>
  </Provider>
);

AppRegistry.registerComponent(appName, () => Main);

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android | android
| react-native | 58.1
| react-native-paper | 2.6.3
| node | 8.11.3
| npm or yarn | 1.10.1

Package.json code

{
  "name": "barbendingEstimation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.1",
    "react-native-paper": "^2.6.3",
    "react-native-vector-icons": "^6.2.0"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

[ferrannp]

We are aware of compatibility issue. We'll work on this at some point (but I am guessing when expo updates).

[syedabuthahirm]

Ok. i downgrade my application to old react-native version.
but while debugging i found that flattenStyle function return object reference instead of number in surface component. so, in shadow function always it's going to default block instead of correct case blocks.

in that function we calculated

default:
      height = elevation - 1; // this result gives NaN result
      radius = elevation;

I didn't debugged further.

[satya164]

This should be fixed by ec872a5c6188d8fdded269ac2e98f4ba5881e679

Can you try the latest version and let me know if it works?

[syedabuthahirm]

Yeah.
It's working.
Thanks for the quick fix.

While checking react-native version is 0.58.3.

[hugopretorius914]

@syedabuthahirm are you sure you were on 0.58.3? Or @satya164 the same fix might be needed for Button as it gets the same error. 0.58.3 & 2.7.0

Looking at the code above it does not use Button. Only card (surface).

Thanks for the good work guys.

[syedabuthahirm]

@hugopretorius72 i think this issue was in shadow function not in button component. Surface is basic component. button and card component inherited from surface @hugopretorius72.

[hugopretorius914]

I can confirm this as adding style={{elevation: 1}} on button works like a bomb 🙌🏻

[hugopretorius914]

@syedabuthahirm thanks for that. Not sure why that fixes it but it does, hope it can help you troubleshoot

[koo27]

Still having this (smilar) problem with version 2.11.0 and react-native version 0.58.4

[satya164]

@koo27 can you open a new issue with code sample and error message?

[koo27]

@satya164 Sure! I'm still deep debugging in order to get as much information as I can. Thank you

[syedabuthahirm]

@satya164 & @koo27 i checked with react-native-0.58.3.i will check again with react-native-0.58.4

[koo27]

@syedabuthahirm @satya164 my bad!
The issue wasn't related to react-native-paper anymore! The last version actually solves the problem.
The bug I face is related only to the new version of react-native (basically it throws me error when I have something like width, right, height, etc. calculated dynamically directly into the style).

[Bonfs]

hi everyone, this problem persists in react-native 0.59.5, or maybe returned idk. The solution pointed by @hugopretorius72 still working for Button but not worked for BottomNavigation.
I have migrated from 0.57.8 to 0.59.5