Native CardView for react-native (All Android version and iOS)

Overview

react-native-card-view npm version npm downloads Platform - Android and iOS MIT

npm

Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop).

Website
Material Design Card Spec
CardView Android Documentation

Getting started

$ npm install react-native-cardview --save
# --- or ---
$ yarn add react-native-cardview

Mostly automatic installation

$ react-native link react-native-cardview

Manual installation

iOS

Dont need to setup

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.kishanjvaghela.cardview.RNCardViewPackage; to the imports at the top of the file
  • Add new RNCardViewPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-cardview'
    project(':react-native-cardview').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-cardview/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-cardview')
    

Usage

N|Example

N|Example

Example

Browse the files in the /example directory.

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

You can also follow

Attributes

  • cardElevation (Android/iOS)

An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card. There can be some performance impact when using a very high elevation value.

  • cardMaxElevation (Android)

An attribute to support shadow on pre-lollipop device in android. cardMaxElevation

  • cornerRadius (Android/iOS) An attribute to set the radius of the card.

  • useCompatPadding (Android)

CardView adds additional padding to draw shadows on platforms before Lollipop. setUseCompatPadding

  • cornerOverlap (Android)

On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. Instead, it adds padding to content so that it won't overlap with the rounded corners. You can disable this behavior by setting this field to false.

Setting this value on Lollipop and above does not have any effect unless you have enabled compatibility padding.

setPreventCornerOverlap

Issues
  • CardView on Android doesn't support flexbox layout

    CardView on Android doesn't support flexbox layout

    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.

    opened by aranda-adapptor 10
  • Build failed

    Build failed

    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
    opened by fokoz 7
  • Trying to remove a view index above child count- Android

    Trying to remove a view index above child count- Android

    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.

    opened by hmachaharywork 6
  • Please update npm

    Please update npm

    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.

    opened by Noitidart 6
  • Text-alignment in CardView does not work

    Text-alignment in CardView does not work

    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. cardview-text-end

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

    opened by dharavp 5
  • Invariant violation : Native component for

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

    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-cardviewdidn'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).

    opened by ArthurAttout 5
  • Task :react-native-cardview:verifyReleaseResources FAILED

    Task :react-native-cardview:verifyReleaseResources FAILED

    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.

    opened by mathnogueira 4
  • Animate shadow?

    Animate shadow?

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

    opened by Noitidart 4
  • Automatic installation failing

    Automatic installation failing

    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
    
    opened by Noitidart 3
  • Release Build failed

    Release Build failed

    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
    opened by basha777 3
  • Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 4.4.8 to 4.4.19 in /example

    Bump tar from 4.4.8 to 4.4.19 in /example

    Bumps tar from 4.4.8 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7 in /example

    Bump path-parse from 1.0.6 to 1.0.7 in /example

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.7.1 to 2.8.9 in /example

    Bump hosted-git-info from 2.7.1 to 2.8.9 in /example

    Bumps hosted-git-info from 2.7.1 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.19 to 4.17.21 in /example

    Bump lodash from 4.17.19 to 4.17.21 in /example

    Bumps lodash from 4.17.19 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump handlebars from 4.5.3 to 4.7.7 in /example

    Bump handlebars from 4.5.3 to 4.7.7 in /example

    Bumps handlebars from 4.5.3 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.19 to 0.7.28 in /example

    Bump ua-parser-js from 0.7.19 to 0.7.28 in /example

    Bumps ua-parser-js from 0.7.19 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Shadow is not showing in left and right when we give marginHorizontal or paddingHorizontal to the parent

    Shadow is not showing in left and right when we give marginHorizontal or paddingHorizontal to the parent

    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. 123456

    opened by kuldeepworkid 0
  • how to add onPress / onCLick listener on cardview?

    how to add onPress / onCLick listener on cardview?

    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.

    opened by hassan-akhtar 0
  • how to set only top shadows?

    how to set only top shadows?

    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?

    opened by huaiguoguo 0
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
Custom version of the IOS SegmentedControl component

react-native-custom-segmented-control Native UI component for Segmented Control with custom style animationType: 'middle-line' selectedLineAlign: 'tex

Wix.com 160 Nov 27, 2021
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Jan 16, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
DEPRECATED, Please migrate to latest version of gl-react-native that works nicely with expo-gl and unimodules

This repository hosts the v2 of gl-react. Please also see the v3 at https://github.com/gre/gl-react Gitbook documentation / Github / gl-react / #gl-re

Gaëtan Renaudeau 1.9k Dec 28, 2021
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.8k Jan 8, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 68 Jan 17, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 301 Jan 19, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 6 Aug 24, 2021
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Gifted ListView A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps Changelog 0.0.13 Use RefreshControl

Farid Safi 1.6k Jan 15, 2022
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

react-native-datepicker React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS Insta

X  Fruit Team 2.1k Jan 13, 2022
Android and iOS charts based on react-native-svg and paths-js

** Capital One built this project to help our engineers as well as users in the react native community. We have decided to focus on alternatives to re

Capital One 885 Dec 28, 2021
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 73 Jan 5, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

null 17 May 19, 2021
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.4k Jan 13, 2022
Swap your app with an offline version while there's no connectivity

react-native-offline-mode A higher-order component for React Native which will conditionally show a component OR something else depending on internet

Omer Lachish 187 Dec 28, 2021