@wave909/react-native-inset-shadow

Inset shadows for react native components

Fork of https://github.com/rohailaltaf/react-native-inset-shadow that adds support for:

• Full Android styling
• TypeScript

Setup

This library is available on npm, install it with: npm i @wave909/react-native-inset-shadow or yarn add @wave909/react-native-inset-shadow

Usage

import InsetShadow from 'react-native-inset-shadow'
import { Text, View } from 'react-native' 

const ViewWithInsetShadow = () => {
  return (
    <View style={{ height: 150 }}>
      <InsetShadow>
        <View style={{ flex: 1, justifyContent: 'center', alignSelf: 'center'}}>
          <Text>This view has an inset shadow!</Text>
        </View>
      </InsetShadow>
    </View>
  )
}

Props

Name	Type	Default	Description
children	node	null	(Required) child components to sit inside the view
left	bool	true	(Optional) show left inset shadow?
top	bool	true	(Optional) show top inset shadow?
right	bool	true	(Optional) show right inset shadow?
bottom	bool	true	(Optional) show bottom inset shadow?
shadowColor	string	black	(Optional) shadow color
shadowOffset	number	1	(Optional) how much to offset the shadow on the horizontal/vertical axis
shadowOpacity	number	0.5	(Optional) shadow opacity
shadowRadius	number	3	(Optional) shadow radius
elevation	number	5	(Optional) shadow elevation for android
containerStyle	object	{}	(Optional) style for the container