Shadow Props
Shadow Props
import React, { useState } from "react";
+import { Text, View, StyleSheet, Slider } from "react-native";
+
+function ShadowPropSlider({ label, value, ...props }) {
+ return (
+ <>
+ <Text>
+ {label} ({value.toFixed(2)})
+ </Text>
+ <Slider step={1} value={value} {...props} />
+ </>
+ );
+}
+
+export default function App() {
+ const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+ const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+ const [shadowRadius, setShadowRadius] = useState(0);
+ const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+ return (
+ <View style={styles.container}>
+ <View
+ style={[
+ styles.square,
+ {
+ shadowOffset: {
+ width: shadowOffsetWidth,
+ height: -shadowOffsetHeight
+ },
+ shadowOpacity,
+ shadowRadius
+ }
+ ]}
+ />
+ <View style={styles.controls}>
+ <ShadowPropSlider
+ label="shadowOffset - X"
+ minimumValue={-50}
+ maximumValue={50}
+ value={shadowOffsetWidth}
+ onValueChange={val => setShadowOffsetWidth(val)}
+ />
+ <ShadowPropSlider
+ label="shadowOffset - Y"
+ minimumValue={-50}
+ maximumValue={50}
+ value={shadowOffsetHeight}
+ onValueChange={val => setShadowOffsetHeight(val)}
+ />
+ <ShadowPropSlider
+ label="shadowRadius"
+ minimumValue={0}
+ maximumValue={100}
+ value={shadowRadius}
+ onValueChange={val => setShadowRadius(val)}
+ />
+ <ShadowPropSlider
+ label="shadowOpacity"
+ minimumValue={0}
+ maximumValue={1}
+ step={0.05}
+ value={shadowOpacity}
+ onValueChange={val => setShadowOpacity(val)}
+ />
+ </View>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "space-around",
+ backgroundColor: "#ecf0f1",
+ padding: 8
+ },
+ square: {
+ alignSelf: "center",
+ backgroundColor: "white",
+ borderRadius: 4,
+ height: 150,
+ shadowColor: "black",
+ width: 150
+ },
+ controls: {
+ paddingHorizontal: 12
+ }
+});
+Reference
+These properties are iOS only - for similar functionality on Android, use the elevation property.
Props
shadowColor
Sets the drop shadow color
diff --git a/docs/next/shadow-props/index.html b/docs/next/shadow-props/index.html index bf017582e1b..c1650628380 100644 --- a/docs/next/shadow-props/index.html +++ b/docs/next/shadow-props/index.html @@ -1,4 +1,4 @@ -Shadow Props
Shadow Props
import React, { useState } from "react";
+import { Text, View, StyleSheet, Slider } from "react-native";
+
+function ShadowPropSlider({ label, value, ...props }) {
+ return (
+ <>
+ <Text>
+ {label} ({value.toFixed(2)})
+ </Text>
+ <Slider step={1} value={value} {...props} />
+ </>
+ );
+}
+
+export default function App() {
+ const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+ const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+ const [shadowRadius, setShadowRadius] = useState(0);
+ const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+ return (
+ <View style={styles.container}>
+ <View
+ style={[
+ styles.square,
+ {
+ shadowOffset: {
+ width: shadowOffsetWidth,
+ height: -shadowOffsetHeight
+ },
+ shadowOpacity,
+ shadowRadius
+ }
+ ]}
+ />
+ <View style={styles.controls}>
+ <ShadowPropSlider
+ label="shadowOffset - X"
+ minimumValue={-50}
+ maximumValue={50}
+ value={shadowOffsetWidth}
+ onValueChange={val => setShadowOffsetWidth(val)}
+ />
+ <ShadowPropSlider
+ label="shadowOffset - Y"
+ minimumValue={-50}
+ maximumValue={50}
+ value={shadowOffsetHeight}
+ onValueChange={val => setShadowOffsetHeight(val)}
+ />
+ <ShadowPropSlider
+ label="shadowRadius"
+ minimumValue={0}
+ maximumValue={100}
+ value={shadowRadius}
+ onValueChange={val => setShadowRadius(val)}
+ />
+ <ShadowPropSlider
+ label="shadowOpacity"
+ minimumValue={0}
+ maximumValue={1}
+ step={0.05}
+ value={shadowOpacity}
+ onValueChange={val => setShadowOpacity(val)}
+ />
+ </View>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "space-around",
+ backgroundColor: "#ecf0f1",
+ padding: 8
+ },
+ square: {
+ alignSelf: "center",
+ backgroundColor: "white",
+ borderRadius: 4,
+ height: 150,
+ shadowColor: "black",
+ width: 150
+ },
+ controls: {
+ paddingHorizontal: 12
+ }
+});
+Reference
+These properties are iOS only - for similar functionality on Android, use the elevation property.
Props
shadowColor
Sets the drop shadow color