kishanjvaghela / react-native-cardview Goto Github PK

Could not find a declaration file for module 'react-native-cardview'. '/Users/bishes/Desktop/Workspace/VantageBit/pasls/app/node_modules/react-native-cardview/index.js' implicitly has an 'any' type.
Try npm install @types/react-native-cardview if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-cardview';ts(7016)

I was trying to use this library but after installation when I was importing the module I stumbled upon the above issue and I've been trying to solve it for the past couple of days yet I cannot find the solution. Please do have a look and help me resolve this.

I am using RN 0.49.3 and react 16.0.0-beta.5 and I think PropTypes package has been deprecated. It is causing a red screen and errors out.

Describe the bug
Invariant Violation: Text strings must berendered within a component.

  This error is located at:

  in RCTView (at ModuleCard.js:61)

  in RNCardView (at CardView.android.js:46)in CardView (at ModuleCard.js:51)in RCTView (at ModuleCard.js:50)

  in ModuleCard (at TaskSelector.js:28)in RCTView (at TaskSelector.js:23)in TaskSelector (at SceneView.tsx:98)in StaticContainer

  in StaticContainer (at SceneView.tsx:89)in EnsureSingleNavigator (atSceneView.tsx:88)

  in SceneView (at useDescriptors.tsx:125)in RCTView (at CardContainer.tsx:190)in RCTView (at CardContainer.tsx:189)in RCTView (at Card.tsx:515)in RCTView (at

  createAnimatedComponent.js:151)

  in AnimatedComponent (at Card.tsx:498)in PanGestureHandler (at Card.tsx:491)in RCTView (at

  createAnimatedComponent.js:151)

  in AnimatedComponent (at Card.tsx:487)

...
To Reproduce
Steps to reproduce the behavior:

The steps are the same as the demo in the documentation.

Screenshots

Smartphone (please complete the following information):

• Device: [e.g. MI6]
• OS: [e.g. MIUI 11]
• Version [latest]

Describe the bug
build failed as follow log:

Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> com.android.build.api.transform.TransformException: com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /node_modules/react-native-cardview/android/build/intermediates/intermediate-jars/debug/classes.jar

with setting
multiDexEnabled true

To Reproduce
Steps to reproduce the behavior:

1. run react-native run-android

Smartphone (please complete the following information):

• Device: Vivo
• OS: Android
• Version 6.0.1

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Package is installing another version of react-native which is conflicting.

Fix for this would be remove react-native from peerDependencies to devDependencies

EDIT: seems that the PR #39 already fixed the problem, however the fix wasn't published to the npm registry yet.

Describe the bug
When building the app using compileSdkVersion as 28, the build fails with the following output:

> Task :react-native-cardview:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-cardview:verifyReleaseResources'.
> java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
  /home/matheus/Projects/patrulha-2.0/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
  /home/matheus/Projects/patrulha-2.0/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
  /home/matheus/Projects/patrulha-2.0/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values/values.xml:2737: error: resource android:attr/fontVariationSettings not found.
  /home/matheus/Projects/patrulha-2.0/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values/values.xml:2738: error: resource android:attr/ttcIndex not found.
  error: failed linking references.


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

The problem seems to be that react-native-cardview sets compileSdkVersion as 27 in android/build.gradle. Changing it to 28 solves the problem.

Am I right in thinking this?

I'm trying this and all the text elements appear on top of each other on Android, but on iOS it works as expected:

          <CardView
            style={{ flex: 1, justifyContent: "center", alignItems: "center", height: 100, margin: 20 }}
            cardElevation={2}
            cardMaxElevation={2}
            cornerRadius={0}
          >
            <Text>Elevation 1</Text>
            <Text>Elevation 2</Text>
            <Text>Elevation 3</Text>
            <Text>Elevation 4</Text>
          </CardView>

Having a shadow is nice, but If I can't layout my card contents in the same way on Android and iOS, the component is not very useful.

I'm building a React Native project that it's design relies largely on shadows (also with cards).

Using this great component with elevation property does not meet my needs.

I'm looking desperately for a solution:

I've tried react-native-shadow - but it badly effects performance.

What I found is this native android library for shadows that looks awesome, but I don't have the knowledge on putting it together with a React Native Component I can use in my project.

Could you consider creating a Native Component using this library to support custom shadows (define color, radius, offset etc.)

Thanks!

Is your feature request related to a problem? Please describe.
I have a build error:
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-cardview (to unlink run: "react-native unlink react-native-cardview")

Describe the solution you'd like
Update to support autolinking in react-native 0.60+

FAILURE: Build failed with an exception.

• What went wrong:

Execution failed for task ':react-native-cardview:verifyReleaseResources'.
> 1 exception was raised by workers:
  com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
  C:\Users\Kamlesh\Desktop\ControlPlus\node_modules\react-native-cardview\android\build\intermediates\res\merged\release\values-v28\values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
  C:\Users\Kamlesh\Desktop\ControlPlus\node_modules\react-native-cardview\android\build\intermediates\res\merged\release\values-v28\values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
  C:\Users\Kamlesh\Desktop\ControlPlus\node_modules\react-native-cardview\android\build\intermediates\res\merged\release\values\values.xml:2788: error: resource android:attr/fontVariationSettings not found.
  C:\Users\Kamlesh\Desktop\ControlPlus\node_modules\react-native-cardview\android\build\intermediates\res\merged\release\values\values.xml:2789: error: resource android:attr/ttcIndex not found.
  error: failed linking references.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warnings

IN DEBUG MODE:

WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
WARNING: The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.4.2.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '27.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

React-native Environment:

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 2.41 GB / 7.92 GB
  Binaries:
    Node: 12.3.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.4.0.0 AI-183.6156.11.34.5522156
  "react": "16.8.6",
  "react-native": "0.60.4",
    "react-native-cardview": "^2.0.2",

new RNCardViewPackage() to the list returned by the getPackages() method

Which class contains the method getPackages()?

I get this error whenever I try to remove and item which is rendered from an array of objects inside a CardView. I got this error only in android.

Is it possible to animate this shadow? This has been such an amazing module, can't thank you enough for it.

A problem occurred configuring project ':react-native-cardview'.
> The SDK Build Tools revision (23.0.1) is too low for project ':react-native-cardview'. Minimum required is 25.0.0

i think you need to upgrade your android dependency.

What if i have dynamic content coming from the server how load the content inside loop in this case ?

I tried but I can't handle two cards on one row

It gives error in XCODE.
ld: library not found for -lRNCardView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Hello
When I tried building the app for Android I got this error:

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not get unknown property 'compile' for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Any idea?

i want to change the color of the shadow，any solution ?

react-native-cardview": "^2.0.2
"react-native": "0.55.4",

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

When I try to run the app with the following properties

<CardView
cardElevation={2}
cardMaxElevation={2}
backgroundColor='#ffffff'>

I have a TypeError, telling that the attribute BackgroundColor must be a double instead of a string.
Which type of color encoding is expected here ? Should it resolve to a R.color attribute ?

Latest Gradle requires dependencies to use 'implementation'.

CardView has no propType for native prop RNCardView.cornerOverlap of native type boolean
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.

Describe the bug
Getting an error when using typscript as follows
could not find a declaration file for module 'react-native-cardview'. '../node_modules/react-native-cardview/index.js' implicitly has an 'any' type.
Try npm install @types/react-native-cardview if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-cardview';

I am using version 2.0.2
I linked the card-view and running the ios simuator.

Doing automatic installation is not working. After doing react-native link I am getting this error:

C:\Users\Mercurius\Documents\GitHub\bouncerapp_android\android\app\src\main\java\com\bouncerapp\MainApplication.j
ava:27: error: cannot find symbol
            new RNCardViewPackage()
                ^
  symbol: class RNCardViewPackage
2 errors

I think a new NPM release should be created to include pull-request #13, since using React.PropTypes on newer versions of React is not supported anymore.

PS: thanks for this great lib 👍

Not working with react-native 0.60 in Android, Please include AndroidX dependencies, because this does not include support schema.

I keep on running into the same issue on an android react native project

Invariant Violation: Native component for "RNCardView" does not exist

This error is located at:
    in RCTText (at Text.js:548)
    in Text (at Button.js:137)
    in RCTView (at View.js:71)
    in View (at Button.js:136)
    in TouchableNativeFeedback (at Button.js:128)
    in Button (at FormLogin.js:45)
    in RNCardView (at FormLogin.js:21)
    in RCTView (at View.js:71)
    in View (at FormLogin.js:20)
    in FormLogin (at SceneView.js:17)
    in SceneView (at CardStack.js:374)
    in RCTView (at View.js:71)
    in View (at CardStack.js:373)
    in RCTView (at View.js:71)
    in View (at CardStack.js:372)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at Card.js:12)
    in Card (at PointerEventsContainer.js:39)
    in Container (at CardStack.js:414)
    in RCTView (at View.js:71)
    in View (at CardStack.js:348)
    in RCTView (at View.js:71)
    in View (at CardStack.js:347)
    in CardStack (at CardStackTransitioner.js:66)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:142)
    in Transitioner (at CardStackTransitioner.js:19)
    in CardStackTransitioner (at StackNavigator.js:38)
    in Unknown (at createNavigator.js:13)
    in Navigator (at createNavigationContainer.js:214)
    in NavigationContainer (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

react-native link react-native-cardview didn't solve the issue.

Installing manually (as in the readme) didn't solve the issue. Rebuilding and restarting the server didn't solve the issue.

I've been able to successfully install other libraries (such as maps or textinputlayout).

Describe the bug
When gradle plugin is upgraded to 3.2.1 and build the project it throws exception
A problem occurred configuring project ':react-native-cardview'.

Could not resolve all artifacts for configuration ':react-native-cardview:classpath'.
Could not find com.android.tools.build:gradle:2.2.3.
Searched in the following locations:
https://jcenter.bintray.com/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.pom
https://jcenter.bintray.com/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.jar
Required by:
project :react-native-cardview
It seems to be issue with library still using 2.2.3 version.

Expected behavior
Build should be successful while upgrading the gradle plugin.

When I import the package this showup

Could not find a declaration file for module 'react-native-cardview'. 'c:/Users/{user}/Desktop/Projects/react-native/{projectname}/node_modules/react-native-cardview/index.js' implicitly has an 'any' type.
Try npm install @types/react-native-cardview if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-cardview';ts(7016)

I tried to ignore that and still use it but my app keeps crashing.

Describe the bug
Not able to use cardview as expected, some kind of shadow is applied to text in cardview. but cardview itself does not have shadow.

To Reproduce
This code may help

import React from 'react';
import { View, TextInput, Text, Button, Alert, AlertButton } from 'react-native';
import styled from 'styled-components';
import CardView from 'react-native-cardview';

export default class Login extends React.Component {
    static navigationOptions = {
        title: 'Login'
    }
    render() {
        return <View>
            <Panel>
                <Text selectable={false}>Username</Text>
                <Input />
                <Text selectable={false} style={{ marginTop: 20 }}>Password</Text>
                <Input />
                <Button title={"Login"} style={{ marginTop: 20 }} onPress={() => {
                    Alert.alert("Login", "Incorrect Credentials. Try again", ["OK"])
                }} />
            </Panel>
        </View>
    }
}

const Container = styled.View`
    width: 100%;
    height: 100%;
`

const Panel = styled(CardView).attrs(() => ({
    cardElevation: 2
}))`
    top: 20px;
    padding: 20px;
    margin: 0 auto;
    width: 300px;
    height: 600px;
`;

const Input = styled.TextInput`
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #00000077;
    width: 100%;
    height: 40px;
`;

Expected behavior
Shadow should be applied to cardview not elements inside it.\

Screenshots

Smartphone (please complete the following information):

• Device: iPhoneX simulator
• OS: iOS12.1

When I give a negative margin to a child view it works fine in iOS but in case of android its not working.

Hi, I try to wrap CardView with TouchableNativeFeedback, I can detect click events but there is no ripple effect on Android. I don't know if this is even supported at the moment or not. Do you have any ideas?

Android 5.0.1 (Galaxy S4)
On a clean project I get a red outline around my content instead of a shadow. I also get this error:

Warning: Native component for "RNCardView" does not exist
- node_modules\expo\src\Logs.js:187:24 in newConsoleFunc
- node_modules\react-native\node_modules\fbjs\lib\warning.js:36:22 in printWarning
- node_modules\react-native\node_modules\fbjs\lib\warning.js:60:27 in warning
- node_modules\react-native\Libraries\ReactNative\requireNativeComponent.js:52:12 in requireNativeComponent
- node_modules\react-native-cardview\libs\CardView.android.js:12:40 in <unknown>
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:174:12 in loadModuleImplementation
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:126:36 in guardedLoadModule
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:110:20 in _require
- node_modules\react-native-cardview\index.js:1:0 in <unknown>
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:174:12 in loadModuleImplementation
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:126:36 in guardedLoadModule
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:110:20 in _require
* App.js:3:0 in <unknown>
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:174:12 in loadModuleImplementation
- node_modules\metro-bundler\src\Resolver\polyfills\require.js:126:36 in guardedLoadModule
- ... 6 more stack frames from framework internals

I've just done npm install ... and react-native link ... which properly modified the android build project. The whole project builds without errors.
Anything else I can do to diagnose this?

Is your feature request related to a problem? Please describe.
how to set only top/right/bottom/left shadows?

Describe the solution you'd like
how to set only top/right/bottom/left shadows?

Describe alternatives you've considered
how to set only top/right/bottom/left shadows?

Additional context
how to set only top/right/bottom/left shadows?

When I try to put textview center of the cardview. It does not work.

Below I have shared my code:

<CardView
           cardElevation={3}
           cardMaxElevation={3}
           cornerRadius={3}
           style={{
            	height: 60,
            	justifyContent: 'center',
            	alignItems: 'center',
            	margin: 20,
            	backgroundColor: '#ffffff' }}>
            	<View 
            	style={{
            		flex: 1,
            		justifyContent: 'flex-end', //changed justifyContent value to center
            		backgroundColor: 'red'
            	}}>
                <Text 
                style={{
                color: '#000000',
                fontSize: 12,
                backgroundColor: 'pink',
                textAlign: 'center'
                 }}
                >
                Helloo</Text>
                </View>
            </CardView>

Below I have shared screenshot of my output:

When I gave justifyContent flex-end to the View,it shows below output.

When I gave justifyContent center to the View,it shows below output.

In Android this issue Message is appearing

Error:Execution failed for task ':app:processDebugResources'.

Error: more than one library with package name 'com.reactlibrary'

Cant run ur library. im getting this error

Cannot add child that doesnt have a YogaNode to a parent w/o a measure function......

im doing something like this:

			      <CardView
   			 		cardElevation={4}
    				cardMaxElevation={4}
    				cornerRadius={5}>
			        <Text>{this.state.tmpUser}</Text>
			      </CardView>
                                  <View>some view</View>

can u explain further.?

Describe the bug
In Android version 4.4. I make an image with radius 16 and put it inside the CardView with radius 16 too.

The result:

• Image and CardView both have radius 16.

• CardView without style attribute:
  
  Image is from Berry Good

• CardView with style attribute:

  • When I set the style (width and height) of CardView equal to width and height of image. My image do not have radius.

Expected behavior
I wish the CardView can wrap my image without any white space

Smartphone (please complete the following information):

• Device: [Nexus 5]
• OS: [Android ]
• Version: [4.4]

If you need any information, please let me know. Thank you very much for your great hard-working

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

i am install with "yarn add react-native-cardview"
i am cofigure the react-native-cardview completely in accordance with official document
i am mkdir directory typing in project of react-native and put official index.d.ts in it;

Expected behavior
A clear and concise description of what you expected to happen.

but visual code is still notice not found type declare file;

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] android api 28
• OS: [e.g. iOS8.1] android api 28
• Browser [e.g. stock browser, safari]
• Version [e.g. 22] latest version of react-native

Additional context
Add any other context about the problem here.

Execution failed for task ':react-native-cardview:verifyReleaseResources'.

1 exception was raised by workers:
com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
/Users/admin/Documents/GitHub/graphqlLat/Upgrade/naberly-experts-app/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
/Users/admin/Documents/GitHub/graphqlLat/Upgrade/naberly-experts-app/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
/Users/admin/Documents/GitHub/graphqlLat/Upgrade/naberly-experts-app/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values/values.xml:2738: error: resource android:attr/fontVariationSettings not found.
/Users/admin/Documents/GitHub/graphqlLat/Upgrade/naberly-experts-app/node_modules/react-native-cardview/android/build/intermediates/res/merged/release/values/values.xml:2739: error: resource android:attr/ttcIndex not found.
error: failed linking references.

Smartphone (please complete the following information):

• React Native 0.59.9
• OS: macOs mojave 10.14.5

Shadow is not showing in left and right when we give marginHorizontal or paddingHorizontal to the parent. When we aling the card to the center of any parents the shadow is showing perfectly but then the card width is 100% and then we give marginHorizontal or paddingHorizontal to the parent then the shadow is not showing.