react-native-image-reflect-shadow

Installation

npm install react-native-image-reflect

Or

yarn add react-native-image-reflect

For Expo

npx expo install expo-blur

npx expo install expo-image

npx expo install expo-linear-gradient

For React native CLI with npm

npm install react-native-blur

npm install react-native-linear-gradient

npm install FastImage

For React native CLI with yarn

yarn install react-native-blur

yarn install react-native-linear-gradient

yarn install FastImage

For React native CLI *ios only

cd ios

pod install

Check example

Github example github

Usage

import { ImageBlurShadowExpo } from 'react-native-image-reflect-shadow';

//shadowBackgroundColor should always be container background color
<ImageBlurShadowExpo
  source={{ uri: 'https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }}
  shadowBackgroundColor={'#fff'}
/>

import { ImageBlurShadow } from 'react-native-image-reflect-shadow';

//shadowBackgroundColor should always be container background color
<ImageBlurShadow
  source={{ uri: 'https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }}
  shadowBackgroundColor={'#fff'}
/>

Props

| Property | Type | Default | Description | | -------------------- | :-----: | :-----: | -------------------------------------------- | | source | string | null | set the image source | | width | number | default| set image width | | height | number | default| set image height | | rounded | number | 0 | set image border radius | | shadowOffset | number | 38 | set/override shadow offset | | shadowBackgroundColor| HexColor |#ffffff| set/override shadow background color | | overlayContainer | component | null | add text overlay on image |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Contact

linkedin

portfolio website