Definitely going to need to work on the types here

This commit is contained in:
2024-10-16 08:02:39 -05:00
parent 701315011b
commit c2858198ca
8 changed files with 538 additions and 0 deletions

View File

@ -0,0 +1,83 @@
import React, { useCallback } from 'react';
import * as Linking from 'expo-linking';
import {
Platform,
StyleSheet,
StyleProp,
ViewStyle
} from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import MapView from 'react-native-maps';
import { TouchableOpacity } from 'react-native-gesture-handler';
type Props = {
currentMessage: any;
containerStyle?: StyleProp<ViewStyle>;
mapViewStyle?: StyleProp<ViewStyle>;
};
const CustomView = ({ currentMessage, containerStyle, mapViewStyle }: Props) => {
const openMapAsync = useCallback(async () => {
if (Platform.OS === 'web') {
alert('Opening the map is not supported.');
return;
}
const {location = {} } = currentMessage;
const url = Platform.select({
ios: `http://maps.apple.com/?ll=${location.latitude},${location.longitude}`,
default: `http://maps.google.com/?q=${location.latitude},${location.longitude}`,
});
try {
const supported = await Linking.canOpenURL(url);
if (supported) return Linking.openURL(url);
else alert('Opening the map is not supported.');
} catch (error) {
console.log('Could not open link!', error.message);
alert(error.message);
}
}, [currentMessage]);
if (currentMessage.location) {
return (
<TouchableOpacity
style={[styles.container, containerStyle]}
onPress={openMapAsync}
>
{Platform.OS !== 'web'
? (
<MapView
style={[styles.mapView, mapViewStyle]}
region={{
latitude: currentMessage.location.latitude,
longitude: currentMessage.location.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
scrollEnabled={false}
zoomEnabled={false}
/>
)
: (
<ThemedView style={{ padding: 15 }}>
<ThemedText style={{ color: 'tomato', fontWeight: 'bold' }}>
Map not in web yet, sorry!
</ThemedText>
</ThemedView>
)}
</TouchableOpacity>
);
}
return null;
};
export default CustomView;
const styles = StyleSheet.create({
container: {
},
mapView: {
width: 150,
height: 100,
borderRadius: 13,
margin: 3,
},
});

View File

@ -0,0 +1,20 @@
import React from 'react';
import { ThemedText, ThemedView } from '../theme/Theme';
import { Platform, StyleSheet } from 'react-native';
const NavBar = () => {
if (Platform.OS === 'web') return null;
return (
<ThemedView style={styles.container}>
<ThemedText>💬 Chat{'\n'}</ThemedText>
</ThemedView>
);
};
export default NavBar;
const styles = StyleSheet.create({
container: {
alignItems: 'center',
paddingTop: 10,
},
});

View File

@ -0,0 +1,129 @@
export default () => [
{
_id: Math.round(Math.random() * 1000000),
text:
'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text:
'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text:
'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text:
'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: Math.round(Math.random() * 1000000),
text: 'This is a system message.',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
system: true,
},
]

View File

@ -0,0 +1,168 @@
export default [
{
_id: 9,
text: '#awesome 3',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 8,
text: '#awesome 2',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 7,
text: '#awesome',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 6,
text: 'Paris',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
},
image:
'https://www.xtrafondos.com/wallpapers/torre-eiffel-en-paris-415.jpg',
sent: true,
received: true,
},
{
_id: 5,
text: 'Send me a picture!',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 4,
text: '',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
},
sent: true,
received: true,
location: {
latitude: 48.864601,
longitude: 2.398704,
},
},
{
_id: 3,
text: 'Where are you?',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 2,
text: 'Yes, and I use #GiftedChat!',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
},
sent: true,
received: true,
},
{
_id: 1,
text: 'Are you building a chat app?',
createdAt: new Date(),
user: {
_id: 1,
name: 'Developer',
},
},
{
_id: 10,
text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
createdAt: new Date(),
quickReplies: {
type: 'radio', // or 'checkbox',
keepIt: true,
values: [
{
title: '😋 Yes',
value: 'yes',
},
{
title:
'📷 Yes, let me show you with a picture! Again let me show you with a picture!',
value: 'yes_picture',
},
{
title: '😞 Nope. What?',
value: 'no',
},
],
},
user: {
_id: 2,
name: 'React Native',
},
},
{
_id: 20,
text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
createdAt: new Date(),
quickReplies: {
type: 'checkbox', // or 'checkbox',
values: [
{
title: 'Yes',
value: 'yes',
},
{
title: 'Yes, let me show you with a picture!',
value: 'yes_picture',
},
{
title: 'Nope. What?',
value: 'no',
},
],
},
user: {
_id: 2,
name: 'React Native',
},
},
{
_id: 30,
createdAt: new Date(),
video: 'https://media.giphy.com/media/3o6ZthZjk09Xx4ktZ6/giphy.mp4',
user: {
_id: 2,
name: 'React Native',
},
},
{
_id: 31,
createdAt: new Date(),
audio:
'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
user: {
_id: 2,
name: 'React Native',
},
},
]