function Example() {
  const colorizedSource = useMemo(() => colorizeLottie(
    LOTTIE_SOURCE,
    {
      // tick.Group 1.Stroke 1
      "layers.1.shapes.0.it.1.c.k": "#5b1d61",
      // circle-blue.Group 1.Stroke 1
      "layers.2.shapes.0.it.1.c.k": "#007738",
    }
  ), []);

  return <LottieView source={colorizedSource} style={{ width: 300, height: 300 }} />;
}

import produce from 'immer';
import { set } from 'lodash';
import tinycolor from 'tinycolor2';

// values of colorByPath can be falsy to no-op
function colorizeLottie(json, colorByPath) {
  const nextJson = JSON.parse(JSON.stringify(json));

  Object.entries(colorByPath).forEach(([path, color]) => {
    // incase undefined/null/falsy is passed to color
    if (!color) return;
    const rgbPercentages = tinycolor(color).toPercentageRgb();
    const rFraction = parseInt(rgbPercentages.r, 10) / 100;
    const gFraction = parseInt(rgbPercentages.g, 10) / 100;
    const bFraction = parseInt(rgbPercentages.b, 10) / 100;

    const pathParts = path.split('.');
    set(nextJson, [...pathParts, 0], rFraction);
    set(nextJson, [...pathParts, 1], gFraction);
    set(nextJson, [...pathParts, 2], bFraction);
  });

  return nextJson;
}