react-native-inner-shadow v2.0.2

react-native-inner-shadow

English | 한국어

react-native-inner-shadow is a shadow component library that uses React Native Skia to create inset shadows and reflected light (highlight) effects. It supports both solid backgrounds (using ShadowView) and linear gradient backgrounds (using LinearShadowView) for building UIs with inset shadows. Additionally, it provides interactive components that animate press or toggle states using Reanimated.

🎉 *New in v2.0.0: Linear gradients and precise border-radius control for all shadow components!*

• refactor: optimize layout size state updates in shadow components
• fix: fix onLayout prop in shadow components

• Note: For the latest updates and changes, refer to the CHANGELOG

Installation

# Using npm:
npm install react-native-inner-shadow @shopify/react-native-skia react-native-reanimated

# Or using Yarn:
yarn add react-native-inner-shadow @shopify/react-native-skia react-native-reanimated

If you are using Expo, run the following command:

npx expo install react-native-inner-shadow @shopify/react-native-skia react-native-reanimated

❗Important❗ Please ensure that both Skia and Reanimated libraries are correctly installed and configured in your React Native project! For detailed installation instructions, refer to the Skia documentation and the Reanimated installation guide.

Also, add the react-native-reanimated/plugin to your babel.config.js file:

// babel.config.js
module.exports = {
  presets: [
    // Keep your other presets here.
  ],
  plugins: [
    // Your other plugins...
    'react-native-reanimated/plugin',
  ],
};

After installing the dependencies, update the iOS pods by running:

cd ios && bundle exec pod install && cd ..

Table of Contents

• react-native-inner-shadow
  • Installation
  • Table of Contents
  • Preview
  • Features
  • Usage Examples
    • 1. Simple Solid ShadowView
    • 2. Linear Gradient \& Inset Shadow
  • ShadowPressable
    • Example
    • ShadowPressable Props
  • ShadowToggle
    • When to Use
    • Simple Example
    • Key Props
  • API Specification
    • Components
  • Constants
  • Note \& Tip

Preview

Features

• 🎨 Customizable inner shadow effects with reflected light
• 🌈 Support for both solid and linear gradient backgrounds
• 🔄 Smooth press and toggle animations
• 📱 Cross-platform support (iOS & Android)
• 🎯 TypeScript support with comprehensive type definitions
• ⚡️ High performance using React Native Skia

Usage Examples

1. Simple Solid ShadowView

import React from 'react';
import { Text, View } from 'react-native';
import { ShadowView } from 'react-native-inner-shadow';

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <ShadowView
        inset
        width={120}
        height={120}
        backgroundColor="#f0f0f0"
        style={{ borderRadius: 12, alignItems: 'center', justifyContent: 'center' }}
        shadowColor="#00000066"
        shadowOffset={{ width: 2, height: 2 }}
        shadowBlur={5}
        isReflectedLightEnabled
      >
        <Text style={{ textAlign: 'center', color: '#2f2f2f', fontSize: 14 }}>
          inner-shadow
        </Text>
      </ShadowView>
    </View>
  );
}

2. Linear Gradient & Inset Shadow

import React from 'react';
import { View } from 'react-native';
import { LinearShadowView } from 'react-native-inner-shadow';

export default function GradientExample() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <LinearShadowView
        style={{ width: 150, height: 150, borderRadius: 16 }}
        from="top"
        to="bottom"
        colors={['#FF7A7A', '#FFE08C']}
        shadowColor="#22222299"
        shadowOffset={{ width: 4, height: 4 }}
        shadowBlur={8}
        inset>
        {/* Add your content here */}
      </LinearShadowView>
    </View>
  );
}

ShadowPressable

ShadowPressable is a specialized component that provides a "press in, press out" animation, giving the impression of a real button being pressed.

When pressed, the shadow moves inward (creating an inset effect) and returns to its raised state upon release.

This animation is implemented using both Skia and Reanimated.

Example

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { ShadowPressable } from 'react-native-inner-shadow';

export default function PressableExample() {
  return (
    <View style={styles.container}>
      <ShadowPressable style={styles.button} shadowBlur={7} duration={200} damping={1.2}>
        <Text style={styles.label}>Press Me</Text>
      </ShadowPressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  button: { width: 120, height: 63, backgroundColor: '#E5A9A9', borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
  label: { fontSize: 14, fontWeight: 'bold', color: '#F4E4BA' },
});

ShadowPressable Props

Behavior

• Press In: When pressed, the shadow shifts inward (with a negative depth).
• Release: On release, the shadow returns to its raised (default) state.

ShadowToggle

ShadowToggle is a controlled component that toggles the inset shadow based on an external isActive prop.

• When isActive is true, the shadow shifts inward.
• When isActive is false, the shadow remains raised.
• Optionally, you can provide an activeColor to change the background color when the toggle is active.

When to Use

• Use this component for toggle or switch style buttons where the pressed state is controlled externally.
• It is ideal when you want to visually indicate an active/inactive state with both an inset shadow and a background color change.

Simple Example

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ShadowToggle } from 'react-native-inner-shadow';

export default function ToggleExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <View style={styles.container}>
      <ShadowToggle
        style={styles.toggle}
        isActive={isActive}
        activeColor="#FFD700"
        onPress={() => setIsActive(prev => !prev)}>
        <Text style={[ styles.label, { color: isActive ? '#515050' : '#eeebeb' } ]}>
          {isActive ? 'ON' : 'OFF'}
        </Text>
      </ShadowToggle>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  toggle: { width: '30%', aspectRatio: 1.7, borderRadius: 12, backgroundColor: '#06d6a0', justifyContent: 'center', alignItems: 'center' },
  label: { fontWeight: 'bold' },
});

Key Props

Behavior

• When isActive is true, the shadow transitions to an inset state (negative depth).
• When isActive is false, the shadow returns to its raised state.
• If provided, the activeColor will be applied when the toggle is active, changing the background color.

Notes

• Controlled vs. Uncontrolled: It is recommended to control isActive via state (e.g., using useState) and pass it down as a prop. Alternatively, an internal state can be implemented if needed.
• Performance Consideration: When rendering many toggle components, especially on lower-end devices, test performance carefully. Fixed width and height values can help avoid excessive re-measurements.

API Specification

This library provides multiple components for creating inset and toggleable shadows.

Components

1. ShadowView A simple component for solid backgrounds that extends ShadowViewProps.
2. LinearShadowView A component for gradient backgrounds. It extends InnerShadowProps by adding gradient fields (from, to, colors).
3. ShadowPressable A pressable component with animated press effects.
4. ShadowToggle A controlled component that toggles the inset shadow based on the isActive prop.

Constants

This library includes a set of default constants (fallback colors, blur values, etc.) defined in the src/constants.ts file. These constants can be modified if needed.

Note & Tip

1. Reflected Light (Highlight)

   • When inset is true, isReflectedLightEnabled is set to true by default. If the highlight effect appears too strong or too weak, adjust the reflectedLightColor and reflectedLightOffset values to achieve the desired look.

2. Performance Optimization

   • Each shadow component uses a Skia <Canvas>. For best performance, especially when the layout is fixed, specify fixed width and height values to avoid unnecessary re-measurements.

3. Testing

   • When rendering many shadow or toggle components in a list, ensure they work smoothly on lower-end devices. While Skia and Reanimated are generally efficient, performance may drop if many elements without fixed layout sizes are rendered.

4. Version Conflicts

   • This library depends on both Skia and Reanimated. Ensure that the versions of these libraries are compatible with your React Native environment. If you see errors like "react-native-reanimated is not installed!" move the package to your project's peerDependencies and install it at the root.

Enjoy building immersive, 3D-like UI components with react-native-inner-shadow. If you have suggestions, bug reports, or would like to contribute, please open an issue or submit a pull request!