linearGradientProps crashes my app - react-native

Question

What can I do about it? I can't use the code that should work:
<Button
text="SIGNUP"
ViewComponent={require('react-native-linear-gradient').LinearGradient}
linearGradientProps={{
colors: ['red', 'pink', 'red'],
}}
/>
I get this annoyance:
console.error: "You need to pass a ViewComponent to use linearGradientProps !
Example: ViewComponent={require('react-native-linear-gradient')}"
error
index.delta?platform=android&dev=true&minify=false:53482:18
componentDidMount
index.delta?platform=android&dev=true&minify=false:75816:24
proxiedComponentDidMount
index.delta?platform=android&dev=true&minify=false:35849:47
commitLifeCycles
index.delta?platform=android&dev=true&minify=false:9162:47
commitAllLifeCycles
index.delta?platform=android&dev=true&minify=false:10328:31
invokeGuardedCallback
index.delta?platform=android&dev=true&minify=false:2741:21
invokeGuardedCallback
index.delta?platform=android&dev=true&minify=false:2810:40
commitRoot
index.delta?platform=android&dev=true&minify=false:10408:38
completeRoot
index.delta?platform=android&dev=true&minify=false:11329:52
performWorkOnRoot
index.delta?platform=android&dev=true&minify=false:11286:29
performWork
index.delta?platform=android&dev=true&minify=false:11219:32
performSyncWork
index.delta?platform=android&dev=true&minify=false:11200:22
requestWork
index.delta?platform=android&dev=true&minify=false:11127:28
scheduleWorkImpl
index.delta?platform=android&dev=true&minify=false:11000:28
scheduleWork
index.delta?platform=android&dev=true&minify=false:10960:34
enqueueSetState
index.delta?platform=android&dev=true&minify=false:6796:25
setState
index.delta?platform=android&dev=true&minify=false:23663:37
dispatch
index.delta?platform=android&dev=true&minify=false:63019:27
navigate
index.delta?platform=android&dev=true&minify=false:63414:37
_handlePageChanged
index.delta?platform=android&dev=true&minify=false:70273:28
_jumpToIndex
index.delta?platform=android&dev=true&minify=false:70760:35
_handleOnPress
index.delta?platform=android&dev=true&minify=false:72995:22
_handleTabPress
index.delta?platform=android&dev=true&minify=false:72256:32
onPress
index.delta?platform=android&dev=true&minify=false:72058:52
_callTimer
index.delta?platform=android&dev=true&minify=false:15395:17
callTimers
index.delta?platform=android&dev=true&minify=false:15600:19
__callFunction
index.delta?platform=android&dev=true&minify=false:2368:49
<unknown>
index.delta?platform=android&dev=true&minify=false:2138:31
__guardSafe
index.delta?platform=android&dev=true&minify=false:2330:13
callFunctionReturnFlushedQueue
index.delta?platform=android&dev=true&minify=false:2137:21
It seems to be the same issue as this one https://github.com/react-native-training/react-native-elements/issues/873
my settings.gradle
rootProject.name = 'koolbusiness'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-share'
project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':#remobile/react-native-splashscreen'
project(':#remobile/react-native-splashscreen').projectDir = new File(rootProject.projectDir, '../node_modules/#remobile/react-native-splashscreen/android')
include ':app'
my app/build.gradle
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation
* entryFile: "index.android.js",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn${productFlavor}${buildType}'
* // 'devDisabledIn${buildType}'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
defaultConfig {
applicationId "com.koolbusiness"
minSdkVersion 16
targetSdkVersion 22
versionCode 56
versionName "0.0.56a"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
signingConfig signingConfigs.release
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-image-picker')
compile project(':react-native-share')
compile project(':react-native-linear-gradient')
compile project(':react-native-vector-icons')
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
With RNE beta2 instead of beta3 the error message is:
ViewManager: Error while updating prop end
java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58)
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298)
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289)
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:364)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:790)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:164)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
at java.lang.Thread.run(Thread.java:764)
Caused by: java.lang.ClassCastException: com.facebook.react.bridge.ReadableNativeArray cannot be cast to java.lang.Double
at com.facebook.react.bridge.ReadableNativeMap.getDouble(ReadableNativeMap.java:148)
at com.facebook.react.bridge.DynamicFromMap.asDouble(DynamicFromMap.java:66)
at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:57)
at com.facebook.react.uimanager.LayoutShadowNode.setPositionValues(LayoutShadowNode.java:672)
at java.lang.reflect.Method.invoke(Native Method) 
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107) 
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154) 
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58) 
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298) 
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289) 
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:364) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374) 
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162) 
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
at android.os.Handler.handleCallback(Handler.java:790) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) 
at android.os.Looper.loop(Looper.java:164) 
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194) 
at java.lang.Thread.run(Thread.java:764) 
03-29 16:18:49.640 10793-10822/com.koolbusiness E/unknown:ReactNative: Exception in native call
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'end' in shadow node of type: RCTView
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:113)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58)
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298)
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289)
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:364)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:790)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:164)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
at java.lang.Thread.run(Thread.java:764)
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107)
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154) 
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58) 
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298) 
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289) 
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:364) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374) 
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162) 
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
at android.os.Handler.handleCallback(Handler.java:790) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) 
at android.os.Looper.loop(Looper.java:164) 
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194) 
at java.lang.Thread.run(Thread.java:764) 
Caused by: java.lang.ClassCastException: com.facebook.react.bridge.ReadableNativeArray cannot be cast to java.lang.Double
at com.facebook.react.bridge.ReadableNativeMap.getDouble(ReadableNativeMap.java:148)
at com.facebook.react.bridge.DynamicFromMap.asDouble(DynamicFromMap.java:66)
at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:57)
at com.facebook.react.uimanager.LayoutShadowNode.setPositionValues(LayoutShadowNode.java:672)
at java.lang.reflect.Method.invoke(Native Method) 
at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107) 
at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154) 
at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58) 
at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298) 
at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289) 
at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:364) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374) 
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162) 
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
at android.os.Handler.handleCallback(Handler.java:790) 
at android.os.Handler.dispatchMessage(Handler.java:99) 
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) 
at android.os.Looper.loop(Looper.java:164) 
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194) 
at java.lang.Thread.run(Thread.java:764) 
03-29 16:18:49.711 10793-10793/com.koolbusiness D/ReactNative: CatalystInstanceImpl.destroy() start

Answer 1

You need to use require('react-native-linear-gradient').default.
I've updated the example on Github, my bad.
Try this instead (with RNE v1.0.0-beta3):
<Button
title="SIGNUP"
ViewComponent={require('react-native-linear-gradient').default}
linearGradientProps={{
colors: ['#FF9800', '#F44336'],
start: [1, 0],
end: [0.2, 0],
}}
/>
This should give you this result

Answer 2

Give something like this a try? this is their documented example on their github
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});