feat(example): putting graphics instead of buttons only wip

mateoguzmana · Aug 13, 2022 · f1f39ff · f1f39ff
1 parent 127655e
commit f1f39ff
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import {
   Balloons,
   Fireworks,
   FiestaThemes,
   Stars,
   Hearts,
+  Balloon,
+  Star,
 } from 'react-native-fiesta';
 import Content from './components/Content';
 import Button from './components/Button';
+import { Canvas } from '@shopify/react-native-skia';
 
 function App() {
   const [lightMode, setLightMode] = useState(false);
@@ -44,6 +47,30 @@ function App() {
       <Button title="Hearts" onPress={() => setComponentToRender(<Hearts />)} />
 
       {componentToRender}
+
+      <Pressable
+        onPress={() => {
+          setComponentToRender(
+            <Balloons
+              theme={lightMode ? FiestaThemes.dark : FiestaThemes.default}
+            />
+          );
+        }}
+        style={styles.canvas}
+      >
+        <Canvas style={styles.canvas}>
+          <Balloon x={20} y={50} color={'blue'} depth={0.4} />
+        </Canvas>
+      </Pressable>
+
+      <Pressable
+        onPress={() => setComponentToRender(<Stars />)}
+        style={styles.canvas}
+      >
+        <Canvas style={styles.canvas}>
+          <Star x={20} y={50} />
+        </Canvas>
+      </Pressable>
     </View>
   );
 }
@@ -60,6 +87,9 @@ const styles = StyleSheet.create({
   lightMode: {
     backgroundColor: 'white',
   },
+  canvas: {
+    flex: 1,
+  },
 });
 
 export default App;
diff --git a/src/components/Star.tsx b/src/components/Star.tsx
@@ -6,9 +6,10 @@ import { screenHeight } from '../constants/dimensions';
 interface StarProps {
   x: number;
   y: number;
+  autoplay?: boolean;
 }
 
-function Star({ x, y }: StarProps) {
+function Star({ x, y, autoplay = true }: StarProps) {
   const opacity = useValue(1);
 
   const changeOpacity = useCallback(
@@ -20,8 +21,8 @@ function Star({ x, y }: StarProps) {
   );
 
   useEffect(() => {
-    changeOpacity();
-  }, [changeOpacity]);
+    autoplay && changeOpacity();
+  }, [changeOpacity, autoplay]);
 
   return (
     <Group transform={[{ translateY: y }]}>