feat: final changes for the drawer component

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/FloatingView/common.ts

@@ -1,4 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../../..';
 
 export enum FloatingViewAlignment {
   // Aligns the floating view to the top left corner.
@@ -29,14 +30,16 @@ export function getSnapAlignments({
 }): SnapAlignments {
   const right = rootContainerDimensions.width - floatingViewDimensions.width;
   const bottom = rootContainerDimensions.height - floatingViewDimensions.height;
+  const { theme } = useTheme();
+  const top = theme.floatingParticipantsView.topPosition || 0;
   const snapOffsets = {
     [FloatingViewAlignment.topLeft]: {
       x: 0,
-      y: 0,
+      y: top,
     },
     [FloatingViewAlignment.topRight]: {
       x: right,
-      y: 0,
+      y: top,
     },
     [FloatingViewAlignment.bottomLeft]: {
       x: 0,

packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import { Z_INDEX, defaultEmojiReactions } from '../../../constants';
@@ -32,6 +32,7 @@ export const ParticipantReaction = ({
 }: ParticipantReactionProps) => {
   const { reaction, sessionId } = participant;
   const call = useCall();
+  const styles = useStyles();
   const {
     theme: { typefaces, participantReaction },
   } = useTheme();
@@ -48,12 +49,6 @@ export const ParticipantReaction = ({
     };
   }, [call, hideAfterTimeoutInMs, sessionId, reaction]);
 
-  // const currentReaction = {
-  //   type: 'reaction',
-  //   emoji_code: ':rolling_on_the_floor_laughing:',
-  //   custom: {},
-  //   icon: '🤣',
-  // };
   const currentReaction =
     reaction &&
     supportedReactions.find(
@@ -62,25 +57,34 @@ export const ParticipantReaction = ({
     );
 
   return (
-    <View style={[styles.container, participantReaction.container]}>
-      <Text style={[participantReaction.reaction, typefaces.heading6]}>
-        {currentReaction?.icon}
-      </Text>
-    </View>
+    currentReaction?.icon != null && (
+      <View style={[styles.container, participantReaction.container]}>
+        <Text style={[participantReaction.reaction, typefaces.heading6]}>
+          {currentReaction?.icon}
+        </Text>
+      </View>
+    )
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-end',
-    marginRight: 10,
-    marginTop: 10,
-    height: 44,
-    width: 44,
-    borderRadius: 8,
-    backgroundColor: 'gray',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignSelf: 'flex-end',
+          marginRight: theme.variants.spacingSizes.md,
+          marginTop: theme.variants.spacingSizes.md,
+          height: theme.variants.roundButtonSizes.md,
+          width: theme.variants.roundButtonSizes.md,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          backgroundColor: theme.colors.sheetOverlay,
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

packages/react-native-sdk/src/constants/index.ts

@@ -35,7 +35,7 @@ export const defaultEmojiReactions: StreamReactionType[] = [
   },
   {
     type: 'reaction',
-    emoji_code: ':fireworks:',
+    emoji_code: ':tada:',
     custom: {},
     icon: '🎉',
   },

packages/react-native-sdk/src/theme/theme.ts

@@ -95,6 +95,7 @@ export type Theme = {
     container: ViewStyle;
     participantViewContainer: ViewStyle;
     videoFallback: ViewStyle;
+    topPosition: number;
   };
   chatButton: {
     container: ViewStyle;
@@ -479,6 +480,7 @@ export const defaultTheme: Theme = {
     container: {},
     participantViewContainer: {},
     videoFallback: {},
+    topPosition: 0,
   },
   participantLabel: {
     container: {},

sample-apps/react-native/dogfood/src/assets/RaiseHand.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+const RaiseHand = ({ color, size }: Props) => (
+  <Svg viewBox={`0 0 20 20`} width={size} height={size}>
+    <Path
+      d="M18.2095 13.3333C18.2095 17.0167 15.2262 20 11.5428 20C8.82616 20 6.38449 18.3417 5.37616 15.8167L2.85116 9.475C2.59283 8.81667 3.20949 8.15833 3.88449 8.375L4.54283 8.59167C5.00949 8.74167 5.39283 9.1 5.57616 9.55833L6.64283 12.2333C6.70949 12.4 6.85949 12.5 7.02616 12.5H7.37616V2.70833C7.37616 2.13333 7.84283 1.66667 8.41783 1.66667C8.99283 1.66667 9.45949 2.13333 9.45949 2.70833V9.58333C9.45949 9.81667 9.64283 10 9.87616 10C10.1095 10 10.2928 9.81667 10.2928 9.58333V1.04167C10.2928 0.466667 10.7595 0 11.3345 0C11.9095 0 12.3762 0.466667 12.3762 1.04167V9.58333C12.3762 9.81667 12.5595 10 12.7928 10C13.0262 10 13.2095 9.81667 13.2095 9.58333V2.29167C13.2095 1.71667 13.6762 1.25 14.2512 1.25C14.8262 1.25 15.2928 1.71667 15.2928 2.29167V9.58333C15.2928 9.81667 15.4762 10 15.7095 10C15.9428 10 16.1262 9.81667 16.1262 9.58333V4.79167C16.1262 4.21667 16.5928 3.75 17.1678 3.75C17.7428 3.75 18.2095 4.21667 18.2095 4.79167V13.3333Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default RaiseHand;