Picture Puzzle Component For React Native

A React Native picture puzzle component that works on iOS, Android, and web.

How to use it:

1. Install & import the component.

# Yarn
$ yarn add react-native-picture-puzzle

# NPM
$ npm i react-native-picture-puzzle

import { PicturePuzzle, PuzzlePieces } from 'react-native-picture-puzzle';

2. Create a picture puzzle game on your app.

export default function App() {
  const [hidden, setHidden] = React.useState<number | null>(0); // piece to obscure
  const [pieces, setPieces] = React.useState<PuzzlePieces>([0, 1, 2, 3, 4, 5, 6, 7, 8]);
  const source = React.useMemo(() => ({
    uri: 'puzzle.jpg',
  }), []);
  const renderLoading = React.useCallback((): JSX.Element => <ActivityIndicator />, []);
  const onChange = React.useCallback((nextPieces: PuzzlePieces, nextHidden: number | null): void => {
    setPieces(nextPieces);
    setHidden(nextHidden);
  }, [setPieces, setHidden]);
  return (
    <PicturePuzzle
      size={500}
      pieces={pieces}
      hidden={hidden}
      onChange={onChange}
      source={source}
      renderLoading={renderLoading}
    />
  );
}

Preview:

Download Details:

Author: cawfree

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/cawfree/react-native-picture-puzzle

License: MIT