Skip to content

Commit 01bc46a

Browse files
dimaportenkodimaportenko
committed
fix: add solution for border radius
update Readme and Example solves #1
1 parent 120d334 commit 01bc46a

File tree

14 files changed

+309
-36
lines changed

14 files changed

+309
-36
lines changed

‎README.md‎

Lines changed: 133 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,126 @@ React Native library with Android native view which supports same shadows styles
88
npm install @dimaportenko/react-native-shadow-view
99
```
1010

11+
## Example
12+
<table>
13+
<tr>
14+
<th style='padding-right: 30px'>
15+
<h1>iOS</h1>
16+
<img src="./docs/ios.png" height='600' />
17+
</th>
18+
<th>
19+
<h1>Android</h1>
20+
<img src="./docs/android.jpeg" height='600' />
21+
</th>
22+
</tr>
23+
</table>
24+
1125
## Usage
1226

1327
```js
14-
import { ShadowView } from '@dimaportenko/react-native-shadow-view';
28+
import * as React from 'react';
1529

16-
// ...
30+
import { StyleSheet, View } from 'react-native';
31+
import { ShadowView } from '@dimaportenko/react-native-shadow-view';
1732

18-
<ShadowView style={[styles.box, styles.shadow]} />
33+
export default function App() {
34+
return (
35+
<View style={styles.container}>
36+
<View style={styles.row}>
37+
<ShadowView style={[styles.box1, styles.shadow1]}>
38+
<View style={styles.inner} />
39+
</ShadowView>
40+
<ShadowView style={[styles.box2, styles.shadow2]} />
41+
</View>
42+
<View style={styles.row}>
43+
<ShadowView style={[styles.box3, styles.shadow3]} />
44+
<ShadowView style={[styles.box4, styles.shadow4]} />
45+
</View>
46+
<View style={styles.row}>
47+
<ShadowView style={[styles.box5, styles.shadow5]} />
48+
<ShadowView style={[styles.box6, styles.shadow6]} />
49+
</View>
50+
</View>
51+
);
52+
}
1953

20-
// ...
2154
const styles = StyleSheet.create({
22-
box: {
23-
width: 60,
24-
height: 60,
25-
marginVertical: 20,
55+
container: {
56+
flex: 1,
57+
alignItems: 'center',
58+
justifyContent: 'center',
59+
},
60+
box1: {
61+
width: 100,
62+
height: 100,
63+
margin: 40,
64+
backgroundColor: 'white',
65+
borderRadius: 15,
66+
},
67+
inner: {
68+
width: 100,
69+
height: 100,
70+
borderRadius: 15,
71+
},
72+
box2: {
73+
width: 100,
74+
height: 100,
75+
margin: 40,
76+
backgroundColor: 'gray',
77+
},
78+
box3: {
79+
width: 100,
80+
height: 100,
81+
margin: 40,
82+
backgroundColor: 'yellow',
83+
},
84+
box4: {
85+
width: 100,
86+
height: 100,
87+
margin: 40,
2688
backgroundColor: 'green',
2789
},
28-
shadow: {
90+
box5: {
91+
width: 100,
92+
height: 100,
93+
margin: 40,
94+
backgroundColor: 'pink',
95+
},
96+
box6: {
97+
width: 100,
98+
height: 100,
99+
margin: 40,
100+
backgroundColor: 'blue',
101+
borderRadius: 4,
102+
},
103+
shadow1: {
104+
shadowColor: 'blue',
105+
shadowOffset: {
106+
width: 2,
107+
height: 4,
108+
},
109+
shadowOpacity: 0.6,
110+
shadowRadius: 4.65,
111+
},
112+
shadow2: {
113+
shadowColor: '#0F0',
114+
shadowOffset: {
115+
width: 2,
116+
height: 4,
117+
},
118+
shadowOpacity: 0.6,
119+
shadowRadius: 4.65,
120+
},
121+
shadow3: {
122+
shadowColor: '#000',
123+
shadowOffset: {
124+
width: -2,
125+
height: -4,
126+
},
127+
shadowOpacity: 0.7,
128+
shadowRadius: 5.65,
129+
},
130+
shadow4: {
29131
shadowColor: '#000',
30132
shadowOffset: {
31133
width: 2,
@@ -34,7 +136,29 @@ const styles = StyleSheet.create({
34136
shadowOpacity: 0.6,
35137
shadowRadius: 4.65,
36138
},
139+
shadow5: {
140+
shadowColor: 'pink',
141+
shadowOffset: {
142+
width: -4,
143+
height: 4,
144+
},
145+
shadowOpacity: 1,
146+
shadowRadius: 4.65,
147+
},
148+
shadow6: {
149+
shadowColor: '#000',
150+
shadowOffset: {
151+
width: 2,
152+
height: 4,
153+
},
154+
shadowOpacity: 0.6,
155+
shadowRadius: 4.65,
156+
},
157+
row: {
158+
flexDirection: 'row',
159+
},
37160
});
161+
38162
```
39163

40164
## Contributing

‎android/src/main/java/com/reactnativeshadowview/ShadowView.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class ShadowView(
2020
shadow_with_content = true
2121
shadow_with_css_scale = true
2222
shadow_with_dpi_scale = true
23-
shadow_cast_only_background = true
23+
shadow_cast_only_background = false
2424
shadow_x_shift = 0f
2525
shadow_y_shift = 0f
2626
shadow_radius = 0f

‎docs/android.jpeg‎

19.8 KB
Loading

‎docs/ios.png‎

61.7 KB
Loading

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
android:label="@string/app_name"
1616
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
1717
android:launchMode="singleTask"
18-
android:windowSoftInputMode="adjustResize">
18+
android:windowSoftInputMode="adjustResize"
19+
android:exported="true">
1920
<intent-filter>
2021
<action android:name="android.intent.action.MAIN" />
2122
<category android:name="android.intent.category.LAUNCHER" />

‎example/android/build.gradle‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22

33
buildscript {
44
ext {
5-
buildToolsVersion = "29.0.2"
6-
minSdkVersion = 21
7-
compileSdkVersion = 29
8-
targetSdkVersion = 29
5+
buildToolsVersion = "30.0.2"
6+
minSdkVersion = 23
7+
compileSdkVersion = 31
8+
targetSdkVersion = 31
9+
ndkVersion = "21.4.7075529"
910
}
1011
repositories {
1112
google()
1213
jcenter()
1314
}
1415
dependencies {
15-
classpath("com.android.tools.build:gradle:3.5.3")
16+
classpath("com.android.tools.build:gradle:4.2.2")
1617

1718
// NOTE: Do not place your application dependencies here; they belong
1819
// in the individual module build.gradle files

‎example/android/gradle/wrapper/gradle-wrapper.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
distributionBase=GRADLE_USER_HOME
22
distributionPath=wrapper/dists
3-
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
3+
distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
44
zipStoreBase=GRADLE_USER_HOME
55
zipStorePath=wrapper/dists

‎example/ios/Podfile.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ PODS:
248248
- React-cxxreact (= 0.63.4)
249249
- React-jsi (= 0.63.4)
250250
- React-jsinspector (0.63.4)
251-
- react-native-shadow-view (0.1.0):
251+
- react-native-shadow-view (0.1.1):
252252
- React-Core
253253
- React-RCTActionSheet (0.63.4):
254254
- React-Core/RCTActionSheetHeaders (= 0.63.4)
@@ -466,7 +466,7 @@ SPEC CHECKSUMS:
466466
React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
467467
React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
468468
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
469-
react-native-shadow-view: ac9d50d34736e20cb47d7ab16ad686d152bd0df3
469+
react-native-shadow-view: 643df63ed3270a4997e370c8d9b3ce8a5800fda1
470470
React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
471471
React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
472472
React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@@ -482,4 +482,4 @@ SPEC CHECKSUMS:
482482

483483
PODFILE CHECKSUM: 5cda3fdd031bdc009f3e7ef9d379c5a232249269
484484

485-
COCOAPODS: 1.10.1
485+
COCOAPODS: 1.11.3

‎example/ios/ShadowViewExample.xcodeproj/project.pbxproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@
411411
);
412412
inputPaths = (
413413
"${PODS_ROOT}/Target Support Files/Pods-ShadowViewExample/Pods-ShadowViewExample-frameworks.sh",
414-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
414+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
415415
);
416416
name = "[CP] Embed Pods Frameworks";
417417
outputPaths = (

‎example/src/App.tsx‎

Lines changed: 104 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,20 @@ import { ShadowView } from '@dimaportenko/react-native-shadow-view';
66
export default function App() {
77
return (
88
<View style={styles.container}>
9-
<ShadowView style={[styles.box, styles.shadow]} />
9+
<View style={styles.row}>
10+
<ShadowView style={[styles.box1, styles.shadow1]}>
11+
<View style={styles.inner} />
12+
</ShadowView>
13+
<ShadowView style={[styles.box2, styles.shadow2]} />
14+
</View>
15+
<View style={styles.row}>
16+
<ShadowView style={[styles.box3, styles.shadow3]} />
17+
<ShadowView style={[styles.box4, styles.shadow4]} />
18+
</View>
19+
<View style={styles.row}>
20+
<ShadowView style={[styles.box5, styles.shadow5]} />
21+
<ShadowView style={[styles.box6, styles.shadow6]} />
22+
</View>
1023
</View>
1124
);
1225
}
@@ -17,13 +30,77 @@ const styles = StyleSheet.create({
1730
alignItems: 'center',
1831
justifyContent: 'center',
1932
},
20-
box: {
21-
width: 60,
22-
height: 60,
23-
marginVertical: 20,
33+
box1: {
34+
width: 100,
35+
height: 100,
36+
margin: 40,
37+
backgroundColor: 'white',
38+
borderRadius: 15,
39+
},
40+
inner: {
41+
width: 100,
42+
height: 100,
43+
borderRadius: 15,
44+
},
45+
box2: {
46+
width: 100,
47+
height: 100,
48+
margin: 40,
49+
backgroundColor: 'gray',
50+
},
51+
box3: {
52+
width: 100,
53+
height: 100,
54+
margin: 40,
55+
backgroundColor: 'yellow',
56+
},
57+
box4: {
58+
width: 100,
59+
height: 100,
60+
margin: 40,
2461
backgroundColor: 'green',
2562
},
26-
shadow: {
63+
box5: {
64+
width: 100,
65+
height: 100,
66+
margin: 40,
67+
backgroundColor: 'pink',
68+
},
69+
box6: {
70+
width: 100,
71+
height: 100,
72+
margin: 40,
73+
backgroundColor: 'blue',
74+
borderRadius: 4,
75+
},
76+
shadow1: {
77+
shadowColor: 'blue',
78+
shadowOffset: {
79+
width: 2,
80+
height: 4,
81+
},
82+
shadowOpacity: 0.6,
83+
shadowRadius: 4.65,
84+
},
85+
shadow2: {
86+
shadowColor: '#0F0',
87+
shadowOffset: {
88+
width: 2,
89+
height: 4,
90+
},
91+
shadowOpacity: 0.6,
92+
shadowRadius: 4.65,
93+
},
94+
shadow3: {
95+
shadowColor: '#000',
96+
shadowOffset: {
97+
width: -2,
98+
height: -4,
99+
},
100+
shadowOpacity: 0.7,
101+
shadowRadius: 5.65,
102+
},
103+
shadow4: {
27104
shadowColor: '#000',
28105
shadowOffset: {
29106
width: 2,
@@ -32,4 +109,25 @@ const styles = StyleSheet.create({
32109
shadowOpacity: 0.6,
33110
shadowRadius: 4.65,
34111
},
112+
shadow5: {
113+
shadowColor: 'pink',
114+
shadowOffset: {
115+
width: -4,
116+
height: 4,
117+
},
118+
shadowOpacity: 1,
119+
shadowRadius: 4.65,
120+
},
121+
shadow6: {
122+
shadowColor: '#000',
123+
shadowOffset: {
124+
width: 2,
125+
height: 4,
126+
},
127+
shadowOpacity: 0.6,
128+
shadowRadius: 4.65,
129+
},
130+
row: {
131+
flexDirection: 'row',
132+
},
35133
});

0 commit comments

Comments
 (0)