react-native-kanjivg

⚠️ This library is in active development. It's API is subject to change in future versions without notice.

React Native SVG components to display Kanji characters in applications. Based on KanjiVG's dataset.

Each component exposes fine-level control over the SVG rendering with features like:

• Showing/hiding individual strokes
• Showing/hiding stroke order
• Styling individual strokes
• Styling stroke order
• Animation support (using something like react-native-reanimated
• lazy component initialization (to prevent loading the entire character dataset)
• etc.

Setup

# Install the package using your package manager of choice
npm install react-native-kanjivg
# or
yarn add react-native-kanjivg
# or
pnpm add react-native-kanjivg
# etc...

Usage

Basic Usage

Rendering a single character

import React from "react";
import { View } from "react-native";

import { Kanji } from "react-native-kanjivg";

export const MyComponent: React.FC = () => {
  return (
    <View>
      <Kanji character={"魂"} width={100} height={100} />
    </View>
  );
};

Style how the character is rendered

Strokes can be styled using the kStroke ("kanjiStroke") prop. This accepts PathProps from react-native-svg which are applied to all the strokes of the character.

Stroke order numbers can be styled using the oNumber prop. This accepts TextProps from react-native-svg which are applied to all numbers of the character.

import React from "react";
import { View } from "react-native";

import { Kanji } from "react-native-kanjivg";

export const MyComponent: React.FC = () => {
  return (
    <View>
      <Kanji
        character={"魂"}
        width={100}
        height={100}
        kStroke={{
          color: "#333",
          strokeWidth: 2,
          // etc.
        }}
        oNumber={{
          // Hide all stroke order numbers
          fill: "transparent",
        }}
      />
    </View>
  );
};

Advanced Usage

Styling specific strokes

To style a specific stroke, you can use the kStrokes prop. This accepts an object with stroke numbers as keys and PathProps from react-native-svg as values. Values provided here will override general set values specified in kStroke.

import React from "react";
import { View } from "react-native";

import { Kanji } from "react-native-kanjivg";

export const MyComponent: React.FC = () => {
  return (
    <View>
      <Kanji
        character={"魂"}
        width={100}
        height={100}
        kStroke={{
          color: "#333",
          strokeWidth: 2,
          // etc.
        }}
        kStrokes={{
          // Make ONLY the second stroke red
          2: {
            color: "red",
          },
        }}
      />
    </View>
  );
};

Animation

Complex animations can be achieved by using the kStrokes prop along with the withCustomComponent function. This function allows you to provide a custom Path component for the stroke to use. This flexibility isn't limited to animations, it effectively allows you complete control over each stroke's rendering.

The following example shows how to make the 2nd stroke "glow":

import React, { useEffect } from "react";
import { View } from "react-native";
import Animated, { Easing, useAnimatedProps, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";

import { Kanji, withCustomComponent } from "react-native-kanjivg";

// Create an animated version of the SVG Path component
const AnimatedPath = Animated.createAnimatedComponent(Path);

// Dark red → bright red color stops
const DARK_RED = "#8B0000";
const BRIGHT_RED = "#FF0000";

// Duration of one half-cycle (dark → bright) in ms
const GLOW_DURATION = 1000;

export const MyComponent: React.FC = () => {
  // Shared value driving the color interpolation (0 → 1 → 0 → …)
  const progress = useSharedValue(0);

  useEffect(() => {
    // Ping-pong between 0 and 1 forever
    progress.value = withRepeat(
      withTiming(1, { duration: GLOW_DURATION, easing: Easing.inOut(Easing.ease) }),
      -1, // infinite repeats
      true, // reverse each cycle
    );
  }, [progress]);

  // Animated props that map progress → stroke color on the first path
  const animatedProps = useAnimatedProps(() => ({
    stroke: interpolateColor(progress.value, [0, 1], [DARK_RED, BRIGHT_RED]),
  }));

  return (
    <View>
      <Kanji
        character={"魂"}
        width={100}
        height={100}
        kStroke={{
          color: "#333",
          strokeWidth: 2,
          // etc.
        }}
        kStrokes={{
          // Make ONLY the second stroke red
          2: withCustomComponent({
            color: "red",
            Component: AnimatedPath,
            animatedProps,
          }),
        }}
      />
    </View>
  );
};

LICENSE

This library is released under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Attribution

This project is based on the KanjiVG SVG dataset.

• Creator: Ulrich Apel
• Copyright: Ulrich Apel
• License: Creative Commons Attribution-Share Alike 3.0
• Source: KanjiVG GitHub Repository