Definitely going to need to work on the types here
This commit is contained in:
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
]
|
||||
|
@ -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',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
Reference in New Issue
Block a user