1import { ProcessingView } from 'expo-processing';
2import React from 'react';
3import { View, StyleProp, ViewStyle } from 'react-native';
4
5import { Colors } from '../../constants';
6
7/**
8 * Given a `title` and a processing.js `sketch` function, return a component displaying that Processing sketch.
9 * @param title string
10 * @param sketch processing.js `sketch` function
11 */
12// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
13// eslint-disable-next-line @typescript-eslint/ban-types
14export default <P extends { style?: StyleProp<ViewStyle> } = {}>(
15  title: string,
16  sketch: (p: any) => void
17) => {
18  const wrapped = (props: P) => (
19    <View
20      style={[
21        {
22          flex: 1,
23          backgroundColor: Colors.tintColor,
24        },
25        props.style,
26      ]}>
27      <ProcessingView style={{ flex: 1 }} sketch={sketch} />
28    </View>
29  );
30  wrapped.title = title;
31  return wrapped;
32};
33