Merge pull request #17 from blazejkustra/feat/new-shader-examples

feat(example): add Thanos dissolve, AI Orb, AI Shimmer, AI Voice and Holo Foil examples

Author: blazejkustra

example/app.json

@@ -29,6 +29,12 @@
             "minSdkVersion": 26
           }
         }
+      ],
+      [
+        "react-native-audio-api",
+        {
+          "iosMicrophonePermission": "RN Effects uses the microphone so the shaders react to your voice."
+        }
       ]
     ]
   }

example/assets/components/ai-orb.png

@@ -15,8 +15,10 @@
     "@react-navigation/native-stack": "7.16.0",
     "expo": "~56.0.9",
     "expo-build-properties": "~56.0.17",
+    "expo-sensors": "~56.0.5",
     "react": "19.2.3",
     "react-native": "0.85.3",
+    "react-native-audio-api": "^0.12.2",
     "react-native-effects": "workspace:*",
     "react-native-gesture-handler": "~2.31.1",
     "react-native-reanimated": "4.3.1",

example/assets/components/assistant.png

@@ -1,5 +1,9 @@
 // App.tsx
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  DefaultTheme,
+  type Theme,
+} from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Platform, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -19,14 +23,32 @@ import HoloCardScreen from './screens/HoloCardScreen';
 import WeatherScreen from './screens/WeatherScreen';
 import ScrollReactiveScreen from './screens/ScrollReactiveScreen';
 import TouchFieldScreen from './screens/TouchFieldScreen';
+import ThanosScreen from './screens/ThanosScreen';
+import AiShimmerScreen from './screens/AiShimmerScreen';
+import AiOrbScreen from './screens/AiOrbScreen';
+import AiVoiceScreen from './screens/AiVoiceScreen';
+import HoloFoilScreen from './screens/HoloFoilScreen';
 import type { RootStackParamList } from './types';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
+// Dark theme so the surface revealed behind/around the cards during a stack
+// transition is black, not React Navigation's default light grey (which flashed
+// white at the screen edges while sliding).
+const navTheme: Theme = {
+  ...DefaultTheme,
+  dark: true,
+  colors: {
+    ...DefaultTheme.colors,
+    background: '#000',
+    card: '#000',
+  },
+};
+
 export default function App() {
   return (
     <GestureHandlerRootView style={styles.root}>
-      <NavigationContainer>
+      <NavigationContainer theme={navTheme}>
         <Stack.Navigator
           screenOptions={{
             headerShown: false,
@@ -75,6 +97,11 @@ export default function App() {
             component={ScrollReactiveScreen}
           />
           <Stack.Screen name="TouchFieldExample" component={TouchFieldScreen} />
+          <Stack.Screen name="ThanosExample" component={ThanosScreen} />
+          <Stack.Screen name="AiShimmerExample" component={AiShimmerScreen} />
+          <Stack.Screen name="AiOrbExample" component={AiOrbScreen} />
+          <Stack.Screen name="AiVoiceExample" component={AiVoiceScreen} />
+          <Stack.Screen name="HoloFoilExample" component={HoloFoilScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     </GestureHandlerRootView>
@@ -84,5 +111,6 @@ export default function App() {
 const styles = StyleSheet.create({
   root: {
     flex: 1,
+    backgroundColor: '#000',
   },
 });