879479119 / react-native-shadow Goto Github PK

i want add a shadow to all the border of View.

I got this error
/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/SvgViewManager.java:14: error: package com.facebook.yoga does not exist
import com.facebook.yoga.YogaMeasureMode;
^

能有一个可以解决安卓阴影问题的组件真的是太好惹，不过作者会继续维护下去咩

Doesn't work when Animating width and height of BoxShadow. Any ideas how to get it to work?

If only has one component, how to get rid of the warning "Each child in a list should have a unique 'key' prop"

Hello everyone, when use react-native-shadow, i got same error like this :

`Invariant Violation: Native component for "RNSVGLinearGradient" does not exist

This error is located at:
in RNSVGLinearGradient (at LinearGradient.js:29)
in LinearGradient (at BoxShadow.js:63)
in RNSVGDefs (at Defs.js:8)
in Defs (at BoxShadow.js:62)
in RNSVGSvgView (at Svg.js:94)
in Svg (at BoxShadow.js:61)
in RCTView (at View.js:112)
in View (at BoxShadow.js:60)
in BoxShadow (at Card.js:18)
in Card (at loginForm.js:12)
in LoginForm (at authPage.cmp.js:90)
in RCTView (at View.js:112)
in View (at authPage.cmp.js:72)
in AuthPage (created by Connect(AuthPage))
in Connect(AuthPage) (at Navigation.js:83)
in Provider (at Navigation.js:82)
in _class2 (at renderApplication.js:35)
in RCTView (at View.js:112)
in View (at AppContainer.js:102)
in RCTView (at View.js:112)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)`

I installed this package by : npm i --save react-native-shadow and npm i --save react-native-svg.

Here is my code :
const Card = ({style, children}) => { const shadowOpt = { width:100, height:100, color:"#000", border:2, radius:3, opacity:0.2, x:0, y:3, style:{marginVertical:5} } return( <BoxShadow setting={shadowOpt}> <View style={[styles.cardStyle, style]} > { children } </View> </BoxShadow> ) }

Also maybe need these information :
"react": "16.0.0", "react-native": "0.51", "react-native-shadow": "^1.2.2", "react-native-svg": "^6.3.1",

用了后只是一条灰色的线， 没有投影效果，安卓7.1.1

Has anyone managed to get BorderShadow to work? I've tried it a dozen different ways and nothing seems to display properly. Most of the time my contained view completely disappears. If someone could post a working BorderShadow example I'd be extremely grateful. For context, I'm trying to set up an inset shadow on an input field and this looks like my only option.

I get this Error When I try to use it.
Edit: I used settings instead of setting, Sorry.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of BoxShadow. See https://fb.me/react-warning-keys for more information.

BoxShadow._this.render @ BoxShadow.js:32

Platform: Android
"react-native": "0.48.4"
"react-native-shadow": "^1.2.1"

As you can see in the screenshot, only the top left corner, top and left is rendering properly.

My code (the color is a variable which is a hex color code):

let shadowOpt = { width: itemWidth, height: itemHeight, color: gradients[item.fields.gradient][1], border: 10, radius: 10, opacity: 0.3, x: 0, y: 0, style: { margin: Metrics.baseMargin, justifyContent: 'center', alignItems: 'center' } }

<BoxShadow setting={shadowOpt}>

I am wondering if I can set the shadow's width the same as the screen width. Because it's the width for my header. Any ideas?

Hi there, I was curious of any special instructions for expo. I see there is some notes about expo in this thread - #40

Maybe we can add something to readme regarding expo?

I have passed the borderRadius of the child component to the BoxShadow component through the radius property but BoxShadow component does not give an accurate shape.

<BoxShadow 
    setting={{
        width:120,
        height:120,
        color:"#fff",
        border:1,
        radius:60,
        opacity:0.8,
        x:0,
        y:0,
    }}
>
    <Image 
        source={require('../assets/images/hulk.jpeg')}
        resizeMode="cover"
        style={{height:120,width:120,borderRadius:60}}
    />
</BoxShadow>

Here is how its appearing in my device.

Hi, How to set to automatically full width

I want to implement the bordershadow, but don't know how. Please give me a example

For the circle, the shadow is not blending properly from corners

const shadowOpt1 = {
           width:150,
           height:150,
           color:"#000",
           border:30,
           radius:75,
           opacity:0.2,
           x:0,
           y:0,
           style:{marginVertical:0,marginHorizontal:40,}
       }

And if the border-radius is greater then 50% then getting an unexpected result

const shadowOpt1 = {
           width:150,
           height:150,
           color:"#000",
           border:30,
           radius:80,
           opacity:0.2,
           x:0,
           y:0,
           style:{marginVertical:0,marginHorizontal:40,}
       }

I would suggest that you try to find a way to make the shadow blurry at the edges, by adding a blur property to the setting object

如果我的高度不能确定，是动态的需要根据list的数量大小来进行决定的，该怎么用呢，能否提供类似minHeight的属性啊。

i am try yarn add @types/react-native-shadow, but is not found !

无法找到模块“react-native-shadow”的声明文件。“d:/phpstudy_pro/WWW/wuzhai/app/node_modules/react-native-shadow/index.js”隐式拥有 "any" 类型。
  Try `npm install @types/react-native-shadow` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-shadow';`

java.lang.Double cannot be cast to java.lang.Srting

Hey there.

As this package is dead for years, I've made my own from scratch and with some improvements:

https://github.com/SrBrahma/react-native-shadow-2

react-native run-android BUILD FAILED

React Native 0.44

react-native-svg\android\src\main\java\com\horcrux\svg\SvgView.java:130: 错误: 无法将类 TouchEvent中的方法 obtain应用到给定类型;
            TouchEvent.obtain(
                      ^
  需要: int,TouchEventType,MotionEvent,long,float,float,TouchEventCoalescingKeyHelper
  找到: int,TouchEventType,MotionEvent,float,float,TouchEventCoalescingKeyHelper
  原因: 实际参数列表和形式参数列表长度不同
1 个错误

Width and Height Must be > 0
using same as the example.

I want to draw shadow only on the bottom part on the component. How can I do ?

Giving this error while using BorderShadow that is wrapping a View. Code:

<BorderShadow setting={feedShadow}> <View style={styles.feedContainer}> <Text>Test</Text> </View> </BorderShadow>

where 'feedShadow' is:
const feedShadow = { width: screenWidth - 40, color: COLORS.BLACK, border: 10, opacity: 0.1, side: 'top', inset: false };

The error points last line of this code:

return [ <Svg height={lineWidth} width={width+lineWidth} style={{position:"absolute",top:(inset?0:-lineWidth)}}> <Defs> <LinearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">{linear('BorderTop')}</LinearGradient> <LinearGradient id="top-inset" x1="0%" x2="0%" y1="0%" y2="100%">{linear('BorderTopInset')}</LinearGradient> </Defs> <Rect x={0} y={0} width={width} height={lineWidth} fill={url(#top${inset?"-inset":""})} /> </Svg>, ...children ]

Is there any way to contact an author?

I developed a way of also creating cross-platform shadows that won't require setting the width and height as this package looks it requires, but developing it further and publishing it may be a mistake if this package don't actually require setting the width and height.

So, are they required?

i set x,y and appear a box that backgroundColor is black ,how to change the backgroundColor of this box ?

BorderShadow.js

Line 36

change ...children to {...children},

please :)

import React from 'react';
import {View} from 'react-native';
import {BoxShadow, BorderShadow} from 'react-native-shadow';

function Neumorphic() {
const shadowOpt = {
width: 100,
height: 100,
color: '#000',
border: 2,
radius: 10,
opacity: 0.18,
x: 2,
y: 2,
};
const shadowOpt1 = {
width: 100,
height: 100,
color: '#fff',
border: 2,
radius: 10,
opacity: 0.18,
x: -2,
y: -2,
};
const shadowOpt2 = {
width: 100,
color: '#fff',
border: 2,
opacity: 0.18,
side: 'top',
inset: true,
};
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
backgroundColor: '#eee',
}}>
{/*

<View
style={{
width: 100,
height: 100,
backgroundColor: '#fefefe',
borderRadius: 10,
}}
/>

*/}
<BorderShadow setting={{side: 'bottom'}}>
<View
style={{
width: 100,
height: 100,
backgroundColor: '#fefefe',
borderRadius: 10,
}}
/>


);
}

export default Neumorphic;

Hi,
I´m trying to use this library in my project but found this error:

I´m using expo.

Versions:

"react-native": 0.47.1
"react": "16.0.0-alpha.12",
"react-native-shadow": "^1.2.1",
"react-native-svg": "^6.0.0-rc1",

react-native-code-push 没反应了。。。

First I try to link it via rnpm and react-native link.
Then it failed and I try to manually install it following your instructions and still got this error.

"react-native": "0.44.0",
"react-native-shadow": "^1.1.2",

/myNewApp/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/SvgView.java:130: error: method obtain in class TouchEvent cannot be applied to given types;
            TouchEvent.obtain(
                      ^
  required: int,TouchEventType,MotionEvent,long,float,float,TouchEventCoalescingKeyHelper
  found: int,TouchEventType,MotionEvent,float,float,TouchEventCoalescingKeyHelper
  reason: actual and formal argument lists differ in length
1 error
:react-native-svg:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

Hello,

all is in the title, I would like to know if for using this lib I need to know in advance what will be the height and the width of my View? Because it's not my case, my View can have elements added or deleted.

Is there a workaround for my case?

Thank you :)

Error:(14, 25) 错误: 程序包com.facebook.yoga不存在 测试版本： [email protected]

Hello ! Thanks for the repo ! Is there a way to use inset box-shadow ? In the documentation it says that you can use inset only on the border-shadow :( ?

Thanks

In BoxShadow, rectHeight is calculated as height - radius * 2 and rectWidth is calculated as width - radius * 2.
These values can be negative for views with dynamic height. There should be a check for negative values before prefixing a - to a negative number (notice the double -- in the image below) 

react-native-shadow:^1.2.1
react-native-svg:^6.0.0

Report this Warning:Each child in an array or iterator should have a unique "key" prop.
in Svg(at BorderShadow.js:35)

are there props like shadow-radius ? it seems a useful one.

I getting this error when try to use BoxShadow in my project.

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `BorderShadow`. See https://fb.me/react-warning-keys for more information.
in Svg (at BorderShadow.js:35)
in BorderShadow (at index.android.js:334)
in RCTView (at View.js:113)
in View (at index.android.js:333)
in RCTView (at View.js:113)
in View (at CardStack.js:400)
in RCTView (at View.js:113)
in View (at AnimatedImplementation.js:1865)
in AnimatedComponent (at Card.js:28)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:443)
in RCTView (at View.js:113)

I just want to set shadow for Android in React Native. And then I followed this link https://stackoverflow.com/questions/41320131/how-to-set-shadows-in-react-native-for-android.
The steps are from the github: https://github.com/879479119/react-native-shadow.