@liuyunjs/react-native-simple-shadow-view
Version:
a Native shadow view for react native, for any React Native platform.
75 lines (56 loc) • 2.33 kB
Markdown
# react-native-simple-shadow-view
This Module is updated version of https://github.com/liuyunjs/react-native-simple-shadow-view
Fixing AndroidX support and adds support for Web and Desktop.
## Getting started
`$ npm install @liuyunjs/react-native-simple-shadow-view --save`
### Mostly automatic installation
`$ react-native link @liuyunjs/react-native-simple-shadow-view`
### Manual installation
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-shadow` and add `RNShadow.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNShadow.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
#### Android
1. Open up `android/app/src/main/java/[...]/MainActivity.java`
- Add `import com.como.RNTShadowView.ShadowViewPackage;` to the imports at the top of the file
- Add `new ShadowViewPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':@liuyunjs/react-native-simple-shadow-view'
project(':@liuyunjs/react-native-simple-shadow-view').projectDir = new File(rootProject.projectDir, '../node_modules/@liuyunjs/react-native-simple-shadow-view/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
implementation project(':@liuyunjs/react-native-simple-shadow-view')
```
4. Insert the following lines inside the defaultConfig block in `android/app/build.gradle`:
```
renderscriptTargetApi 18
renderscriptSupportModeEnabled true
```
## Usage
Set shadow parameters to the ShadowView just as you use shadows in iOS. it will appear on android same as on iOS.
```javascript
import React, { Component } from 'react';
import { ShadowView } from '@liuyunjs/react-native-simple-shadow-view'
class MyView extends Component {
render() {
return (
<ShadowView
style={{
width: 100,
height: 100,
shadowColor: 'black',
shadowOpacity: 1,
shadowRadius: 20,
shadowOffset: { width: 0, height: 0 },
backgroundColor: 'rgba(0,255,0,0.5)',
}}
>
... Texts / Views / etc ...
</ShadowView>
);
}
export default MyView;
```