@100mslive/react-native-room-kit 0.0.1

package/src/Icons/Chevron/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ChevronIconProps extends Omit<ImageProps, 'source'> {
+  direction: 'left' | 'down';
+}
+
+export const ChevronIcon: React.FC<ChevronIconProps> = ({
+  direction,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        direction === 'down'
+          ? require('./assets/chevron-down.png')
+          : require('./assets/chevron-left.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Clock/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ClockIconProps extends Omit<ImageProps, 'source'> {}
+
+export const ClockIcon: React.FC<ClockIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/clock.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Close/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface CloseIconProps extends Omit<ImageProps, 'source'> {}
+
+export const CloseIcon: React.FC<CloseIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/close.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/End/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface EndIconProps extends Omit<ImageProps, 'source'> {}
+
+export const EndIcon: React.FC<EndIconProps> = ({ style, ...restProps }) => {
+  return (
+    <Image
+      source={require('./assets/end.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Hand/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { COLORS } from '../../utils/theme';
+
+interface HandIconProps extends Omit<ImageProps, 'source'> {}
+
+export const HandIcon: React.FC<HandIconProps> = ({ style, ...restProps }) => {
+  return (
+    <Image
+      source={require('./assets/hand.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    tintColor: COLORS.SURFACE.ON_SURFACE.HIGH,
+  },
+});

package/src/Icons/Leave/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface LeaveIconProps extends Omit<ImageProps, 'source'> {}
+
+export const LeaveIcon: React.FC<LeaveIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/leave.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Mic/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface MicIconProps extends Omit<ImageProps, 'source'> {
+  muted: boolean;
+}
+
+export const MicIcon: React.FC<MicIconProps> = ({
+  muted,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        muted
+          ? require('./assets/mic-muted.png')
+          : require('./assets/mic-unmuted.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/NetworkQuality/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface NetworkQualityIconProps extends Omit<ImageProps, 'source'> {
+  quality: number | undefined;
+}
+
+export const NetworkQualityIcon: React.FC<NetworkQualityIconProps> = ({
+  quality,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        quality === 0
+          ? require('./assets/network_0.png')
+          : quality === 1
+          ? require('./assets/network_1.png')
+          : quality === 2
+          ? require('./assets/network_2.png')
+          : quality === 3
+          ? require('./assets/network_3.png')
+          : quality === 4
+          ? require('./assets/network_4.png')
+          : require('./assets/network_5.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Participants/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ParticipantsIconProps extends Omit<ImageProps, 'source'> {}
+
+export const ParticipantsIcon: React.FC<ParticipantsIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/participants.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/RotateCamera/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface RotateCameraIconProps extends Omit<ImageProps, 'source'> {}
+
+export const RotateCameraIcon: React.FC<RotateCameraIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/rotate-camera.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/ScreenShare/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ScreenShareIconProps extends Omit<ImageProps, 'source'> {}
+
+export const ScreenShareIcon: React.FC<ScreenShareIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/screen-share.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Send/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface SendIconProps extends Omit<ImageProps, 'source'> {}
+
+export const SendIcon: React.FC<SendIconProps> = ({ style, ...restProps }) => {
+  return (
+    <Image
+      source={require('./assets/send.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Settings/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface SettingsIconProps extends Omit<ImageProps, 'source'> {}
+
+export const SettingsIcon: React.FC<SettingsIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/settings.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Speaker/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface SpeakerIconProps extends Omit<ImageProps, 'source'> {
+  muted: boolean;
+}
+
+export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
+  muted,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        muted
+          ? require('./assets/speaker-muted.png')
+          : require('./assets/speaker.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/ThreeDots/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ThreeDotsIconProps extends Omit<ImageProps, 'source'> {
+  stack: 'horizontal' | 'vertical';
+}
+
+export const ThreeDotsIcon: React.FC<ThreeDotsIconProps> = ({
+  stack,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        stack
+          ? require('./assets/three-dots-vertical.png')
+          : require('./assets/three-dots-vertical.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -0,0 +1,19 @@
+export * from './Camera';
+export * from './Chevron';
+export * from './Mic';
+export * from './Participants';
+export * from './RotateCamera';
+export * from './Settings';
+export * from './NetworkQuality';
+export * from './Close';
+export * from './Speaker';
+export * from './Leave';
+export * from './Chat';
+export * from './ThreeDots';
+export * from './ScreenShare';
+export * from './Alert';
+export * from './Send';
+export * from './Clock';
+export * from './End';
+export * from './100ms';
+export * from './Hand';