Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Current behaviour

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

Expected behaviour

whatsapp image 2019-01-28 at 6 10 53 pm

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"
  }
}

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:14 (2 by maintainers)

Top GitHub Comments

2reactions

hugopretorius914commented, Jan 30, 2019

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

1reaction

koo27commented, Feb 13, 2019

@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).

Top Results From Across the Web

react-native-paper - npm

React Native Paper is the cross-platform UI kit library containing a collection of customizable and production-ready components, ...

Getting Started · React Native Paper

Open a Terminal in your project's folder and run: yarn add react-native-paper. or npm install react-native-paper. From v5 there is a need to...

React Native Paper

React Native Paper is a high-quality, standard-compliant Material Design library that has ... It is responsive, fast and works reliably on both platforms....

Troubleshooting - React Native

These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here,...

React Native <NavigationContainer> not styling-React Native

import React from "react"; import { StyleSheet, Text, View } from "react-native"; const App = () => ( <View style={styles.container}> {/* <-- note...