chore: add secret menu to SampleApp

Author: isekovanic

examples/SampleApp/src/components/MenuDrawer.tsx

@@ -1,12 +1,21 @@
-import React from 'react';
-import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Image,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Pressable,
+  View,
+} from 'react-native';
 import { Edit, Group, User, useTheme } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';
+import { SecretMenu } from './SecretMenu.tsx';
 
 import type { DrawerContentComponentProps } from '@react-navigation/drawer';
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
   avatar: {
     borderRadius: 20,
     height: 40,
@@ -44,12 +53,26 @@ const styles = StyleSheet.create({
 });
 
 export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
+  const [secretMenuPressCounter, setSecretMenuPressCounter] = useState(0);
+  const [secretMenuVisible, setSecretMenuVisible] = useState(false);
+
   const {
     theme: {
       colors: { black, grey, white },
     },
   } = useTheme();
 
+  useEffect(() => {
+    if (!secretMenuVisible && secretMenuPressCounter >= 7) {
+      setSecretMenuVisible(true);
+    }
+  }, [secretMenuVisible, secretMenuPressCounter]);
+
+  const closeSecretMenu = useCallback(() => {
+    setSecretMenuPressCounter(0);
+    setSecretMenuVisible(false);
+  }, []);
+
   const { chatClient, logout } = useAppContext();
 
   if (!chatClient) {
@@ -59,7 +82,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
   return (
     <View style={[styles.container, { backgroundColor: white }]}>
       <SafeAreaView style={{ flex: 1 }}>
-        <View style={[styles.userRow]}>
+        <Pressable onPress={() => setSecretMenuPressCounter(c => c + 1)} style={[styles.userRow]}>
           <Image
             source={{
               uri: chatClient.user?.image,
@@ -76,9 +99,10 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
           >
             {chatClient.user?.name}
           </Text>
-        </View>
+        </Pressable>
         <View style={styles.menuContainer}>
           <View>
+            <SecretMenu visible={secretMenuVisible} close={closeSecretMenu} />
             <TouchableOpacity
               onPress={() => navigation.navigate('NewDirectMessagingScreen')}
               style={styles.menuItem}

examples/SampleApp/src/components/SecretMenu.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { LayoutChangeEvent, Text, TouchableOpacity, View } from 'react-native';
+import { Close, Notification, useTheme } from 'stream-chat-react-native';
+import { styles as menuDrawerStyles } from './MenuDrawer.tsx';
+
+export const SlideInView = ({ visible, children }: { visible: boolean; children: React.ReactNode }) => {
+  const animatedHeight = useSharedValue(0);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    animatedHeight.value = height;
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: withSpring(visible ? animatedHeight.value : 0, { damping: 10 }),
+    opacity: withTiming(visible ? 1 : 0, { duration: 500 }),
+  }), [visible]);
+
+  return (
+    <Animated.View style={animatedStyle}>
+      {visible ? <View onLayout={onLayout} style={{ position: 'absolute', width: '100%' }}>
+        {children}
+      </View> : null}
+    </Animated.View>
+  );
+};
+
+export const SecretMenu = ({ close, visible }: { close: () => void, visible: boolean }) => {
+  const {
+    theme: {
+      colors: { black, grey },
+    },
+  } = useTheme();
+
+  return <SlideInView visible={visible} >
+    <TouchableOpacity style={menuDrawerStyles.menuItem}>
+      <Notification height={24} pathFill={grey} width={24} />
+      <Text
+        style={[
+          menuDrawerStyles.menuTitle,
+          {
+            color: black,
+          },
+        ]}
+      >
+        BRUH
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity onPress={close} style={menuDrawerStyles.menuItem}>
+      <Close height={24} pathFill={grey} width={24} />
+      <Text
+        style={[
+          menuDrawerStyles.menuTitle,
+          {
+            color: black,
+          },
+        ]}
+      >
+        Close
+      </Text>
+    </TouchableOpacity>
+    <View style={menuDrawerStyles.menuItem}>
+      <View style={{ backgroundColor: grey, height: 1, width: '100%', opacity: 0.2 }}/>
+    </View>
+  </SlideInView>;
+};