react-native-inner-shadow
Advanced tools
react-native-inner-shadow gives your React Native apps beautiful inset shadows and highlight effects using React Native Skia. Create depth in your UI with both solid and gradient backgrounds, plus interactive shadows that respond to touches using Reanimated.
RadialShadowView, RadialShadowPressable, and RadialShadowToggletopLeft, topRight, bottomLeft, bottomRight)backgroundColor support through style props with better performance and flexibilityshapes/ directory for improved project structureRadialInnerShadowProps, RadialShadowPressableProps, and RadialShadowTogglePropsfrom and to props to support diagonal directions: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'backgroundColor can now be set via style prop with improved performanceCornerRadii.tsx and ShadowLinearGradientFill.tsx to dedicated src/components/shapes/ directoryRadialGradientProps interface and improved type safety across shadow components# Using npm
npm install react-native-inner-shadow @shopify/react-native-skia react-native-reanimated
# Using Yarn
yarn add react-native-inner-shadow @shopify/react-native-skia react-native-reanimated
# Using Expo
npx expo install react-native-inner-shadow @shopify/react-native-skia react-native-reanimated
Add Reanimated to your Babel config:
// babel.config.js
module.exports = {
presets: [
// Your existing presets
],
plugins: [
// Your existing plugins
'react-native-reanimated/plugin',
],
};
For iOS, install pods:
cd ios && pod install && cd ..
The foundation component for creating shadows with solid backgrounds:
import React from 'react';
import { View, Text } from 'react-native';
import { ShadowView } from 'react-native-inner-shadow';
export default function Example() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ShadowView
inset
backgroundColor="#f0f0f0"
shadowColor="#00000066"
shadowOffset={{ width: 3, height: 3 }}
shadowBlur={5}
style={{
width: 150,
height: 100,
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text>Inset Shadow</Text>
</ShadowView>
</View>
);
}
For linear gradient backgrounds with shadows:
import React from 'react';
import { View, Text } from 'react-native';
import { LinearShadowView } from 'react-native-inner-shadow';
export default function LinearGradientExample() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LinearShadowView
inset
from="top"
to="bottom"
colors={['#FF7A7A', '#FFE08C']}
shadowOffset={{ width: 4, height: 4 }}
shadowBlur={8}
style={{
width: 150,
height: 100,
borderRadius: 16,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: 'white' }}>Linear Gradient</Text>
</LinearShadowView>
</View>
);
}
For radial gradient backgrounds with shadows:
import React from 'react';
import { View, Text } from 'react-native';
import { RadialShadowView } from 'react-native-inner-shadow';
export default function RadialGradientExample() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<RadialShadowView
inset
center={{ x: 0.5, y: 0.5 }}
radius={0.8}
colors={['#4FACFE', '#00F2FE']}
shadowOffset={{ width: 3, height: 3 }}
shadowBlur={6}
style={{
width: 150,
height: 150,
borderRadius: 75,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: 'white', fontWeight: 'bold' }}>Radial Gradient</Text>
</RadialShadowView>
</View>
);
}
Create buttons with satisfying press animations:
import React from 'react';
import { View, Text } from 'react-native';
import { ShadowPressable } from 'react-native-inner-shadow';
export default function PressableExample() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ShadowPressable
shadowBlur={6}
duration={150}
damping={0.8}
style={{
width: 180,
height: 60,
backgroundColor: '#0081a7',
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => console.log('Pressed!')}
>
<Text style={{ color: 'white', fontWeight: 'bold' }}>Press Me</Text>
</ShadowPressable>
</View>
);
}
Toggle components with state-dependent shadows:
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { ShadowToggle } from 'react-native-inner-shadow';
export default function ToggleExample() {
const [isActive, setIsActive] = useState(false);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ShadowToggle
isActive={isActive}
activeColor="#E9C46A"
style={{
width: 120,
height: 60,
backgroundColor: '#fefae0',
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => setIsActive((prev) => !prev)}
>
<Text
style={{
color: isActive ? '#515050' : '#888',
fontWeight: 'bold',
}}
>
{isActive ? 'ON' : 'OFF'}
</Text>
</ShadowToggle>
</View>
);
}
The library provides powerful hooks for advanced customization:
Centralizes shadow configuration for consistent behavior:
import { useShadowProperties } from 'react-native-inner-shadow';
// Inside your component:
const { flatStyle, bgColor, shadowProps, layout, canRenderCanvas, onLayout } =
useShadowProperties({
propWidth,
propHeight,
style,
inset: true,
shadowOffset: { width: 3, height: 3 },
shadowBlur: 5,
propsOnLayout: customOnLayoutHandler,
});
Controls pressable animations with fine-grained control:
import { useAnimatedOffset } from 'react-native-inner-shadow';
// Inside your component:
const {
onPressIn,
onPressOut,
depth,
offset,
reflectedLightOffset,
inset,
blurRadius,
PressedAnimatedStyle,
} = useAnimatedOffset({
offset: shadowProps.shadowOffset,
reflectedLightOffset: shadowProps.reflectedLightOffset,
blurRadius: shadowProps.shadowBlur,
damping: 0.8,
duration: 150,
onPressIn: customPressInHandler,
onPressOut: customPressOutHandler,
});
Customize each corner individually:
<ShadowView
style={{
borderTopLeftRadius: 30,
borderTopRightRadius: 10,
borderBottomRightRadius: 30,
borderBottomLeftRadius: 10,
// Other styles
}}
// Other props
>
<Text>Custom Corners</Text>
</ShadowView>
For best performance:
import React, { memo, useMemo } from 'react';
import { ShadowView } from 'react-native-inner-shadow';
const OptimizedShadowItem = memo(({ title, color }) => {
const styles = useMemo(
() => ({
container: {
width: 150,
height: 100,
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
},
}),
[]
);
return (
<ShadowView backgroundColor={color} inset style={styles.container}>
<Text>{title}</Text>
</ShadowView>
);
});
The library provides default values in src/constants.ts:
| Constant | Value | Description |
|---|---|---|
| CANVAS_PADDING | 50 | Space to prevent shadow clipping |
| BACKGROUND_COLOR | '#FFFFFF' | Default background color |
| SHADOW_OFFSET_SCALE | 2.5 | Default shadow offset scale |
| REFLECTED_LIGHT_OFFSET_SCALE | 2 | Default reflection offset scale |
| SHADOW_BLUR | 2 | Default shadow blur radius |
| REFLECTED_LIGHT_BLUR | 3 | Default reflection blur radius |
| SHADOW_COLOR | '#2F2F2FBC' | Default shadow color |
| REFLECTED_LIGHT_COLOR | '#FFFFFF4D' | Default reflection color |
| DAMPING_DURATION | 150 | Animation duration (ms) |
| DAMPING_RATIO | 0.8 | Animation damping ratio |
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Makes shadow appear inside the component |
| backgroundColor | string | '#FFFFFF' | Background color |
| shadowColor | string | '#2F2F2FBC' | Shadow color |
| shadowOffset | { width: number, height: number } | { width: 2.5, height: 2.5 } | Shadow position |
| shadowBlur | number | 2 | Shadow blur radius |
| reflectedLightColor | string | '#FFFFFF4D' | Highlight color |
| reflectedLightOffset | { width: number, height: number } | Auto-calculated | Highlight position |
| reflectedLightBlur | number | 3 | Highlight blur radius |
| isReflectedLightEnabled | boolean | true | Whether to show highlights |
| style | ViewStyle | - | React Native style object |
| children | ReactNode | - | Component children |
| Prop | Type | Default | Description |
|---|---|---|---|
| from | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | Gradient start direction |
| to | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'bottom' | Gradient end direction |
| colors | Color[] | - | Array of gradient colors |
| Prop | Type | Default | Description |
|---|---|---|---|
| center | { x: number, y: number } | { x: 0.5, y: 0.5 } | Center point of radial gradient (0.0 to 1.0) |
| radius | number | 0.5 | Radius of radial gradient (0.0 to 1.0) |
| colors | Color[] | - | Array of gradient colors |
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 150 | Animation duration (ms) |
| damping | number | 0.8 | How deeply shadows indent on press |
| isReflectedLightEnabled | boolean | true | Whether to show highlights |
| ...ShadowView Props | - | - | All ShadowView props are supported |
| ...PressableProps | - | - | All React Native Pressable props |
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | false | Current toggle state |
| activeColor | string | - | Background color when active |
| ...ShadowPressable Props | - | - | All ShadowPressable props |
Shadows Not Showing
Dependency Errors
Performance Problems
Gradient Not Working
Contributions welcome! Check out our Contributing Guide to get started.
This project is ISC licensed.
Built by ShinMini with ❤️
FAQs
react native inner shadows with linear gradient design UI
The npm package react-native-inner-shadow receives a total of 434 weekly downloads. As such, react-native-inner-shadow popularity was classified as not popular.
We found that react-native-inner-shadow demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.