879479119 / react-native-shadow

A SVG shadow component powered with react-native-svg,which can provide shadow on Android like iOS ^_^

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can anyone give me an example for bordershadow?

changyu2hao opened this issue · comments

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

Here is an example for you:

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

export const Example = props => {
  const screenWidth = Math.round(Dimensions.get('window').width); //TODO: handle rotation
  const shadowOpt = {
    side: 'top',
    width: screenWidth,
    opacity: 0.07,
    border: 3.5,
    color: '#000',
    style: styles.container,
  };

  return (
    <BorderShadow setting={shadowOpt}>
      <View style={styles.row}>
        <Text>example</Text>
      </View>
      <View />
    </BorderShadow>
  ); // Second view is necessary due to a bug that prevents BorderShadow from working with non-array children
};

const styles = StyleSheet.create({
  container: {
    height: 40,
    backgroundColor: '#FFF',
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
});