Almost done with rewrite

components/chat/AccessoryBar.tsx

@@ -0,0 +1,52 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { ThemedView } from '@/components/theme/Theme';
+import {
+  getLocationAsync,
+  pickImageAsync,
+  takePictureAsync,
+} from '@/components/chat/mediaUtils';
+
+export default class AccessoryBar extends React.Component<any> {
+  render () {
+    const { onSend, isTyping } = this.props;
+
+    return (
+      <ThemedView style={styles.container}>
+        <Button onPress={() => pickImageAsync(onSend)} name='photo' />
+        <Button onPress={() => takePictureAsync(onSend)} name='camera' />
+        <Button onPress={() => getLocationAsync(onSend)} name='my-location' />
+        <Button
+          onPress={() => {
+            isTyping()
+          }}
+          name='chat'
+        />
+      </ThemedView>
+    );
+  }
+};
+
+const Button = ({
+  onPress,
+  size = 30,
+  color = 'rgba(255,255,255,0.8)',
+  ...props
+}) => (
+  <TouchableOpacity onPress={onPress}>
+    <MaterialIcons size={size} color={color} {...props} />
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    height: 45,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(255,255,255,0.3)',
+  },
+});

components/chat/CustomActions.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback } from 'react';
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  TouchableOpacity
+} from 'react-native';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { useActionSheet } from '@expo/react-native-action-sheet';
+import {
+  getLocationAsync,
+  pickImageAsync,
+  takePictureAsync,
+} from '@/components/chat/mediaUtils';
+
+type Props = {
+  renderIcon?: () => React.ReactNode;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  iconTextStyle?: StyleProp<TextStyle>;
+  onSend: (messages: unknown) => void;
+};
+
+const CustomActions = ({
+  renderIcon,
+  iconTextStyle,
+  containerStyle,
+  wrapperStyle,
+  onSend,
+}: Props) => {
+  const { showActionSheetWithOptions } = useActionSheet();
+  const onActionPress = useCallback(() => {
+    const options = [
+      'Choose From Library',
+      'Take Picture',
+      'Send Location',
+      'Cancel',
+    ];
+    const cancelButtonIndex = options.length - 1;
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (buttonIndex) => {
+        switch (buttonIndex) {
+          case 0:
+            pickImageAsync(onSend);
+            return;
+          case 1:
+            takePictureAsync(onSend);
+            return;
+          case 2:
+            getLocationAsync(onSend);
+        }
+      }
+    )
+  }, [showActionSheetWithOptions, onSend]);
+
+  const renderIconComponent = useCallback(() => {
+    if (renderIcon) return renderIcon();
+
+    return (
+      <ThemedView style={[styles.wrapper, wrapperStyle]}>
+        <ThemedText style={[styles.iconText, iconTextStyle]}>
+          +
+        </ThemedText>
+      </ThemedView>
+    );
+  }, [renderIcon, wrapperStyle, iconTextStyle]);
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onActionPress}
+    >
+      {renderIconComponent()}
+    </TouchableOpacity>
+  );
+};
+
+
+export default CustomActions
+
+const styles = StyleSheet.create({
+  container: {
+    width: 26,
+    height: 26,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
+  wrapper: {
+    borderRadius: 13,
+    borderColor: '#b2b2b2',
+    borderWidth: 2,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    color: '#b2b2b2',
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 16,
+    backgroundColor: 'transparent',
+    textAlign: 'center',
+  },
+})

components/chat/mediaUtils.ts

@@ -0,0 +1,65 @@
+import { Alert } from 'react-native';
+import * as Linking from 'expo-linking';
+import * as Location from 'expo-location';
+import * as Permissions from 'expo-permissions';
+import * as ImagePicker from 'expo-image-picker';
+
+export const getPermissionAsync = async (
+  permission: Permissions.PermissionType) => {
+  const {status} = await Permissions.askAsync(permission);
+  if (status !== 'granted') {
+    const permissionName = permission.toLowerCase().replace('_', ' ');
+    Alert.alert(
+      `Cannot access ${permissionName}`,
+      `If you would like to use this feature, you will need to enable ` + 
+        `the ${permissionName} permission in your phone's settings.`,
+      [
+        {
+          text: 'Let\'s go!',
+          onPress: () => Linking.openURL('app-settings:'),
+        },
+        {
+          text: 'Nevermind',
+          onPress: () => {},
+            style: 'cancel'
+        },
+      ],
+      { cancelable: true }
+    );
+    return false;
+  }
+  return true;
+};
+
+export const getLocationAsync = async (
+  onSend: (locations: { location: Location.LocationObjectCoords }[]) => void) => {
+  const response = await Location.requestForegroundPermissionsAsync();
+  if (!response.granted) return;
+  const location = await Location.getCurrentPositionAsync();
+  if (!location) return;
+  onSend([{ location: location.coords }]);
+};
+
+export const pickImageAsync = async (onSend: (images: {image: string}[]) => void) => {
+  const response = await ImagePicker.requestMediaLibraryPermissionsAsync();
+  if (!response.granted) return;
+  const result = await ImagePicker.launchImageLibraryAsync({
+    allowsEditing: true,
+    aspect: [4, 3],
+  });
+  if (result.canceled) return;
+  const images = result.assets.map(({ uri: image }) => ({ image }));
+  onSend(images);
+};
+
+export const takePictureAsync = async (onSend: (images: {image: string}[]) => void) => {
+  const response = await ImagePicker.requestCameraPermissionsAsync();
+  if (!response.granted) return;
+  const result = await ImagePicker.launchCameraAsync({
+    allowsEditing: true,
+    aspect: [4, 3],
+  });
+  if (result.canceled) return;
+  const images = result.assets.map(({ uri: image }) => ({ image }));
+  onSend(images);
+};