react-native-lrc

The react native component that display lyric from lrc format. Inspired by Mebtte's react-lrc

Feature

• Pure javascript, cross platform
• Auto scroll smoothly
• User srcollable
• Custom style

Requirement

• react >= 16.8 with hook
• If used on browser react-native-web >= 0.11

Usage

npm install --save react-native-lrc

import React, { useCallback } from 'react';
import { Text } from 'react-native';
import { Lrc } from 'react-native-lrc';
 
const Lyric = ({ lrc, currentTime }) => {
  const lineRenderer = useCallback(
    ({ lrcLine: { millisecond, content }, index, active }) => (
      <Text
        style={{ textAlign: 'center', color: active ? 'green' : 'inherit' }}>
        {content}
      </Text>
    ),
    [],
  );
  const onCurrentLineChange = useCallback(
    ({ lrcLine: { millisecond, content }, index }) =>
      console.log(index, millisecond, content),
    [],
  );
 
  return (
    <Lrc
      style={{ height: 500 }}
      lrc={lrc}
      currentTime={currentTime}
      lineHeight={16}
      lineRenderer={lineRenderer}
      onCurrentLineChange={onCurrentLineChange}
    />
  );
};
 
export default Lyric;

Lrc Props

prop	description	type	default
lrc	lrc string	string	required
lineRenderer	lrc line render method	({ lrcLine: { id: string, millisecond: number, content: string }, index: number, active: boolean }) => ReactNode	({ lrcLine: { content }, active }) => (<Text style={{ textAlign: 'center', color: active ? 'green' : '#666' }}>{content})
currentTime	current time	number, millisecond	0
autoScroll	whether auto scroll	boolean	true
autoScrollAfterUserScroll	auto scroll after user scroll	number, millisecond	6000
onCurrentLineChange	when current line change	({ index: number, lrcLine: { id: string, millisecond: number, content: string } | null }) => void	null
lineHeight	lrc line height	number	16
activeLineHeight	active lrc line height	number	lineHeight
height	lrc container height	number	500
other props	other react-native ScrollView Props	-	-

Lrc Methods

method	description	type
scrollToCurrentLine	scroll to current line and set auto scroll	() => void
getCurrentLine	get the current lrc line	() => { lrcLine: { id: string, millisecond: number, content: string } | null, index: number }

Other API

parseLrc

import { parseLrc } from 'react-native-lrc';
 
parseLrc(lrcString); // { id: string, millesecond: number, content: string }[]

useLrc

import React from 'react';
import { useLrc } from 'react-native-lrc';
 
const Component = () => {
  const lrcLineList = useLrc(lrcString); // { id: string, millesecond: number, content: string }[]
  // ...
};

Question

Why lrc component do not auto scroll

You probably do not give height to Lrc. The height make Lrc scrollable.

How to prevent user scroll

<Lrc scrollEnabled={false} autoScrollAfterUserScroll={0} {...otherProps} />

Typescript

react-native-lrc export type LrcLine.

import React from 'react';
import { LrcLine } from 'react-native-lrc';
 
const Component = () => {
  const lineRenderer = React.useCallback(
    ({ lrcLine }: { lrcLine: LrcLine }) => {
      // ...
    },
    [],
  );
  // ...
  return <Lrc lineRenderer={lineRenderer} {...otherProps} />;
};

License

MIT