Applying box shadows in React Native
Using react-native-shadow-2
The react-native-shadow-2 package is an improved version of react-native-shadow by providing more functionalities, Typescript support, and written from scratch to reduce dependencies that affect performance.
Unlike implementing a drop shadow with react-native-drop-shadow, which creates a bitmap representation of its child components, react-native-shadow-2 uses the react-native-svg shadow plugin for consistent implementation across the Android and iOS platforms.
To get started, install both of these packages in the project directory root:
yarn add react-native-svg react-native-shadow-2
#or
npm i react-native-svg react-native-shadow-2
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Shadow } from 'react-native-shadow-2';
export default function App() {
return (
<View style={styles.container}>
<Shadow
distance={15}
startColor={'#54C8E8'}
offset={[3, 4]}>
<View
style={{
borderTopStartRadius: 24,
borderBottomRightRadius:24,
borderRadius: 10,
backgroundColor: '#fff',
}}>
<Text style={{ margin: 20, fontSize: 20 }}>Smarty</Text>
</View>
</Shadow>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:'center'
},
});
import { useLinkProps } from '@react-navigation/native';
ReplyDelete// ...
const LinkButton = ({ to, action, children, ...rest }) => {
const { onPress, ...props } = useLinkProps({ to, action });
const [isHovered, setIsHovered] = React.useState(false);
if (Platform.OS === 'web') {
// It's important to use a `View` or `Text` on web instead of `TouchableX`
// Otherwise React Native for Web omits the `onClick` prop that's passed
// You'll also need to pass `onPress` as `onClick` to the `View`
// You can add hover effects using `onMouseEnter` and `onMouseLeave`
return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{ transitionDuration: '150ms', opacity: isHovered ? 0.5 : 1 }}
{...props}
{...rest}
>
{children}
);
}
return (
{children}
);
};
function Home() {
return Go to Jane's profile;
}