Creating a RN example for simple-chatbot

examples/simple-chatbot/client/react-native/src/theme/Assets.ts

@@ -0,0 +1,7 @@
+export const Images = {
+  dailyBot: require('../../assets/images/pipecat.png'),
+};
+
+export const Icons = {
+  vision: require('../../assets/icons/vision.png'),
+};

examples/simple-chatbot/client/react-native/src/theme/Colors.ts

@@ -0,0 +1,27 @@
+type ColorsType = {
+  white: string;
+  black: string;
+  backgroundCircle: string;
+  backgroundCircleNotConnected: string;
+  backgroundApp: string;
+  buttonsBorder: string;
+  micVolume: string;
+  timer: string;
+  disabledMic: string;
+  disabledVision: string;
+};
+
+const Colors: ColorsType = {
+  white: '#ffffff',
+  black: '#000000',
+  backgroundCircle: '#374151',
+  backgroundCircleNotConnected: '#D1D5DB',
+  backgroundApp: '#F9FAFB',
+  buttonsBorder: '#E5E7EB',
+  micVolume: '#86EFAC',
+  timer: '#E5E7EB',
+  disabledMic: '#ee6b6e',
+  disabledVision: '#BBF7D0',
+};
+
+export default Colors;

examples/simple-chatbot/client/react-native/src/theme/CustomButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+interface CustomButtonProps {
+  title: string;
+  onPress: (event: GestureResponderEvent) => void;
+  backgroundColor?: string; // Optional prop for background color
+  textColor?: string; // Optional prop for text color
+  style?: ViewStyle; // Optional additional styles for the button container
+  textStyle?: TextStyle; // Optional additional styles for the text
+  iconName?: string; // Optional prop for the icon name from MaterialIcons
+  iconPosition?: 'left' | 'right'; // Optional prop to control icon position
+  iconSize?: number; // Optional prop for icon size
+  iconColor?: string; // Optional prop for icon color
+}
+
+const CustomButton: React.FC<CustomButtonProps> = ({
+  title,
+  onPress,
+  backgroundColor = 'black',
+  textColor = 'white',
+  style,
+  textStyle,
+  iconName,
+  iconPosition = 'left',
+  iconSize = 24,
+  iconColor = 'white',
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.button, { backgroundColor }, style]}>
+      {iconName && iconPosition === 'left' && (
+        <MaterialIcons name={iconName as keyof typeof MaterialIcons.glyphMap} size={iconSize} color={iconColor} style={styles.icon} />
+      )}
+      <Text style={[styles.text, { color: textColor }, textStyle]}>{title}</Text>
+      {iconName && iconPosition === 'right' && (
+        <MaterialIcons name={iconName as keyof typeof MaterialIcons.glyphMap} size={iconSize} color={iconColor} style={styles.icon} />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row', // Ensures icon and text are aligned in a row
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  icon: {
+    marginHorizontal: 5, // Adds space between the icon and text
+  },
+});
+
+export default CustomButton;