@100mslive/react-native-room-kit 0.0.4 → 0.2.0

package/src/Icons/Participants/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface ParticipantsIconProps extends Omit<ImageProps, 'source'> {}
 
 export const ParticipantsIcon: React.FC<ParticipantsIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/participants.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Pencil/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface PencilIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PencilIcon: React.FC<PencilIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/pencil.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Pin/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface PinIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PinIcon: React.FC<PinIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/pin.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Radio/index.tsx

@@ -1,27 +1,76 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
-import type { ImageProps } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
+import type { ImageProps, StyleProp, ViewStyle } from 'react-native';
 
-interface RadioIconProps extends Omit<ImageProps, 'source'> {}
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+type RadioIconProps = Omit<ImageProps, 'source'> &
+  (
+    | {
+        size?: 'normal';
+      }
+    | {
+        size?: 'extra-large';
+        containerStyle?: StyleProp<ViewStyle>;
+      }
+  );
 
 export const RadioIcon: React.FC<RadioIconProps> = ({
   style,
   ...restProps
 }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_high,
+    },
+  }));
+
+  if (restProps.size === 'extra-large') {
+    return (
+      <View
+        style={[
+          styles.container,
+          hmsRoomStyles.container,
+          restProps.containerStyle,
+        ]}
+      >
+        <Image
+          source={require('./assets/radio-xlarge.png')}
+          style={[styles.icon, styles.xLargeIcon, hmsRoomStyles.icon, style]}
+          {...restProps}
+        />
+      </View>
+    );
+  }
+
   return (
     <Image
       source={require('./assets/radio.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, hmsRoomStyles.icon, style]}
       {...restProps}
     />
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   icon: {
     width: 24,
     height: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  xLargeIcon: {
+    width: 56,
+    height: 56,
+  },
 });

package/src/Icons/Recording/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface RecordingIconProps extends Omit<ImageProps, 'source'> {}
+
+export const RecordingIcon: React.FC<RecordingIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/recording.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/RotateCamera/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface RotateCameraIconProps extends Omit<ImageProps, 'source'> {}
 
 export const RotateCameraIcon: React.FC<RotateCameraIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/rotate-camera.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/ScreenShare/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface ScreenShareIconProps extends Omit<ImageProps, 'source'> {}
 
 export const ScreenShareIcon: React.FC<ScreenShareIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/screen-share.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Speaker/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface SpeakerIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
   size?: 'normal' | 'large';
@@ -13,6 +15,10 @@ export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={
@@ -22,7 +28,12 @@ export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
           ? require('./assets/speaker.png')
           : require('./assets/speaker-large.png')
       }
-      style={[styles.icon, style, size === 'large' ? styles.large : null]}
+      style={[
+        styles.icon,
+        iconStyles,
+        style,
+        size === 'large' ? styles.large : null,
+      ]}
       {...restProps}
     />
   );

package/src/Icons/Star/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface StarIconProps extends Omit<ImageProps, 'source'> {}
+
+export const StarIcon: React.FC<StarIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/star.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Stop/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface StopIconProps extends Omit<ImageProps, 'source'> {}
+
+export const StopIcon: React.FC<StopIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/stop.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/ThreeDots/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface ThreeDotsIconProps extends Omit<ImageProps, 'source'> {
   stack: 'horizontal' | 'vertical';
 }
@@ -11,6 +13,10 @@ export const ThreeDotsIcon: React.FC<ThreeDotsIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={
@@ -18,7 +24,7 @@ export const ThreeDotsIcon: React.FC<ThreeDotsIconProps> = ({
           ? require('./assets/three-dots-vertical.png')
           : require('./assets/three-dots-vertical.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Wave/index.tsx

@@ -2,13 +2,19 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface WaveIconProps extends Omit<ImageProps, 'source'> {}
 
 export const WaveIcon: React.FC<WaveIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/wave.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/index.ts

@@ -25,3 +25,13 @@ export * from './Wave';
 export * from './GenericLogo';
 export * from './Radio';
 export * from './Check';
+export * from './BRB';
+export * from './Maximize';
+export * from './Minimize';
+export * from './Star';
+export * from './Pin';
+export * from './Pencil';
+export * from './Recording';
+export * from './AlertTriangle';
+export * from './Hamburger';
+export * from './Stop';

package/src/components/AvatarView.tsx

@@ -46,8 +46,7 @@ const styles = StyleSheet.create({
   avatarText: {
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 34,
-    fontFamily: 'Inter',
-    fontWeight: '600',
+    fontFamily: 'Inter-SemiBold',
     lineHeight: 40,
     letterSpacing: 0.25,
   },

package/src/components/BackButton.tsx

@@ -2,15 +2,19 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
 import { ChevronIcon } from '../Icons';
+import { useHMSRoomStyle } from '../hooks-util';
 
 export interface BackButtonProps {}
 
 export const BackButton: React.FC<BackButtonProps> = () => {
   const navigation = React.useContext(NavigationContext);
 
+  const buttonStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+  }));
+
   if (!navigation || !navigation.canGoBack()) {
     return null;
   }
@@ -23,7 +27,7 @@ export const BackButton: React.FC<BackButtonProps> = () => {
 
   return (
     <PressableIcon
-      style={styles.button}
+      style={[styles.button, buttonStyles]}
       rounded={true}
       border={false}
       onPress={handleGoBack}
@@ -37,6 +41,5 @@ const styles = StyleSheet.create({
   button: {
     marginTop: 16,
     marginLeft: 16,
-    backgroundColor: COLORS.SURFACE.DEFAULT,
   },
 });