docs(example): adding non expo examples into expo setup

mateoguzmana · May 31, 2024 · a85db59 · a85db59
1 parent 9c4787e
commit a85db59
Show file tree

Hide file tree

Showing 10 changed files with 406 additions and 49 deletions.
diff --git a/expo-example/package.json b/expo-example/package.json
@@ -11,6 +11,7 @@
     "start": "expo start"
   },
   "dependencies": {
+    "@expo/react-native-action-sheet": "^4.1.0",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.0",
     "@react-navigation/stack": "^6.3.1",

diff --git a/expo-example/src/App-legacy.tsx b/expo-example/src/App-legacy.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Home } from './screens/Home';
+import { FiestaExample } from './screens/FiestaExample';
+
+export type RootStackParamList = {
+  Home: undefined;
+  FiestaExample: { example: string };
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      {/* @ts-ignore: problems with expo and react version types */}
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="FiestaExample"
+          component={FiestaExample}
+          options={(props) => {
+            const { route } = props;
+
+            return {
+              headerTintColor: 'white',
+              headerStyle: {
+                backgroundColor: '#181D31',
+              },
+              headerTitle: route.params.example,
+            };
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+    // <View
+    //   style={{
+    //     flex: 1,
+    //     justifyContent: 'center',
+    //     alignItems: 'center',
+    //   }}
+    // >
+    //   <Text>Hello</Text>
+    // </View>
+  );
+}
diff --git a/expo-example/src/App.tsx b/expo-example/src/App.tsx
@@ -1,51 +1,24 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { Home } from './screens/Home';
-import { FiestaExample } from './screens/FiestaExample';
+import { useFont } from '@shopify/react-native-skia';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { FiestaProvider } from 'react-native-fiesta';
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+import { Examples } from './components/Examples';
 
-export type RootStackParamList = {
-  Home: undefined;
-  FiestaExample: { example: string };
-};
+function App() {
+  const font = useFont(require('./fonts/OpenMoji-Color.ttf'), 30);
 
-const Stack = createNativeStackNavigator<RootStackParamList>();
+  if (!font) return null;
 
-export default function App() {
   return (
-    <NavigationContainer>
-      {/* @ts-ignore: problems with expo and react version types */}
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={Home}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="FiestaExample"
-          component={FiestaExample}
-          options={(props) => {
-            const { route } = props;
-
-            return {
-              headerTintColor: 'white',
-              headerStyle: {
-                backgroundColor: '#181D31',
-              },
-              headerTitle: route.params.example,
-            };
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
-    // <View
-    //   style={{
-    //     flex: 1,
-    //     justifyContent: 'center',
-    //     alignItems: 'center',
-    //   }}
-    // >
-    //   <Text>Hello</Text>
-    // </View>
+    <SafeAreaProvider>
+      <ActionSheetProvider>
+        <FiestaProvider font={font}>
+          <Examples />
+        </FiestaProvider>
+      </ActionSheetProvider>
+    </SafeAreaProvider>
   );
 }
+
+export default App;
diff --git a/expo-example/src/components/Examples.tsx b/expo-example/src/components/Examples.tsx
@@ -0,0 +1,256 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Canvas, useFont } from '@shopify/react-native-skia';
+import {
+  Fireworks,
+  FiestaThemes,
+  Stars,
+  //   Balloon,
+  Star,
+  Heart,
+  Firework,
+  EmojiPopper,
+  Emoji,
+  useFiesta,
+  FiestaAnimations,
+  PopperDirection,
+  Confettis,
+  Confetti,
+} from 'react-native-fiesta';
+import { useActionSheet } from '@expo/react-native-action-sheet';
+import Header from './Header';
+
+export function Examples() {
+  const { runFiestaAnimation } = useFiesta();
+  const { showActionSheetWithOptions } = useActionSheet();
+  const font = useFont(require('../fonts/OpenMoji-Color.ttf'), 30);
+  const insets = useSafeAreaInsets();
+
+  const [componentToRender, setComponentToRender] =
+    useState<React.ReactNode | null>(null);
+  // this dynamic key is mostly to allow executing the examples multiple times allowing re-rendering
+  const [dynamicKey, setDynamicKey] = useState(0);
+  const [theme, setTheme] = useState(0);
+
+  const onChangeComponent = useCallback((component: React.ReactNode) => {
+    setDynamicKey((key) => key + 1);
+    setComponentToRender(component);
+  }, []);
+
+  const onPressThemeChange = useCallback(() => {
+    const options = Object.keys(FiestaThemes);
+    showActionSheetWithOptions(
+      {
+        options,
+      },
+      (selectedIndex) => {
+        if (selectedIndex) {
+          setTheme(selectedIndex);
+        }
+      }
+    );
+  }, [showActionSheetWithOptions]);
+
+  const selectedTheme = useMemo(
+    () =>
+      FiestaThemes[
+        Object.keys(FiestaThemes)[theme] as keyof typeof FiestaThemes
+      ],
+    [theme]
+  );
+
+  if (!font) return null;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { paddingTop: insets.top, paddingBottom: insets.bottom },
+      ]}
+    >
+      <Header onPressThemeChange={onPressThemeChange} theme={theme} />
+
+      <ScrollView style={styles.column}>
+        {/* <TouchableOpacity
+          onPress={() =>
+            runFiestaAnimation({
+              animation: FiestaAnimations.Balloons,
+              theme: selectedTheme,
+            })
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Balloon x={50} y={50} depth={0.4} autoPlay={false} />
+          </Canvas>
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Balloons (using Fiesta context)
+          </Text>
+        </TouchableOpacity> */}
+
+        <TouchableOpacity
+          onPress={() =>
+            runFiestaAnimation({
+              animation: FiestaAnimations.Hearts,
+              theme: selectedTheme,
+              direction: PopperDirection.Ascending,
+            })
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Heart x={20} y={20} autoplay={false} />
+          </Canvas>
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Hearts (using Fiesta context with options)
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            onChangeComponent(<Stars theme={selectedTheme} key={dynamicKey} />)
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Star x={25} y={30} autoplay={false} />
+          </Canvas>
+          <Text style={[styles.pressableText, styles.textColor]}>Stars</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            onChangeComponent(
+              <Fireworks
+                numberOfFireworks={7}
+                key={dynamicKey}
+                theme={selectedTheme}
+              />
+            )
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Firework
+              color="rgba(255, 0, 255, 0.4)"
+              initialPosition={{ x: 50, y: 50 }}
+              fireworkRadius={150}
+              autoHide={false}
+            />
+          </Canvas>
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Fireworks
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            onChangeComponent(
+              <Fireworks
+                numberOfFireworks={7}
+                numberOfParticles={80}
+                fireworkRadius={2000}
+                particleRadius={0.1}
+                key={dynamicKey}
+                theme={selectedTheme}
+              />
+            )
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Firework
+              color="rgba(164, 164, 164, 0.4)"
+              initialPosition={{ x: 50, y: 50 }}
+              fireworkRadius={450}
+              numberOfParticles={70}
+              autoHide={false}
+            />
+          </Canvas>
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Fireworks (extreme mode)
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            onChangeComponent(
+              <EmojiPopper
+                emojis={['🥳', '🪅', '🎉', '🍻']}
+                font={font}
+                direction={PopperDirection.Ascending}
+                key={dynamicKey}
+                theme={selectedTheme}
+              />
+            )
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Emoji emoji="🎉" x={15} y={50} autoHide={false} font={font} />
+          </Canvas>
+
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Emoji Popper (ascending)
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() =>
+            onChangeComponent(
+              <Confettis theme={selectedTheme} key={dynamicKey} />
+            )
+          }
+          style={styles.pressable}
+        >
+          <Canvas style={styles.canvas}>
+            <Confetti />
+          </Canvas>
+
+          <Text style={[styles.pressableText, styles.textColor]}>
+            Confettis
+          </Text>
+        </TouchableOpacity>
+      </ScrollView>
+
+      {componentToRender}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#181D31',
+  },
+  canvas: {
+    height: 80,
+    width: 100,
+  },
+  column: {
+    flex: 1,
+    flexDirection: 'column',
+    paddingTop: 20,
+  },
+  pressable: {
+    marginHorizontal: 8,
+    borderBottomWidth: 1,
+    borderColor: '#495579',
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+  },
+  pressableText: {
+    color: 'white',
+    fontSize: 20,
+    maxWidth: '70%',
+  },
+  textColor: { color: 'white' },
+});