feat(context): adding fiesta context

mateoguzmana · Sep 4, 2022 · 0a8c951 · 0a8c951
1 parent 8f78919
commit 0a8c951
Show file tree

Hide file tree

Showing 7 changed files with 280 additions and 167 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,117 +1,15 @@
-import React, { ReactChild, useRef, useState } from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {
-  Balloons,
-  Fireworks,
-  FiestaThemes,
-  Stars,
-  Hearts,
-  Balloon,
-  Star,
-  Heart,
-  Firework,
-  EmojiPopper,
-  Emoji,
-  PopperHandler,
-} from 'react-native-fiesta';
-import Content from './components/Content';
-import { Canvas, useFont } from '@shopify/react-native-skia';
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { FiestaProvider } from 'react-native-fiesta';
 
-function App() {
-  const font = useFont(require('./fonts/OpenMoji-Color.ttf'), 30);
-  const [lightMode, setLightMode] = useState(false);
-  const [componentToRender, setComponentToRender] = useState<ReactChild | null>(
-    null
-  );
-  const textColor = lightMode ? styles.textLightColor : styles.textDarkColor;
-  const theme = lightMode ? FiestaThemes.Dark : FiestaThemes.Halloween;
-
-  const heartsRef = useRef<PopperHandler>(null);
-
-  if (!font) return null;
+import { Examples } from './components/Examples';
 
+function App() {
   return (
-    <SafeAreaView
-      style={[styles.container, lightMode ? styles.lightMode : styles.darkMode]}
-    >
-      <Content
-        lightMode={lightMode}
-        setLightMode={() => setLightMode((mode) => !mode)}
-      />
-
-      <View style={styles.column}>
-        <TouchableOpacity
-          onPress={() => {
-            setComponentToRender(<Balloons theme={theme} />);
-          }}
-          style={styles.pressable}
-        >
-          <Canvas style={styles.canvas}>
-            <Balloon x={50} y={50} color={'blue'} depth={0.4} />
-          </Canvas>
-          <Text style={[styles.pressableText, textColor]}>Balloons</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => setComponentToRender(<Stars theme={theme} />)}
-          style={styles.pressable}
-        >
-          <Canvas style={styles.canvas}>
-            <Star x={25} y={30} autoplay={false} />
-          </Canvas>
-          <Text style={[styles.pressableText, textColor]}>Stars</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => heartsRef?.current?.start()}
-          style={styles.pressable}
-        >
-          <Canvas style={styles.canvas}>
-            <Heart x={20} y={20} autoplay={false} />
-          </Canvas>
-          <Text style={[styles.pressableText, textColor]}>Hearts</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => setComponentToRender(<Fireworks />)}
-          style={styles.pressable}
-        >
-          <Canvas style={styles.canvas}>
-            <Firework
-              color="rgba(255, 0, 255, 0.4)"
-              initialPosition={{ x: 50, y: 50 }}
-              fireworkRadius={300}
-              autoHide={false}
-            />
-          </Canvas>
-          <Text style={[styles.pressableText, textColor]}>Fireworks</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() =>
-            setComponentToRender(
-              <EmojiPopper emojis={['🥳', '🪅', '🎉', '🍻']} font={font} />
-            )
-          }
-          style={styles.pressable}
-        >
-          <Canvas style={styles.canvas}>
-            <Emoji emoji="🎉" x={15} y={50} autoHide={false} font={font} />
-          </Canvas>
-
-          <Text style={[styles.pressableText, textColor]}>Emoji Popper</Text>
-        </TouchableOpacity>
-      </View>
-
-      <Hearts theme={theme} autoPlay={false} ref={heartsRef} />
-
-      {componentToRender}
+    <SafeAreaView style={styles.container}>
+      <FiestaProvider>
+        <Examples />
+      </FiestaProvider>
     </SafeAreaView>
   );
 }
@@ -120,36 +18,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  darkMode: {
-    backgroundColor: 'black',
-  },
-  lightMode: {
-    backgroundColor: 'white',
-  },
-  canvas: {
-    height: 80,
-    width: 100,
-  },
-  column: {
-    flex: 1,
-    flexDirection: 'column',
-    paddingTop: 20,
-  },
-  pressable: {
-    marginHorizontal: 8,
-    borderBottomWidth: 1,
-    borderColor: 'rgba(255, 0, 255, 0.4)',
-    padding: 4,
-    alignItems: 'center',
-    flexDirection: 'row',
-    width: '100%',
-  },
-  pressableText: {
-    color: 'white',
-    fontSize: 20,
-  },
-  textLightColor: { color: 'black' },
-  textDarkColor: { color: 'white' },
 });
 
 export default App;
diff --git a/example/src/components/Examples.tsx b/example/src/components/Examples.tsx
@@ -0,0 +1,147 @@
+import React, { ReactChild, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  Fireworks,
+  FiestaThemes,
+  Stars,
+  Balloon,
+  Star,
+  Heart,
+  Firework,
+  EmojiPopper,
+  Emoji,
+  useFiesta,
+  FiestaAnimations,
+} from 'react-native-fiesta';
+import Content from './Content';
+import { Canvas, useFont } from '@shopify/react-native-skia';
+
+export function Examples() {
+  const { runFiestaAnimation } = useFiesta();
+  const font = useFont(require('../fonts/OpenMoji-Color.ttf'), 30);
+  const [lightMode, setLightMode] = useState(false);
+  const [componentToRender, setComponentToRender] = useState<ReactChild | null>(
+    null
+  );
+  const textColor = lightMode ? styles.textLightColor : styles.textDarkColor;
+  const theme = lightMode ? FiestaThemes.Dark : FiestaThemes.Halloween;
+
+  if (!font) return null;
+
+  return (
+    <View
+      style={[styles.container, lightMode ? styles.lightMode : styles.darkMode]}
+    >
+      <Content
+        lightMode={lightMode}
+        setLightMode={() => setLightMode((mode) => !mode)}
+      />
+
+      <View style={styles.column}>
+        {/* Example using Fiesta context */}
+        <TouchableOpacity
+          onPress={() =>
+            runFiestaAnimation({ animation: FiestaAnimations.Balloons })
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Balloon x={50} y={50} color={'blue'} depth={0.4} />
+          </Canvas>
+          <Text style={[styles.pressableText, textColor]}>Balloons</Text>
+        </TouchableOpacity>
+
+        {/* Example using Fiesta context */}
+        <TouchableOpacity
+          onPress={() =>
+            runFiestaAnimation({ animation: FiestaAnimations.Hearts })
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Heart x={20} y={20} autoplay={false} />
+          </Canvas>
+          <Text style={[styles.pressableText, textColor]}>Hearts</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => setComponentToRender(<Stars theme={theme} />)}
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Star x={25} y={30} autoplay={false} />
+          </Canvas>
+          <Text style={[styles.pressableText, textColor]}>Stars</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => setComponentToRender(<Fireworks />)}
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Firework
+              color="rgba(255, 0, 255, 0.4)"
+              initialPosition={{ x: 50, y: 50 }}
+              fireworkRadius={300}
+              autoHide={false}
+            />
+          </Canvas>
+          <Text style={[styles.pressableText, textColor]}>Fireworks</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            setComponentToRender(
+              <EmojiPopper emojis={['🥳', '🪅', '🎉', '🍻']} font={font} />
+            )
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Emoji emoji="🎉" x={15} y={50} autoHide={false} font={font} />
+          </Canvas>
+
+          <Text style={[styles.pressableText, textColor]}>Emoji Popper</Text>
+        </TouchableOpacity>
+      </View>
+
+      {componentToRender}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  darkMode: {
+    backgroundColor: 'black',
+  },
+  lightMode: {
+    backgroundColor: 'white',
+  },
+  canvas: {
+    height: 80,
+    width: 100,
+  },
+  column: {
+    flex: 1,
+    flexDirection: 'column',
+    paddingTop: 20,
+  },
+  pressable: {
+    marginHorizontal: 8,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(255, 0, 255, 0.4)',
+    padding: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+  },
+  pressableText: {
+    color: 'white',
+    fontSize: 20,
+  },
+  textLightColor: { color: 'black' },
+  textDarkColor: { color: 'white' },
+});
diff --git a/src/components/Balloons.tsx b/src/components/Balloons.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Balloon } from './Balloon';
-import { Popper, PopperProps } from './Popper';
+import { Popper, PopperHandler, PopperProps } from './Popper';
 import { screenWidth } from '../constants/dimensions';
 import { getBalloonsYPositions } from '../utils/balloons';
 
@@ -15,23 +15,26 @@ const balloonsYPositions = getBalloonsYPositions(
 
 export interface BalloonsProps extends Omit<PopperProps, 'renderItem'> {}
 
-export function Balloons({ spacing = SPACING, ...props }: BalloonsProps) {
-  return (
-    <Popper
-      spacing={spacing}
-      renderItem={({ x, colors }, index) => (
-        <Balloon
-          key={index}
-          x={x}
-          y={balloonsYPositions[index]}
-          color={colors[index]}
-          r={40}
-          depth={
-            possibleDepths[Math.floor(Math.random() * possibleDepths.length)]
-          }
-        />
-      )}
-      {...props}
-    />
-  );
-}
+export const Balloons = forwardRef<PopperHandler, BalloonsProps>(
+  ({ spacing = SPACING, ...props }: BalloonsProps, ref) => {
+    return (
+      <Popper
+        spacing={spacing}
+        renderItem={({ x, colors }, index) => (
+          <Balloon
+            key={index}
+            x={x}
+            y={balloonsYPositions[index]}
+            color={colors[index]}
+            r={40}
+            depth={
+              possibleDepths[Math.floor(Math.random() * possibleDepths.length)]
+            }
+          />
+        )}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);