1import React from 'react';
2import { View, StyleProp, ViewStyle } from 'react-native';
3import { ProcessingView } from 'expo-processing';
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 */
12export default <P extends { style?: StyleProp<ViewStyle> } = {}>(title: string, sketch: (p: any) => void) => {
13  const wrapped = (props: P) => (
14    <View
15      style={[
16        {
17          flex: 1,
18          backgroundColor: Colors.tintColor,
19        },
20        props.style,
21      ]}
22    >
23      <ProcessingView style={{ flex: 1 }} sketch={sketch} />
24    </View>
25  );
26  wrapped.title = title;
27  return wrapped;
28};
29