BorderShadow

[William Warke]

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.

[muhammadasjadamin]

I am having the same issue, trying to generate border shadow with inset as true, it is not rendering the content, also giving a warning "Each child in an array or iterator should have a unique "key" prop.. "

[Ajay Kumar]

Add 'key' props to the 'Svg' component inside the node-modules -> react-native-shadow -> lib -> 'BorderShadow.js' file and all the children to BorderShadow component inside the app where you are using it.

[RomainDenizot]

You should give an array of children instead of a simple children

[Dmitriy Zasukha]

in my case I had to give more than 1 children, because of not iterable issue

[Changyu Huang]

Add 'key' props to the 'Svg' component inside the node-modules -> react-native-shadow -> lib -> 'BorderShadow.js' file and all the children to BorderShadow component inside the app where you are using it.

Could you please give me an example?

[Ajay Kumar]

A neat and clean implementation:

import React, { PureComponent } from 'react'
import { Text, View, Dimensions } from 'react-native'
import { BorderShadow } from 'react-native-shadow';

const { width } = Dimensions.get('window');

export default class Example extends PureComponent {
  render() {
    const tabShadowOpt = {
      width,
      height: 80,
      color: 'black',
      border: 5,
      radius: 1,
      opacity: 0.6,
      x: 0,
      y: 5,
      style: {},
      side: 'top',
    };
    return (
      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
        <BorderShadow setting={tabShadowOpt}>
          {[ //the main idea is to pass child in an array
            <View
              style={{
                width,
                height: 80,
                backgroundColor: 'black',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              <Text style={{ color: 'white' }}> textInComponent </Text>
            </View>
          ]}
        </BorderShadow>
      </View>
    )
  }
}

BorderShadow expects array of children instead of a single child. Hope this would help you.

[Changyu Huang]

A neat and clean implementation:

import React, { PureComponent } from 'react'
import { Text, View, Dimensions } from 'react-native'
import { BorderShadow } from 'react-native-shadow';

const { width } = Dimensions.get('window');

export default class Example extends PureComponent {
  render() {
    const tabShadowOpt = {
      width,
      height: 80,
      color: 'black',
      border: 5,
      radius: 1,
      opacity: 0.6,
      x: 0,
      y: 5,
      style: {},
      side: 'top',
    };
    return (
      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
        <BorderShadow setting={tabShadowOpt}>
          {[ //the main idea is to pass child in an array
            <View
              style={{
                width,
                height: 80,
                backgroundColor: 'black',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              <Text style={{ color: 'white' }}> textInComponent </Text>
            </View>
          ]}
        </BorderShadow>
      </View>
    )
  }
}

BorderShadow expects array of children instead of a single child. Hope this would help you.

Thanks! That's cool, do you know how to get rid of the warning saying each child shoud have a key?