Description:
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:
