├── example ├── app.json ├── .DS_Store ├── babel.config.js ├── android │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── assets │ │ │ │ │ └── fonts │ │ │ │ │ │ ├── Entypo.ttf │ │ │ │ │ │ ├── Feather.ttf │ │ │ │ │ │ ├── Zocial.ttf │ │ │ │ │ │ ├── AntDesign.ttf │ │ │ │ │ │ ├── EvilIcons.ttf │ │ │ │ │ │ ├── Foundation.ttf │ │ │ │ │ │ ├── Ionicons.ttf │ │ │ │ │ │ ├── Octicons.ttf │ │ │ │ │ │ ├── FontAwesome.ttf │ │ │ │ │ │ ├── MaterialIcons.ttf │ │ │ │ │ │ ├── SimpleLineIcons.ttf │ │ │ │ │ │ ├── FontAwesome5_Brands.ttf │ │ │ │ │ │ ├── FontAwesome5_Regular.ttf │ │ │ │ │ │ ├── FontAwesome5_Solid.ttf │ │ │ │ │ │ └── MaterialCommunityIcons.ttf │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── cardtest │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ │ └── debug │ │ │ │ ├── res │ │ │ │ └── xml │ │ │ │ │ └── react_native_config.xml │ │ │ │ └── AndroidManifest.xml │ │ ├── build_defs.bzl │ │ ├── proguard-rules.pro │ │ ├── BUCK │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── gradle.properties │ ├── build.gradle │ ├── gradlew.bat │ └── gradlew ├── ios │ ├── cardTest │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── cardTest.xcodeproj │ │ ├── project.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ ├── xcuserdata │ │ │ │ └── macbookpro.xcuserdatad │ │ │ │ │ └── UserInterfaceState.xcuserstate │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── xcuserdata │ │ │ └── macbookpro.xcuserdatad │ │ │ │ └── xcschemes │ │ │ │ └── xcschememanagement.plist │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── cardTest.xcscheme │ │ │ └── cardTest-tvOS.xcscheme │ ├── cardTestTests │ │ ├── Info.plist │ │ └── cardTestTests.m │ ├── cardTest-tvOSTests │ │ └── Info.plist │ └── cardTest-tvOS │ │ └── Info.plist ├── __tests__ │ ├── placeholderImage.jpg │ └── App-test.js ├── index.js ├── metro.config.js ├── package.json └── App.js ├── .DS_Store ├── placeholderImage.jpg ├── package.json ├── index.js ├── README.md ├── readme.md ├── CardEC.js └── Cards.js /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cardTest", 3 | "displayName": "cardTest" 4 | } -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/.DS_Store -------------------------------------------------------------------------------- /example/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/.DS_Store -------------------------------------------------------------------------------- /placeholderImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/placeholderImage.jpg -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | cardTest 3 | 4 | -------------------------------------------------------------------------------- /example/ios/cardTest/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/__tests__/placeholderImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/__tests__/placeholderImage.jpg -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/AntDesign.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'cardTest' 2 | include ':react-native-vector-icons' 3 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 4 | 5 | include ':app' 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip 6 | -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/project.xcworkspace/xcuserdata/macbookpro.xcuserdatad/UserInterfaceState.xcuserstate: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsbeaudry/react-native-card-ui/HEAD/example/ios/cardTest.xcodeproj/project.xcworkspace/xcuserdata/macbookpro.xcuserdatad/UserInterfaceState.xcuserstate -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /example/android/app/src/debug/res/xml/react_native_config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | localhost 5 | 10.0.2.2 6 | 10.0.3.2 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/cardTest/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /example/ios/cardTest/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/cardtest/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.cardtest; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "cardTest"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/xcuserdata/macbookpro.xcuserdatad/xcschemes/xcschememanagement.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SchemeUserState 6 | 7 | cardTest-tvOS.xcscheme_^#shared#^_ 8 | 9 | orderHint 10 | 1 11 | 12 | cardTest.xcscheme_^#shared#^_ 13 | 14 | orderHint 15 | 0 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cardTest", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "react": "16.8.3", 11 | "react-native": "0.59.1", 12 | "react-native-card-ui": "^1.1.0", 13 | "react-native-size-matters": "^0.1.6", 14 | "react-native-vector-icons": "^6.4.1" 15 | }, 16 | "devDependencies": { 17 | "@babel/core": "^7.3.4", 18 | "@babel/runtime": "^7.3.4", 19 | "babel-jest": "^24.5.0", 20 | "jest": "^24.5.0", 21 | "metro-react-native-babel-preset": "^0.53.1", 22 | "react-test-renderer": "16.8.3" 23 | }, 24 | "jest": { 25 | "preset": "react-native" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /example/ios/cardTest/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /example/ios/cardTestTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-card-ui", 3 | "version": "1.1.0", 4 | "description": "cards", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/jsbeaudry/react-native-card-ui.git" 12 | }, 13 | "keywords": [ 14 | "cards" 15 | ], 16 | "author": "jsb", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/jsbeaudry/react-native-card-ui/issues" 20 | }, 21 | "dependencies": { 22 | "react-native-size-matters": "^0.1.0", 23 | "react-native-vector-icons": "^6.3.0" 24 | }, 25 | "peerDependencies": { 26 | "react-native-size-matters": "^0.1.0", 27 | "react-native-vector-icons": "^6.3.0" 28 | }, 29 | "homepage": "https://github.com/jsbeaudry/react-native-card-ui#readme" 30 | } 31 | -------------------------------------------------------------------------------- /example/ios/cardTest-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath 'com.android.tools.build:gradle:3.3.1' 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | google() 27 | jcenter() 28 | maven { 29 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 30 | url "$rootDir/../node_modules/react-native/android" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/cardtest/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.cardtest; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.oblador.vectoricons.VectorIconsPackage; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage(), 27 | new VectorIconsPackage() 28 | ); 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | }; 36 | 37 | @Override 38 | public ReactNativeHost getReactNativeHost() { 39 | return mReactNativeHost; 40 | } 41 | 42 | @Override 43 | public void onCreate() { 44 | super.onCreate(); 45 | SoLoader.init(this, /* native exopackage */ false); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.cardtest", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.cardtest", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/ios/cardTest/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 19 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 20 | moduleName:@"cardTest" 21 | initialProperties:nil]; 22 | 23 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 24 | 25 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 26 | UIViewController *rootViewController = [UIViewController new]; 27 | rootViewController.view = rootView; 28 | self.window.rootViewController = rootViewController; 29 | [self.window makeKeyAndVisible]; 30 | return YES; 31 | } 32 | 33 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 34 | { 35 | #if DEBUG 36 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 37 | #else 38 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 39 | #endif 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /example/ios/cardTest-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/ios/cardTestTests/cardTestTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 16 | 17 | @interface cardTestTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation cardTestTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 44 | if (level >= RCTLogLevelError) { 45 | redboxError = message; 46 | } 47 | }); 48 | 49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 52 | 53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 55 | return YES; 56 | } 57 | return NO; 58 | }]; 59 | } 60 | 61 | RCTSetLogFunction(RCTDefaultLogFunction); 62 | 63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 65 | } 66 | 67 | 68 | @end 69 | -------------------------------------------------------------------------------- /example/ios/cardTest/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | cardTest 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSLocationWhenInUseUsageDescription 28 | 29 | UILaunchStoryboardName 30 | LaunchScreen 31 | UIRequiredDeviceCapabilities 32 | 33 | armv7 34 | 35 | UISupportedInterfaceOrientations 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationLandscapeLeft 39 | UIInterfaceOrientationLandscapeRight 40 | 41 | UIViewControllerBasedStatusBarAppearance 42 | 43 | NSAppTransportSecurity 44 | 45 | NSAllowsArbitraryLoads 46 | 47 | NSExceptionDomains 48 | 49 | localhost 50 | 51 | NSExceptionAllowsInsecureHTTPLoads 52 | 53 | 54 | 55 | 56 | UIAppFonts 57 | 58 | AntDesign.ttf 59 | Entypo.ttf 60 | EvilIcons.ttf 61 | Feather.ttf 62 | FontAwesome.ttf 63 | FontAwesome5_Brands.ttf 64 | FontAwesome5_Regular.ttf 65 | FontAwesome5_Solid.ttf 66 | Foundation.ttf 67 | Ionicons.ttf 68 | MaterialCommunityIcons.ttf 69 | MaterialIcons.ttf 70 | Octicons.ttf 71 | SimpleLineIcons.ttf 72 | Zocial.ttf 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windows variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | 53 | :win9xME_args 54 | @rem Slurp the command line arguments. 55 | set CMD_LINE_ARGS= 56 | set _SKIP=2 57 | 58 | :win9xME_args_slurp 59 | if "x%~1" == "x" goto execute 60 | 61 | set CMD_LINE_ARGS=%* 62 | 63 | :execute 64 | @rem Setup the command line 65 | 66 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 67 | 68 | @rem Execute Gradle 69 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 70 | 71 | :end 72 | @rem End local scope for the variables with windows NT shell 73 | if "%ERRORLEVEL%"=="0" goto mainEnd 74 | 75 | :fail 76 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 77 | rem the _cmd.exe /c_ return code! 78 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 79 | exit /b 1 80 | 81 | :mainEnd 82 | if "%OS%"=="Windows_NT" endlocal 83 | 84 | :omega 85 | -------------------------------------------------------------------------------- /example/ios/cardTest/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/xcshareddata/xcschemes/cardTest.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /example/ios/cardTest.xcodeproj/xcshareddata/xcschemes/cardTest-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn () { 37 | echo "$*" 38 | } 39 | 40 | die () { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Escape application args 158 | save () { 159 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 160 | echo " " 161 | } 162 | APP_ARGS=$(save "$@") 163 | 164 | # Collect all arguments for the java command, following the shell quoting and substitution rules 165 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 166 | 167 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 168 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 169 | cd "$(dirname "$0")" 170 | fi 171 | 172 | exec "$JAVACMD" "$@" 173 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 37 | * // for example: to disable dev mode in the staging build type (if configured) 38 | * devDisabledInStaging: true, 39 | * // The configuration property can be in the following formats 40 | * // 'devDisabledIn${productFlavor}${buildType}' 41 | * // 'devDisabledIn${buildType}' 42 | * 43 | * // the root of your project, i.e. where "package.json" lives 44 | * root: "../../", 45 | * 46 | * // where to put the JS bundle asset in debug mode 47 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 48 | * 49 | * // where to put the JS bundle asset in release mode 50 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 51 | * 52 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 53 | * // require('./image.png')), in debug mode 54 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 55 | * 56 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 57 | * // require('./image.png')), in release mode 58 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 59 | * 60 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 61 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 62 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 63 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 64 | * // for example, you might want to remove it from here. 65 | * inputExcludes: ["android/**", "ios/**"], 66 | * 67 | * // override which node gets called and with what additional arguments 68 | * nodeExecutableAndArgs: ["node"], 69 | * 70 | * // supply additional arguments to the packager 71 | * extraPackagerArgs: [] 72 | * ] 73 | */ 74 | 75 | project.ext.react = [ 76 | entryFile: "index.js" 77 | ] 78 | 79 | apply from: "../../node_modules/react-native/react.gradle" 80 | 81 | /** 82 | * Set this to true to create two separate APKs instead of one: 83 | * - An APK that only works on ARM devices 84 | * - An APK that only works on x86 devices 85 | * The advantage is the size of the APK is reduced by about 4MB. 86 | * Upload all the APKs to the Play Store and people will download 87 | * the correct one based on the CPU architecture of their device. 88 | */ 89 | def enableSeparateBuildPerCPUArchitecture = false 90 | 91 | /** 92 | * Run Proguard to shrink the Java bytecode in release builds. 93 | */ 94 | def enableProguardInReleaseBuilds = false 95 | 96 | android { 97 | compileSdkVersion rootProject.ext.compileSdkVersion 98 | 99 | compileOptions { 100 | sourceCompatibility JavaVersion.VERSION_1_8 101 | targetCompatibility JavaVersion.VERSION_1_8 102 | } 103 | 104 | defaultConfig { 105 | applicationId "com.cardtest" 106 | minSdkVersion rootProject.ext.minSdkVersion 107 | targetSdkVersion rootProject.ext.targetSdkVersion 108 | versionCode 1 109 | versionName "1.0" 110 | } 111 | splits { 112 | abi { 113 | reset() 114 | enable enableSeparateBuildPerCPUArchitecture 115 | universalApk false // If true, also generate a universal APK 116 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 117 | } 118 | } 119 | buildTypes { 120 | release { 121 | minifyEnabled enableProguardInReleaseBuilds 122 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 123 | } 124 | } 125 | // applicationVariants are e.g. debug, release 126 | applicationVariants.all { variant -> 127 | variant.outputs.each { output -> 128 | // For each separate APK per architecture, set a unique version code as described here: 129 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 130 | def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4] 131 | def abi = output.getFilter(OutputFile.ABI) 132 | if (abi != null) { // null for the universal-debug, universal-release variants 133 | output.versionCodeOverride = 134 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 135 | } 136 | } 137 | } 138 | } 139 | 140 | dependencies { 141 | implementation project(':react-native-vector-icons') 142 | implementation fileTree(dir: "libs", include: ["*.jar"]) 143 | implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" 144 | implementation "com.facebook.react:react-native:+" // From node_modules 145 | } 146 | 147 | // Run this once to be able to run the application with BUCK 148 | // puts all compile dependencies into folder libs for BUCK to use 149 | task copyDownloadableDepsToLibs(type: Copy) { 150 | from configurations.compile 151 | into 'libs' 152 | } 153 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | Text, 4 | View, 5 | Image, 6 | Dimensions, 7 | Platform, 8 | ProgressViewIOS, 9 | ProgressBarAndroid, 10 | ImageBackground, 11 | TouchableOpacity, 12 | ScrollView 13 | } from "react-native"; 14 | import propTypes from "prop-types"; 15 | import { scale, verticalScale, moderateScale } from "react-native-size-matters"; 16 | 17 | import Icon from "react-native-vector-icons/FontAwesome"; 18 | 19 | let screenWidth = Dimensions.get("window").width; 20 | let screenHeight = Dimensions.get("window").height; 21 | 22 | import { 23 | CardEcomOne, 24 | CardEcomTwo, 25 | CardEcomThree, 26 | CardEcomFour 27 | } from "./CardEC"; 28 | 29 | import { 30 | CardOne, 31 | CardTwo, 32 | CardThree, 33 | CardFour, 34 | CardFive, 35 | CardSix, 36 | CardSeven, 37 | CardEight, 38 | CardNine, 39 | CardTen, 40 | CardEleven, 41 | CardTwelve 42 | } from "./Cards"; 43 | 44 | { 45 | /* 46 | //////////////////////////////////////////////////////////////// 47 | ////////////////////////// propTypes Ecommerce Cards //////////////////////////// 48 | //////////////////////////////////////////////////////////////// 49 | */ 50 | } 51 | CardEcomOne.propTypes = { 52 | title: propTypes.string.isRequired, 53 | price: propTypes.string.isRequired, 54 | icon: propTypes.string.isRequired, 55 | nbStar: propTypes.number.isRequired, 56 | iconColor: propTypes.string.isRequired, 57 | selectColor: propTypes.string.isRequired, 58 | getSelectColor: propTypes.func.isRequired, 59 | colorList: propTypes.arrayOf(propTypes.string.isRequired) 60 | }; 61 | CardEcomTwo.propTypes = { 62 | title: propTypes.string.isRequired, 63 | subTitle: propTypes.string.isRequired, 64 | price: propTypes.string.isRequired 65 | }; 66 | 67 | CardEcomThree.propTypes = { 68 | title: propTypes.string.isRequired, 69 | subTitle: propTypes.string.isRequired, 70 | price: propTypes.string.isRequired, 71 | buttonText: propTypes.string.isRequired, 72 | buttonColor: propTypes.string.isRequired, 73 | onClickButton: propTypes.func 74 | }; 75 | 76 | CardEcomFour.propTypes = { 77 | title: propTypes.string.isRequired, 78 | subTitle: propTypes.string.isRequired, 79 | price: propTypes.string.isRequired, 80 | buttonText: propTypes.string.isRequired, 81 | buttonColor: propTypes.string.isRequired, 82 | onClickButton: propTypes.func 83 | }; 84 | 85 | export { CardEcomOne, CardEcomTwo, CardEcomThree, CardEcomFour }; 86 | 87 | { 88 | /* 89 | //////////////////////////////////////////////////////////////// 90 | ////////////////////////// propTypes Ecommerce Cards //////////////////////////// 91 | //////////////////////////////////////////////////////////////// 92 | */ 93 | } 94 | 95 | CardOne.propTypes = { 96 | width: propTypes.number.isRequired, 97 | height: propTypes.number.isRequired, 98 | borderRadius: propTypes.number, 99 | shadowColor: propTypes.string, 100 | image: propTypes.oneOfType([propTypes.number, propTypes.object]) 101 | }; 102 | CardTwo.propTypes = { 103 | title: propTypes.string.isRequired, 104 | subTitle: propTypes.string.isRequired, 105 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 106 | profile: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 107 | icon: propTypes.string, 108 | iconColor: propTypes.string 109 | }; 110 | CardThree.propTypes = { 111 | title: propTypes.string.isRequired, 112 | subTitle: propTypes.string.isRequired, 113 | profile: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 114 | icon: propTypes.string, 115 | iconColor: propTypes.string 116 | }; 117 | CardFour.propTypes = { 118 | onClicked: propTypes.func.isRequired, 119 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 120 | date: propTypes.string.isRequired, 121 | off: propTypes.string.isRequired, 122 | offText: propTypes.string.isRequired, 123 | buttonText: propTypes.string.isRequired 124 | }; 125 | CardFive.propTypes = { 126 | title: propTypes.string.isRequired, 127 | subTitle: propTypes.string.isRequired, 128 | profile: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 129 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 130 | icon: propTypes.string.isRequired, 131 | nbStar: propTypes.number.isRequired, 132 | iconColor: propTypes.string.isRequired 133 | }; 134 | CardSix.propTypes = { 135 | title: propTypes.string.isRequired, 136 | subTitle: propTypes.string.isRequired, 137 | profile: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 138 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 139 | icon1: propTypes.string.isRequired, 140 | iconColor1: propTypes.string.isRequired, 141 | onClicked1: propTypes.func.isRequired, 142 | iconBackground1: propTypes.string.isRequired, 143 | icon2: propTypes.string.isRequired, 144 | iconColor2: propTypes.string.isRequired, 145 | iconBackground2: propTypes.string.isRequired, 146 | onClicked2: propTypes.func.isRequired 147 | }; 148 | CardSeven.propTypes = { 149 | title: propTypes.string.isRequired, 150 | subTitle: propTypes.string.isRequired, 151 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 152 | icon1: propTypes.string.isRequired, 153 | iconColor1: propTypes.string.isRequired, 154 | iconBackground1: propTypes.string.isRequired, 155 | onClicked1: propTypes.func.isRequired, 156 | icon2: propTypes.string.isRequired, 157 | iconColor2: propTypes.string.isRequired, 158 | iconBackground2: propTypes.string.isRequired, 159 | onClicked2: propTypes.func.isRequired 160 | }; 161 | CardEight.propTypes = { 162 | image1: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 163 | image2: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 164 | image3: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired 165 | }; 166 | CardNine.propTypes = { 167 | title: propTypes.string.isRequired, 168 | subTitle: propTypes.string.isRequired, 169 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 170 | price: propTypes.number.isRequired, 171 | onClicked: propTypes.func.isRequired 172 | }; 173 | CardTen.propTypes = { 174 | title: propTypes.string.isRequired, 175 | subTitle: propTypes.string.isRequired, 176 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 177 | price: propTypes.number.isRequired, 178 | star: propTypes.number.isRequired, 179 | starsFor: propTypes.string.isRequired 180 | }; 181 | CardEleven.propTypes = { 182 | price: propTypes.string.isRequired, 183 | title: propTypes.string.isRequired, 184 | subTitle: propTypes.string.isRequired, 185 | stars: propTypes.number.isRequired, 186 | tags: propTypes.arrayOf(propTypes.string), 187 | image1: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 188 | image2: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 189 | backgroundImage: propTypes.oneOfType([propTypes.number, propTypes.object]) 190 | .isRequired, 191 | onClickedShare: propTypes.func.isRequired, 192 | onClickedPlus: propTypes.func.isRequired 193 | }; 194 | CardTwelve.propTypes = { 195 | image: propTypes.oneOfType([propTypes.number, propTypes.object]).isRequired, 196 | title: propTypes.string.isRequired, 197 | subTitle: propTypes.string.isRequired, 198 | viewProgress: propTypes.bool.isRequired, 199 | progress: propTypes.number.isRequired 200 | }; 201 | export { 202 | CardOne, 203 | CardTwo, 204 | CardThree, 205 | CardFour, 206 | CardFive, 207 | CardSix, 208 | CardSeven, 209 | CardEight, 210 | CardNine, 211 | CardTen, 212 | CardEleven, 213 | CardTwelve 214 | }; 215 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | * @flow 7 | */ 8 | 9 | import React, { Component } from "react"; 10 | import { 11 | Platform, 12 | StyleSheet, 13 | Text, 14 | SafeAreaView, 15 | ScrollView, 16 | View 17 | } from "react-native"; 18 | import { 19 | CardOne, 20 | CardTwo, 21 | CardThree, 22 | CardFour, 23 | CardFive, 24 | CardSix, 25 | CardSeven, 26 | CardEight, 27 | CardNine, 28 | CardTen, 29 | CardEleven, 30 | CardTwelve, 31 | CardEcomOne, 32 | CardEcomTwo, 33 | CardEcomThree, 34 | CardEcomFour 35 | } from "react-native-card-ui"; 36 | 37 | 38 | type Props = {}; 39 | export default class App extends Component { 40 | render() { 41 | return ( 42 | 43 | 44 | alert("Has clicked")} 54 | /> 55 | alert("Has clicked")} 65 | /> 66 | 74 | alert(color)} 84 | /> 85 | 86 | 93 | 107 | 117 | 118 | { 120 | alert("Buy now"); 121 | }} 122 | image={{ 123 | uri: 124 | "https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" 125 | }} 126 | date={"24 December 2018"} 127 | off={"-25%"} 128 | offText={ 129 | "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 130 | } 131 | buttonText={"BUY NOW!"} 132 | /> 133 | 134 | 149 | 150 | { 165 | alert("Hello!"); 166 | }} 167 | icon2={"rocket"} 168 | iconColor2={"#fff"} 169 | iconBackground2={"purple"} 170 | onClicked2={() => { 171 | alert("Hello!"); 172 | }} 173 | /> 174 | 175 | { 186 | alert("Hello!"); 187 | }} 188 | icon2={"heart"} 189 | iconColor2={"#fff"} 190 | iconBackground2={"red"} 191 | onClicked2={() => { 192 | alert("Hello!"); 193 | }} 194 | /> 195 | 208 | 209 | { 220 | alert("Hello!"); 221 | }} 222 | /> 223 | 224 | 225 | 236 | 237 | alert("Hello")} 256 | onClickedPlus={() => alert("Hello")} 257 | /> 258 | 259 | 269 | 270 | {/*this.state.people.map((item, i) => {item.name} )*/} 271 | 272 | ); 273 | } 274 | } 275 | 276 | const styles = StyleSheet.create({ 277 | container: { 278 | flex: 1, 279 | justifyContent: "center", 280 | alignItems: "center", 281 | backgroundColor: "#fff" 282 | }, 283 | welcome: { 284 | fontSize: 20, 285 | textAlign: "center", 286 | margin: 10 287 | }, 288 | instructions: { 289 | textAlign: "center", 290 | color: "#333333", 291 | marginBottom: 5 292 | } 293 | }); 294 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-card-ui 2 | 3 | react-native-card-ui is a ui library that help developer to create beautiful react native ios and android application by coding less . 4 | 5 | # Dependences 6 | 7 | react-native-card-ui uses some others libraries like: 8 | 9 | * [react-native-size-matters] - for scale the ui screen 10 | * [react-native-vector-icons] - for icons 11 | 12 | 13 | And of course react-native-card-ui itself is open source with a [public repository][crcui] 14 | on GitHub. 15 | 16 | ### Installation 17 | Install the dependencies need to work well. 18 | 19 | ### Let's install react-native-vector-icons 20 | ```sh 21 | $ cd approot 22 | $ npm install react-native-vector-icons 23 | $ react-native link react-native-vector-icons 24 | ``` 25 | ### Let's install react-native-size-matters 26 | ```sh 27 | $ cd approot 28 | $ npm install --save react-native-size-matters 29 | ``` 30 | ### Now let's install react-native-card-ui 31 | 32 | 33 | ```sh 34 | $ npm install --save react-native-card-ui 35 | 36 | ``` 37 | 38 | ### CardEcomOne 39 | ![alt text][cardEcom1] 40 | ```sh 41 | alert(color)} 51 | /> 52 | 53 | ``` 54 | 55 | ### CardEcomTwo 56 | ![alt text][cardEcom2] 57 | ```sh 58 | 64 | 65 | ``` 66 | 67 | ### CardEcomThree 68 | ![alt text][cardEcom3] 69 | ```sh 70 | alert("Has clicked")} 78 | /> 79 | 80 | ``` 81 | 82 | ### CardEcomFour 83 | ![alt text][cardEcom4] 84 | ```sh 85 | alert("Has clicked")} 93 | /> 94 | 95 | ``` 96 | 97 | ### CardOne 98 | ![alt text][card1] 99 | ```sh 100 | 107 | 108 | ``` 109 | 110 | ### CardTwo 111 | ![alt text][card2] 112 | ```sh 113 | 127 | 128 | ``` 129 | ### CardThree 130 | ![alt text][card3] 131 | ```sh 132 | 142 | 143 | ``` 144 | ### CardFour 145 | ![alt text][card4] 146 | ```sh 147 | { 149 | alert("Buy now"); 150 | }} 151 | image={{ 152 | uri: 153 | "https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" 154 | }} 155 | date={"24 December 2018"} 156 | off={"-25%"} 157 | offText={ 158 | "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 159 | } 160 | buttonText={"BUY NOW!"} 161 | /> 162 | 163 | ``` 164 | ### CardFive 165 | ![alt text][card5] 166 | ```sh 167 | 182 | 183 | ``` 184 | ### CardSix 185 | ![alt text][card6] 186 | ```sh 187 | 188 | { 203 | alert("Hello!"); 204 | }} 205 | icon2={"rocket"} 206 | iconColor2={"#fff"} 207 | iconBackground2={"purple"} 208 | onClicked2={() => { 209 | alert("Hello!"); 210 | }} 211 | /> 212 | 213 | ``` 214 | ### CardSeven 215 | ![alt text][card7] 216 | ```sh 217 | { 228 | alert("Hello!"); 229 | }} 230 | icon2={"heart"} 231 | iconColor2={"#fff"} 232 | iconBackground2={"red"} 233 | onClicked2={() => { 234 | alert("Hello!"); 235 | }} 236 | /> 237 | 238 | ``` 239 | ### CardEight 240 | ![alt text][card8] 241 | ```sh 242 | 255 | 256 | ``` 257 | ### CardNine 258 | ![alt text][card9] 259 | ```sh 260 | { 271 | alert("Hello!"); 272 | }} 273 | /> 274 | 275 | ``` 276 | ### CardTen 277 | ![alt text][card10] 278 | ```sh 279 | 290 | 291 | ``` 292 | ### CardEleven 293 | ![alt text][card11] 294 | ```sh 295 | alert("Hello")} 314 | onClickedPlus={() => alert("Hello")} 315 | /> 316 | 317 | ``` 318 | ### CardTwelve 319 | ![alt text][card12] 320 | ```sh 321 | 331 | 332 | ``` 333 | 334 | [react-native-size-matters]: 335 | [react-native-vector-icons]: 336 | [crcui]: https://github.com/jsbeaudry/react-native-card-ui 337 | [logo]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_1.png 338 | 339 | [cardEcom1]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_1.png 340 | [cardEcom2]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_2.png 341 | [cardEcom3]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_3.png 342 | [cardEcom4]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_4.png 343 | 344 | [card1]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_1.png 345 | [card2]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_2.png 346 | [card3]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_3.png 347 | [card4]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_4.png 348 | [card5]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_5.png 349 | [card6]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_6.png 350 | [card7]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_7.png 351 | [card8]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_8.png 352 | [card9]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_9.png 353 | [card10]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_10.png 354 | [card11]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_11.png 355 | [card12]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_12.png 356 | 357 | 358 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # react-native-card-ui 2 | 3 | react-native-card-ui is a ui library that help developer to create beautiful react native ios and android application by coding less . 4 | 5 | # Dependences 6 | 7 | react-native-card-ui uses some others libraries like: 8 | 9 | * [react-native-size-matters] - for scale the ui screen 10 | * [react-native-vector-icons] - for icons 11 | 12 | 13 | And of course react-native-card-ui itself is open source with a [public repository][crcui] 14 | on GitHub. 15 | 16 | ### Installation 17 | Install the dependencies need to work well. 18 | 19 | ### Let's install react-native-vector-icons 20 | ```sh 21 | $ cd approot 22 | $ npm install react-native-vector-icons 23 | $ react-native link react-native-vector-icons 24 | ``` 25 | ### Let's install react-native-size-matters 26 | ```sh 27 | $ cd approot 28 | $ npm install --save react-native-size-matters 29 | ``` 30 | ### Now let's install react-native-card-ui 31 | 32 | 33 | ```sh 34 | $ npm install --save react-native-card-ui 35 | 36 | ``` 37 | 38 | ### CardEcomOne 39 | ![alt text][cardEcom4] 40 | ```sh 41 | alert(color)} 51 | /> 52 | 53 | ``` 54 | 55 | ### CardEcomTwo 56 | ![alt text][cardEcom3] 57 | ```sh 58 | 64 | 65 | ``` 66 | 67 | ### CardEcomThree 68 | ![alt text][cardEcom2] 69 | ```sh 70 | alert("Has clicked")} 78 | /> 79 | 80 | ``` 81 | 82 | ### CardEcomFour 83 | ![alt text][cardEcom1] 84 | ```sh 85 | alert("Has clicked")} 93 | /> 94 | 95 | ``` 96 | 97 | ### CardOne 98 | ![alt text][card1] 99 | ```sh 100 | 107 | 108 | ``` 109 | 110 | ### CardTwo 111 | ![alt text][card2] 112 | ```sh 113 | 127 | 128 | ``` 129 | ### CardThree 130 | ![alt text][card3] 131 | ```sh 132 | 142 | 143 | ``` 144 | ### CardFour 145 | ![alt text][card4] 146 | ```sh 147 | { 149 | alert("Buy now"); 150 | }} 151 | image={{ 152 | uri: 153 | "https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" 154 | }} 155 | date={"24 December 2018"} 156 | off={"-25%"} 157 | offText={ 158 | "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 159 | } 160 | buttonText={"BUY NOW!"} 161 | /> 162 | 163 | ``` 164 | ### CardFive 165 | ![alt text][card5] 166 | ```sh 167 | 182 | 183 | ``` 184 | ### CardSix 185 | ![alt text][card6] 186 | ```sh 187 | 188 | { 203 | alert("Hello!"); 204 | }} 205 | icon2={"rocket"} 206 | iconColor2={"#fff"} 207 | iconBackground2={"purple"} 208 | onClicked2={() => { 209 | alert("Hello!"); 210 | }} 211 | /> 212 | 213 | ``` 214 | ### CardSeven 215 | ![alt text][card7] 216 | ```sh 217 | { 228 | alert("Hello!"); 229 | }} 230 | icon2={"heart"} 231 | iconColor2={"#fff"} 232 | iconBackground2={"red"} 233 | onClicked2={() => { 234 | alert("Hello!"); 235 | }} 236 | /> 237 | 238 | ``` 239 | ### CardEight 240 | ![alt text][card8] 241 | ```sh 242 | 255 | 256 | ``` 257 | ### CardNine 258 | ![alt text][card9] 259 | ```sh 260 | { 271 | alert("Hello!"); 272 | }} 273 | /> 274 | 275 | ``` 276 | ### CardTen 277 | ![alt text][card10] 278 | ```sh 279 | 290 | 291 | ``` 292 | ### CardEleven 293 | ![alt text][card11] 294 | ```sh 295 | alert("Hello")} 314 | onClickedPlus={() => alert("Hello")} 315 | /> 316 | 317 | ``` 318 | ### CardTwelve 319 | ![alt text][card12] 320 | ```sh 321 | 331 | 332 | ``` 333 | 334 | [react-native-size-matters]: 335 | [react-native-vector-icons]: 336 | [crcui]: https://github.com/jsbeaudry/react-native-card-ui 337 | [logo]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_1.png 338 | 339 | [cardEcom1]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_1.png 340 | [cardEcom2]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_2.png 341 | [cardEcom3]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_3.png 342 | [cardEcom4]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_ecom_4.png 343 | 344 | [card1]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_1.png 345 | [card2]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_2.png 346 | [card3]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_3.png 347 | [card4]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_4.png 348 | [card5]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_5.png 349 | [card6]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_6.png 350 | [card7]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_7.png 351 | [card8]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_8.png 352 | [card9]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_9.png 353 | [card10]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_10.png 354 | [card11]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_11.png 355 | [card12]: https://res.cloudinary.com/parkour/image/upload/v1554050051/cardUI/card_12.png 356 | 357 | 358 | -------------------------------------------------------------------------------- /CardEC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | Text, 4 | View, 5 | Image, 6 | Dimensions, 7 | ImageBackground, 8 | TouchableOpacity, 9 | } from "react-native"; 10 | 11 | 12 | import { scale, verticalScale, moderateScale } from "react-native-size-matters"; 13 | 14 | import Icon from "react-native-vector-icons/FontAwesome"; 15 | 16 | let screenWidth = Dimensions.get("window").width; 17 | let screenHeight = Dimensions.get("window").height; 18 | 19 | 20 | export class CardEcomOne extends Component { 21 | static defaultProps={ 22 | title:"", 23 | price:"0.0", 24 | icon:"star", 25 | nbStar:0, 26 | iconColor:"#000000", 27 | selectColor:"#000000", 28 | colorList:[], 29 | image:require("./placeholderImage.jpg"), 30 | } 31 | constructor(props) { 32 | super(props); 33 | this.state = {color:this.props.selectColor} 34 | } 35 | colorSelect = (color)=>{this.props.getSelectColor(color);this.setState({color:color})} 36 | render() { 37 | const { 38 | title, 39 | price, 40 | image, 41 | icon, 42 | nbStar, 43 | iconColor, 44 | selectColor, 45 | colorList 46 | } = this.props; 47 | const {color} = this.state; 48 | return ( 49 | 68 | 76 | 85 | 86 | 95 | 101 | 102 | 109 | 112 | {title} 113 | 114 | 121 | 122 | {colorList.map((item, index)=>{return ( 123 | this.colorSelect(item)} 125 | key={index} 126 | style={{ 127 | backgroundColor: "#fff", 128 | height:20, 129 | width:20, 130 | marginRight:5, 131 | borderRadius: scale(50), 132 | borderWidth:color==item?6:10, 133 | borderColor:item, 134 | justifyContent: "center", 135 | alignItems: "flex-start" 136 | }} 137 | /> 138 | )})} 139 | 140 | 141 | 142 | 143 | 144 | 147 | {price} 148 | 149 | 150 | 163 | {[1, 2, 3, 4, 5].map((item, index) => ( 164 | = index + 1 ? "#2f89fc" : "#bbb"} 169 | size={scale(15)} 170 | /> 171 | ))} 172 | 173 | 174 | 175 | 176 | ); 177 | } 178 | } 179 | 180 | 181 | export class CardEcomTwo extends Component { 182 | static defaultProps={ 183 | title:"", 184 | price:"0.0", 185 | subTitle:"", 186 | image:require("./placeholderImage.jpg"), 187 | } 188 | 189 | constructor(props) { 190 | super(props); 191 | this.state = {color:"#900c3f"} 192 | } 193 | render() { 194 | const { 195 | title, 196 | subTitle, 197 | price, 198 | image, 199 | } = this.props; 200 | return ( 201 | 220 | 230 | 233 | {title} 234 | 235 | 236 | 239 | {subTitle} 240 | 241 | 244 | {price} 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 261 | 262 | 263 | 264 | ); 265 | } 266 | } 267 | 268 | 269 | export class CardEcomThree extends Component { 270 | static defaultProps={ 271 | title:"", 272 | price:"0.0", 273 | subTitle:"", 274 | buttonText:"Button text", 275 | image:require("./placeholderImage.jpg"), 276 | } 277 | constructor(props) { 278 | super(props); 279 | this.state = {color:"#900c3f"} 280 | } 281 | render() { 282 | const { 283 | title, 284 | subTitle, 285 | price, 286 | image, 287 | buttonText, 288 | buttonColor 289 | } = this.props; 290 | return ( 291 | 310 | 320 | 323 | {title} 324 | 325 | 326 | 329 | {subTitle} 330 | 331 | 334 | {price} 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 350 | {this.props.onClickButton? 351 | this.props.onClickButton()} 353 | style={[ 354 | { 355 | justifyContent: "center", 356 | position:"absolute", 357 | bottom:0, left:20, 358 | borderWidth: 0, 359 | borderColor: "#eee", 360 | alignItems: "center", 361 | alignSelf: "flex-end", 362 | paddingLeft:20, 363 | paddingRight:20, 364 | height: scale(40), 365 | margin: 30, 366 | shadowRadius: 5, 367 | borderRadius: scale(0), 368 | backgroundColor: buttonColor 369 | } 370 | ]} 371 | > 372 | 379 | {buttonText} 380 | 381 | 382 | :null} 383 | 384 | 385 | ); 386 | } 387 | } 388 | 389 | 390 | export class CardEcomFour extends Component { 391 | static defaultProps={ 392 | title:"", 393 | price:"0.0", 394 | subTitle:"", 395 | buttonText:"Button text", 396 | image:require("./placeholderImage.jpg"), 397 | } 398 | constructor(props) { 399 | super(props); 400 | this.state = {color:"#900c3f"} 401 | } 402 | render() { 403 | const { 404 | title, 405 | subTitle, 406 | price, 407 | image, 408 | buttonText, 409 | buttonColor 410 | } = this.props; 411 | return ( 412 | 431 | 432 | 439 | 449 | 452 | {title} 453 | 454 | 455 | 458 | {subTitle} 459 | 460 | 463 | {price} 464 | 465 | 466 | 467 | {this.props.onClickButton? 468 | this.props.onClickButton()} 470 | style={[ 471 | { 472 | justifyContent: "center", 473 | borderWidth: 0, 474 | borderColor: "#eee", 475 | alignItems: "center", 476 | paddingLeft:20, 477 | paddingRight:20, 478 | height: scale(40), 479 | marginTop: 70, 480 | shadowRadius: 5, 481 | borderRadius: scale(0), 482 | backgroundColor: buttonColor 483 | } 484 | ]} 485 | > 486 | 493 | {buttonText} 494 | 495 | 496 | :null} 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | ); 507 | } 508 | } 509 | -------------------------------------------------------------------------------- /Cards.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | Text, 4 | View, 5 | Image, 6 | Dimensions, 7 | Platform, 8 | ProgressViewIOS, 9 | ProgressBarAndroid, 10 | ImageBackground, 11 | TouchableOpacity, 12 | ScrollView 13 | } from "react-native"; 14 | import propTypes from 'prop-types' 15 | import { scale, verticalScale, moderateScale } from "react-native-size-matters"; 16 | 17 | import Icon from "react-native-vector-icons/FontAwesome"; 18 | 19 | let screenWidth = Dimensions.get("window").width; 20 | let screenHeight = Dimensions.get("window").height; 21 | 22 | 23 | export class CardOne extends Component { 24 | static defaultProps={ 25 | width:100, 26 | height:100, 27 | borderRadius:0, 28 | shadowColor:"#000000", 29 | image:require("./placeholderImage.jpg"), 30 | } 31 | constructor(props) { 32 | super(props); 33 | } 34 | 35 | render() { 36 | let { width, height, image, borderRadius, shadowColor } = this.props; 37 | return ( 38 | 54 | 63 | 64 | ); 65 | } 66 | } 67 | 68 | export class CardTwo extends Component { 69 | static defaultProps={ 70 | title:"", 71 | subTitle:"", 72 | profile:require('./placeholderImage.jpg'), 73 | icon:"", 74 | iconColor:"", 75 | image:require("./placeholderImage.jpg") 76 | } 77 | constructor(props) { 78 | super(props); 79 | } 80 | render() { 81 | const { 82 | title, 83 | subTitle, 84 | image, 85 | profile, 86 | icon, 87 | iconColor 88 | } = this.props; 89 | return ( 90 | 109 | 117 | 126 | 127 | 136 | 142 | 151 | 159 | 160 | 167 | 170 | {title} 171 | 172 | 175 | {subTitle} 176 | 177 | 178 | 187 | {icon ? ( 188 | 193 | ) : null} 194 | 195 | 196 | 197 | 198 | ); 199 | } 200 | } 201 | 202 | export class CardThree extends Component { 203 | static defaultProps={ 204 | 205 | } 206 | constructor(props) { 207 | super(props); 208 | } 209 | render() { 210 | return ( 211 | 231 | 237 | 243 | {this.props.profile ? ( 244 | 253 | 261 | 262 | ) : null} 263 | 271 | 278 | {this.props.title} 279 | 280 | {this.props.background ? null : ( 281 | 284 | {this.props.subTitle} 285 | 286 | )} 287 | 288 | 296 | {this.props.icon ? ( 297 | 302 | ) : null} 303 | 304 | 305 | 306 | 307 | ); 308 | } 309 | } 310 | 311 | export class CardFour extends Component { 312 | static defaultProps={ 313 | 314 | } 315 | constructor(props) { 316 | super(props); 317 | } 318 | render() { 319 | return ( 320 | 340 | 347 | 348 | {this.props.date} 349 | 350 | 358 | 366 | {this.props.off} 367 | 368 | 376 | {this.props.offText.substring(0, 100) + "."} 377 | 378 | 379 | this.props.onClicked()} 381 | style={[ 382 | { 383 | justifyContent: "center", 384 | zIndex: 3, 385 | alignItems: "center", 386 | alignSelf: "flex-end", 387 | width: 150, 388 | height: 40, 389 | margin: 20, 390 | shadowRadius: 5, 391 | borderRadius: 40, 392 | backgroundColor: "#774898" 393 | } 394 | ]} 395 | > 396 | 397 | 400 | {"BUY NOW"} 401 | 402 | 403 | 404 | 405 | 406 | ); 407 | } 408 | } 409 | 410 | export class CardFive extends Component { 411 | static defaultProps={ 412 | 413 | image:require("./placeholderImage.jpg") 414 | } 415 | constructor(props) { 416 | super(props); 417 | } 418 | render() { 419 | return ( 420 | 438 | 446 | 455 | 456 | 465 | 471 | 478 | 481 | {this.props.title} 482 | 483 | 486 | {this.props.subTitle} 487 | 488 | 489 | 497 | {this.props.icon ? ( 498 | = 1 ? this.props.iconColor : "#999" 502 | } 503 | size={scale(17)} 504 | style={{ margin: scale(2) }} 505 | /> 506 | ) : null} 507 | {this.props.icon ? ( 508 | = 2 ? this.props.iconColor : "#999" 512 | } 513 | size={scale(17)} 514 | style={{ margin: scale(2) }} 515 | /> 516 | ) : null} 517 | {this.props.icon ? ( 518 | = scale(3) 522 | ? this.props.iconColor 523 | : "#999" 524 | } 525 | size={scale(17)} 526 | style={{ margin: scale(2) }} 527 | /> 528 | ) : null} 529 | {this.props.icon ? ( 530 | = scale(4) 534 | ? this.props.iconColor 535 | : "#999" 536 | } 537 | size={scale(17)} 538 | style={{ margin: scale(2) }} 539 | /> 540 | ) : null} 541 | {this.props.icon ? ( 542 | = scale(5) 546 | ? this.props.iconColor 547 | : "#999" 548 | } 549 | size={scale(17)} 550 | style={{ margin: scale(2) }} 551 | /> 552 | ) : null} 553 | 561 | ({this.props.nbStar + 562 | " star" + 563 | (this.props.nbStar > scale(1) ? "s" : "")}) 564 | 565 | 566 | 567 | 568 | 569 | 570 | ); 571 | } 572 | } 573 | 574 | export class CardSix extends Component { 575 | static defaultProps={ 576 | 577 | } 578 | constructor(props) { 579 | super(props); 580 | } 581 | render() { 582 | return ( 583 | 600 | 608 | 617 | 618 | 619 | 629 | 639 | this.props.onClicked1()} 641 | style={[ 642 | { 643 | justifyContent: "center", 644 | zIndex: 3, 645 | alignItems: "center", 646 | alignSelf: "flex-end", 647 | width: scale(50), 648 | height: scale(50), 649 | margin: 10, 650 | shadowRadius: 5, 651 | borderRadius: scale(40), 652 | backgroundColor: this.props.iconBackground1 653 | } 654 | ]} 655 | > 656 | 661 | 662 | this.props.onClicked2()} 664 | style={[ 665 | { 666 | justifyContent: "center", 667 | zIndex: 3, 668 | alignItems: "center", 669 | alignSelf: "flex-end", 670 | width: scale(50), 671 | height: scale(50), 672 | margin: 10, 673 | shadowRadius: 5, 674 | borderRadius: scale(40), 675 | backgroundColor: this.props.iconBackground2 676 | } 677 | ]} 678 | > 679 | 684 | 685 | 686 | 693 | 700 | 703 | {this.props.title} 704 | 705 | 713 | { 714 | "The essence of minimalism is to eliminate the excess vanity to reveal the original characteristics of the home, from a simple…" 715 | } 716 | 717 | 718 | 719 | 720 | 721 | ); 722 | } 723 | } 724 | 725 | export class CardSeven extends Component { 726 | static defaultProps={ 727 | 728 | } 729 | constructor(props) { 730 | super(props); 731 | } 732 | render() { 733 | return ( 734 | 754 | 764 | 772 | 773 | 774 | 782 | 789 | 796 | 799 | {this.props.title} 800 | 801 | 809 | { 810 | "The essence of minimalism is to eliminate the excess vanity to reveal the original characteristics of the home, from a simple…" 811 | } 812 | 813 | 823 | this.props.onClicked1()} 825 | style={[ 826 | { 827 | justifyContent: "center", 828 | zIndex: 3, 829 | alignItems: "center", 830 | alignSelf: "flex-end", 831 | width: scale(30), 832 | height: scale(30), 833 | margin: 10, 834 | shadowRadius: 5, 835 | borderRadius: scale(15), 836 | backgroundColor: this.props.iconBackground1 837 | } 838 | ]} 839 | > 840 | 845 | 846 | this.props.onClicked2()} 848 | style={[ 849 | { 850 | justifyContent: "center", 851 | zIndex: 3, 852 | alignItems: "center", 853 | alignSelf: "flex-end", 854 | width: scale(30), 855 | height: scale(30), 856 | margin: 10, 857 | shadowRadius: 5, 858 | borderRadius: scale(15), 859 | backgroundColor: this.props.iconBackground2 860 | } 861 | ]} 862 | > 863 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | ); 875 | } 876 | } 877 | 878 | export class CardEight extends Component { 879 | static defaultProps={ 880 | 881 | } 882 | constructor(props) { 883 | super(props); 884 | } 885 | render() { 886 | return ( 887 | 894 | 904 | 910 | 916 | 924 | 930 | 931 | 932 | 938 | 946 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | ); 962 | } 963 | } 964 | 965 | export class CardNine extends Component { 966 | static defaultProps={ 967 | 968 | } 969 | constructor(props) { 970 | super(props); 971 | this.state = { 972 | count: 1, 973 | image: { 974 | uri: 975 | "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg" 976 | } 977 | }; 978 | } 979 | render() { 980 | return ( 981 | 1002 | 1009 | 1018 | 1025 | 1036 | {this.props.title} 1037 | 1038 | 1051 | {this.props.subTitle} 1052 | 1053 | 1061 | 1071 | ${this.props.price} 1072 | 1073 | this.props.onClicked()} 1075 | style={[ 1076 | { 1077 | justifyContent: "center", 1078 | zIndex: 3, 1079 | borderWidth: 1, 1080 | borderColor: "#eee", 1081 | alignItems: "center", 1082 | alignSelf: "flex-end", 1083 | width: scale(80), 1084 | height: scale(30), 1085 | margin: 30, 1086 | shadowRadius: 5, 1087 | borderRadius: scale(40), 1088 | backgroundColor: this.props.iconBackground2 1089 | } 1090 | ]} 1091 | > 1092 | 1099 | Buy now 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | ); 1107 | } 1108 | } 1109 | 1110 | export class CardTen extends Component { 1111 | static defaultProps={ 1112 | 1113 | } 1114 | constructor(props) { 1115 | super(props); 1116 | this.state = { 1117 | count: 1 1118 | }; 1119 | } 1120 | render() { 1121 | return ( 1122 | 1128 | 1151 | 1152 | 1168 | 1179 | 1187 | {this.props.title} 1188 | 1189 | 1198 | ${this.props.price} 1199 | 1200 | 1209 | {this.props.subTitle} 1210 | 1211 | 1212 | 1213 | {[1, 2, 3, 4, 5].map((item, index) => ( 1214 | = index + 1 ? "#ffd553" : "#bbb"} 1219 | size={scale(15)} 1220 | /> 1221 | ))} 1222 | 1231 | {this.props.star} 1232 | {`(${this.props.starsFor})`} 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | ); 1240 | } 1241 | } 1242 | 1243 | export class CardEleven extends Component { 1244 | static defaultProps={ 1245 | 1246 | } 1247 | constructor(props) { 1248 | super(props); 1249 | this.state = { star: 3 }; 1250 | } 1251 | 1252 | render() { 1253 | return ( 1254 | 1264 | 1281 | 1290 | {this.props.price} 1291 | 1292 | 1300 | {this.props.subTitle} 1301 | 1302 | 1310 | {[1, 2, 3, 4, 5].map((item, index) => ( 1311 | = index + 1 ? "#ffd553" : "#bbb"} 1316 | size={13} 1317 | /> 1318 | ))} 1319 | 1328 | {" " + this.props.stars} 1329 | 1330 | 1331 | 1337 | 1346 | 1355 | this.props.onClickedPlus()} 1357 | style={{ 1358 | height: verticalScale(36), 1359 | width: verticalScale(36), 1360 | marginLeft: 5, 1361 | borderRadius: 18, 1362 | backgroundColor: "#eee", 1363 | alignItems: "center", 1364 | justifyContent: "center" 1365 | }} 1366 | > 1367 | 1368 | 1369 | 1370 | 1380 | {this.props.tags.map((item, index) => ( 1381 | 1393 | {item} 1394 | 1395 | ))} 1396 | 1397 | 1398 | 1414 | 1421 | 1430 | 1440 | Lovren Apartment 1441 | 1442 | 1453 | this.props.onClickedShare()} 1455 | name={"share"} 1456 | color={"#fff"} 1457 | size={20} 1458 | style={{}} 1459 | /> 1460 | 1461 | 1462 | 1463 | 1464 | 1473 | 1474 | ); 1475 | } 1476 | } 1477 | 1478 | export class CardTwelve extends Component { 1479 | constructor(props) { 1480 | super(props); 1481 | } 1482 | progressColor = step => { 1483 | if (step < 0.3) { 1484 | return "red"; 1485 | } else if (step >= 0.3 && step < 0.7) { 1486 | return "yellow"; 1487 | } else if (step >= 0.7 && step < 1) { 1488 | return "blue"; 1489 | } else if (step == 1) { 1490 | return "green"; 1491 | } 1492 | }; 1493 | render() { 1494 | return ( 1495 | 1501 | 1516 | 1525 | 1526 | 1534 | {this.props.title.length > 20 1535 | ? this.props.title.substring(0, 15) + "..." 1536 | : this.props.title} 1537 | 1538 | 1539 | 1540 | 1549 | {this.props.subTitle} 1550 | 1551 | 1552 | 1553 | {this.props.viewProgress == true ? ( 1554 | 1555 | {Platform.OS == "ios" ? ( 1556 | 1563 | ) : ( 1564 | 1570 | )} 1571 | 1572 | ) : null} 1573 | 1574 | 1575 | ); 1576 | } 1577 | } 1578 | --------------------------------------------------------------------------------