Skip to content

Commit a65325e

Browse files
roncodesroncodes
authored
Merge pull request #61 from fleetbase/feature/android-12-below-compat
Patched for better compatibility for Android 31 and below, fixed them…
2 parents 7f85d6f + 8a764a6 commit a65325e

30 files changed

+2899
-853
lines changed

‎config/default.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export const DefaultConfig = {
88
defaultTab: toArray(config('DRIVER_NAVIGATOR_DEFAULT_TAB', 'DriverDashboardTab')),
99
},
1010
defaultLocale: config('DEFAULT_LOCALE', 'en'),
11+
colors: {
12+
loginBackground: config('LOGIN_BG_COLOR', '#111827'),
13+
},
1114
};
1215

1316
export function createNavigatorConfig(userConfig = {}) {

‎package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fleetbase/navigator-app",
3-
"version": "2.0.3",
3+
"version": "2.0.4",
44
"license": "AGPL-3.0-or-later",
55
"author": "Fleetbase Pte Ltd <hello@fleetbase.io>",
66
"description": "Order management, geolocation tracking and navigation for Fleetbase drivers.",
@@ -48,7 +48,7 @@
4848
"@react-navigation/native": "^7.0.0",
4949
"@react-navigation/native-stack": "^7.0.0",
5050
"@tamagui/babel-plugin": "^1.121.5",
51-
"@tamagui/config": "^1.116.14",
51+
"@tamagui/config": "1.125.20",
5252
"add": "^2.0.6",
5353
"countries-list": "^3.0.6",
5454
"country-locale-map": "^1.9.0",
@@ -101,7 +101,7 @@
101101
"react-redux": "^9.0.4",
102102
"recyclerlistview": "^4.2.1",
103103
"socketcluster-client": "^19.2.3",
104-
"tamagui": "^1.121.5",
104+
"tamagui": "1.125.20",
105105
"yarn": "^1.22.22"
106106
},
107107
"devDependencies": {
@@ -122,11 +122,19 @@
122122
"babel-jest": "^29.6.3",
123123
"babel-loader": "^9.2.1",
124124
"babel-plugin-preval": "^5.1.0",
125+
"babel-plugin-react-native-web": "^0.19.13",
126+
"css-loader": "^7.1.2",
127+
"dotenv": "^16.4.7",
125128
"eslint": "^8.19.0",
129+
"html-webpack-plugin": "^5.6.3",
126130
"jest": "^29.6.3",
131+
"metro-react-native-babel-preset": "^0.77.0",
127132
"prettier": "^3.3.3",
128133
"react-test-renderer": "18.3.1",
134+
"style-loader": "^4.0.0",
135+
"tamagui-loader": "1.125.20",
129136
"typescript": "5.0.4",
137+
"url-loader": "^4.1.1",
130138
"webpack": "^5.97.1",
131139
"webpack-cli": "^6.0.0",
132140
"webpack-dev-server": "^5.2.0"

‎src/components/Buttons.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const PhoneLoginButton = ({ onPress, ...props }) => {
1010
const theme = useTheme();
1111

1212
return (
13-
<Button onPress={onPress} bg='$secondary' width='100%' {...props} rounded>
13+
<Button onPress={onPress} bg='$subsurface' borderWidth={1} borderColor='$borderColor' width='100%' {...props} rounded>
1414
<Button.Icon>
1515
<FontAwesomeIcon icon={faPhone} color={theme['$textPrimary'].val} />
1616
</Button.Icon>

‎src/components/ChatKeyboard.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { YStack, XStack, Button, TextArea, useTheme } from 'tamagui';
44
import { KeyboardAvoidingView, Platform } from 'react-native';
55
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
66
import { faCamera, faPlus, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
7+
import useAppTheme from '../hooks/use-app-theme';
78
import CameraCapture from './CameraCapture';
89

910
const INPUT_MIN_HEIGHT = 40;
1011
const INPUT_MAX_HEIGHT = 120;
1112
const ChatKeyboard = ({ onSend, onAttach, onCamera, onFocus, onBlur }) => {
13+
const { isDarkMode } = useAppTheme();
1214
const theme = useTheme();
1315
const headerHeight = useHeaderHeight();
1416
const [message, setMessage] = useState('');
@@ -78,6 +80,7 @@ const ChatKeyboard = ({ onSend, onAttach, onCamera, onFocus, onBlur }) => {
7880
fontSize={14}
7981
onFocus={onFocus}
8082
onBlur={onBlur}
83+
placeholderTextColor={isDarkMode ? '$gray-500' : '$gray-400'}
8184
/>
8285
</YStack>
8386
<XStack px='$2' gap='$1'>

‎src/components/ChatMessage.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,17 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons';
66
import { abbreviateName } from '../utils';
77
import { formatWhatsAppTimestamp } from '../utils/format';
88
import { useChat } from '../contexts/ChatContext';
9+
import useAppTheme from '../hooks/use-app-theme';
910
import ChatAttachment from './ChatAttachment';
1011

1112
const ChatMessage = ({ record, participant }) => {
1213
const theme = useTheme();
14+
const { isDarkMode } = useAppTheme();
1315
const { createReadReceipt } = useChat();
1416
const isSender = participant.id === record.sender.id;
17+
const background = isDarkMode ? (isSender ? '$green-900' : '$gray-900') : isSender ? '$green-800' : '$gray-300';
18+
const messageTextColor = isDarkMode ? '$textPrimary' : isSender ? '$green-100' : '$gray-900';
19+
const senderTextColor = isDarkMode ? (isSender ? '$green-200' : '$blue-600') : isSender ? '$green-100' : '$gray-900';
1520

1621
// Create read recipt if participant doesn't have
1722
useEffect(() => {
@@ -39,12 +44,12 @@ const ChatMessage = ({ record, participant }) => {
3944
</YStack>
4045
</YStack>
4146
<YStack flex={1}>
42-
<XStack bg={isSender ? '$green-900' : '$gray-900'} borderRadius='$4' px='$2' py='$2' space='$3'>
47+
<XStack bg={background} borderRadius='$4' px='$2' py='$2' space='$3'>
4348
<YStack flex={1}>
44-
<Text color={isSender ? '$green-200' : '$blue-600'} mb='$2'>
49+
<Text color={senderTextColor} fontWeight='bold' mb='$2'>
4550
{record.sender.name}
4651
</Text>
47-
<Text color='$textPrimary'>{record.content}</Text>
52+
<Text color={messageTextColor}>{record.content}</Text>
4853
<XStack gap='$1' flexWrap='wrap'>
4954
{record.attachments.map((attachment, index) => (
5055
<ChatAttachment key={index} record={attachment} />

‎src/components/ChatParticipants.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from 'react';
22
import { Pressable } from 'react-native';
33
import { Avatar, XStack, YStack, Text, useTheme } from 'tamagui';
4+
import useAppTheme from '../hooks/use-app-theme';
45

56
export const ChatParticipants = ({ participants = [], size = 30, onPress }) => {
7+
const { isDarkMode } = useAppTheme();
8+
69
// Display a friendly message when no participants exist
710
if (participants.length === 0) {
811
return (
@@ -31,7 +34,7 @@ export const ChatParticipants = ({ participants = [], size = 30, onPress }) => {
3134
<XStack alignItems='center'>
3235
{displayParticipants.map((participant, index) => (
3336
<YStack key={participant.id} ml={index === 0 ? 0 : -overlapMargin} width={size}>
34-
<Avatar circular size={size} borderWidth={1} borderColor='$gray-900' style={shadowStyle}>
37+
<Avatar circular size={size} borderWidth={1} borderColor={isDarkMode ? '$gray-900' : '$borderColorWithShadow'} style={shadowStyle}>
3538
<Avatar.Image accessibilityLabel={participant.name} src={participant.avatar_url} />
3639
<Avatar.Fallback backgroundColor='$blue-500' />
3740
</Avatar>
@@ -40,9 +43,9 @@ export const ChatParticipants = ({ participants = [], size = 30, onPress }) => {
4043
opacity={0.75}
4144
textAlign='center'
4245
mt='$1'
43-
bg='$black'
46+
bg={isDarkMode ? '$black' : '$gray-200'}
4447
borderWidth={1}
45-
borderColor='$borderColor'
48+
borderColor={isDarkMode ? '$borderColor' : '$borderColorWithShadow'}
4649
borderRadius='$6'
4750
px='$2'
4851
py='$1'

‎src/components/CommentThread.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { Alert } from 'react-native';
33
import { YStack, XStack, Text, Button, Spinner, TextArea, useTheme } from 'tamagui';
44
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
55
import { faPaperPlane, faRotate } from '@fortawesome/free-solid-svg-icons';
6+
import useAppTheme from '../hooks/use-app-theme';
67
import Comment from './Comment';
78

89
const CommentThread = ({ comments: initialComments = [], subject, onReloadComments, isReloading }) => {
10+
const { isDarkMode } = useAppTheme();
911
const theme = useTheme();
1012
const [comments, setComments] = useState(initialComments);
1113
const [input, setInput] = useState('');
@@ -48,7 +50,17 @@ const CommentThread = ({ comments: initialComments = [], subject, onReloadCommen
4850
return (
4951
<YStack space='$4'>
5052
<YStack>
51-
<TextArea value={input} placeholder='Write a comment...' onChangeText={setInput} width='100%' borderWidth={1} borderColor='$borderColor' minHeight={100} />
53+
<TextArea
54+
value={input}
55+
placeholder='Write a comment...'
56+
onChangeText={setInput}
57+
width='100%'
58+
bg={isDarkMode ? '$secondary' : '$white'}
59+
borderWidth={1}
60+
borderColor={isDarkMode ? '$gray-600' : '$borderColorWithShadow'}
61+
minHeight={100}
62+
placeholderTextColor={isDarkMode ? '$gray-500' : '$gray-400'}
63+
/>
5264
<XStack justifyContent='flex-end' alignItems='center' marginTop='$2' space='$2'>
5365
{isReloading ? (
5466
<YStack alignItems='center' justifyContent='center' pr='$2'>

‎src/components/Content.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { Text, YStack, XStack } from 'tamagui';
2+
import useAppTheme from '../hooks/use-app-theme';
23

34
export const SectionHeader = ({ title, children }) => {
5+
const { isDarkMode } = useAppTheme();
6+
47
return (
58
<YStack>
69
<XStack
710
px='$3'
811
py='$3'
912
justifyContent='space-between'
10-
bg='$info'
13+
bg={isDarkMode ? '$info' : '$blue-700'}
1114
borderBottomWidth={1}
1215
borderTopWidth={1}
1316
borderColor='$infoBorder'
@@ -28,6 +31,8 @@ export const SectionHeader = ({ title, children }) => {
2831
};
2932

3033
export const SectionInfoLine = ({ title, value }) => {
34+
const { isDarkMode } = useAppTheme();
35+
3136
return (
3237
<YStack>
3338
<XStack px='$3' py='$2' justifyContent='space-between'>
@@ -51,6 +56,8 @@ export const SectionInfoLine = ({ title, value }) => {
5156
};
5257

5358
export const ActionContainer = ({ children, ...props }) => {
59+
const { isDarkMode } = useAppTheme();
60+
5461
return (
5562
<YStack>
5663
<YStack
@@ -60,7 +67,7 @@ export const ActionContainer = ({ children, ...props }) => {
6067
bg='$background'
6168
borderBottomWidth={0}
6269
borderTopWidth={1}
63-
borderColor='$infoBorder'
70+
borderColor={isDarkMode ? '$infoBorder' : '$borderColorWithShadow'}
6471
shadowColor='$shadowColor'
6572
shadowOffset={{ width: 0, height: 2 }}
6673
shadowOpacity={0.2}

‎src/components/CurrentDestinationSelect.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ import { formattedAddressFromPlace, formatAddressSecondaryIdentifier } from '../
1111
import PlaceMapView from './PlaceMapView';
1212
import Badge from './Badge';
1313
import Spacer from './Spacer';
14+
import useAppTheme from '../hooks/use-app-theme';
1415

1516
const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapTo = '100%', isLoading = false, ...props }) => {
17+
const { isDarkMode } = useAppTheme();
1618
const theme = useTheme();
1719
const navigation = useNavigation();
1820
const bottomSheetRef = useRef<BottomSheet>(null);
@@ -38,7 +40,7 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
3840
return (
3941
<YStack>
4042
<Pressable onPress={openBottomSheet}>
41-
<YStack bg='$default' borderWidth={1} borderColor='$defaultBorder' borderRadius='$4' px='$3' py='$3' {...props}>
43+
<YStack bg={isDarkMode ? '$default' : '$gray-200'} borderWidth={1} borderColor={isDarkMode ? '$defaultBorder' : '$gray-300'} borderRadius='$4' px='$3' py='$3' {...props}>
4244
<XStack>
4345
<YStack width={100} height={90}>
4446
<PlaceMapView place={destination} zoom={2} markerSize='xs' width={100} height={90} borderWidth={1} borderColor='$borderColor' />
@@ -50,10 +52,10 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
5052
</YStack>
5153
) : (
5254
<YStack>
53-
<Text size={15} color='$infoText' fontWeight='bold' textTransform='uppercase' mb={2}>
55+
<Text size={15} color={isDarkMode ? '$infoText' : '$gray-700'} fontWeight='bold' textTransform='uppercase' mb={2}>
5456
{destination.getAttribute('name') ?? 'Current Destination'}
5557
</Text>
56-
<Text color='$textSecondary' textTransform='uppercase' mb='$1'>
58+
<Text color={isDarkMode ? '$textSecondary' : '$gray-500'} textTransform='uppercase' mb='$1'>
5759
{formattedAddressFromPlace(destination)}
5860
</Text>
5961
<YStack alignSelf='flex-start'>
@@ -71,7 +73,7 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
7173
)}
7274
</YStack>
7375
<YStack justifyContent='center'>
74-
<FontAwesomeIcon icon={faChevronRight} color={theme.infoText.val} />
76+
<FontAwesomeIcon icon={faChevronRight} color={isDarkMode ? theme.infoText.val : theme['gray-500'].val} />
7577
</YStack>
7678
</XStack>
7779
</YStack>
@@ -109,7 +111,7 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
109111
<YStack px='$4'>
110112
<Button
111113
onPress={() => handleDestinationSelect(waypoint)}
112-
size='$8'
114+
size={isDestination ? '$9' : '$8'}
113115
bg={isCompleted ? '$success' : isDestination ? '$info' : '$secondary'}
114116
borderWidth={1}
115117
borderColor={isCompleted ? '$successBorder' : isDestination ? '$infoBorder' : '$borderColorWithShadow'}
@@ -155,15 +157,15 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
155157
alignItems='center'
156158
justifyContent='center'
157159
>
158-
<FontAwesomeIcon icon={faLocationDot} color={theme['$info'].val} />
160+
<FontAwesomeIcon icon={faLocationDot} color={isDestination ? theme['white'].val : theme['$info'].val} />
159161
</YStack>
160162
</YStack>
161163
)}
162164
<XStack flex={1} alignItems='flex-start'>
163165
<YStack flex={1}>
164166
<XStack alignItems='flex-start' justifyContent='space-between' mb='$1'>
165167
<YStack flex={1} space='$1'>
166-
<Text color='$textPrimary' fontWeight='bold' numberOfLines={1}>
168+
<Text color={isDestination ? '$white' : '$textPrimary'} fontWeight='bold' numberOfLines={1}>
167169
{waypoint.getAttribute('name') ?? waypoint.getAttribute('street1')}
168170
</Text>
169171
{isDestination && <Text color='$infoText'>(Destination)</Text>}
@@ -172,10 +174,10 @@ const CurrentDestinationSelect = ({ onChange, destination, waypoints = [], snapT
172174
<Badge status={waypoint.getAttribute('status')} fontSize='$1' px='$2' py='$1' />
173175
)}
174176
</XStack>
175-
<Text color='$textSecondary' numberOfLines={1}>
177+
<Text color={isDestination ? '$gray-200' : '$textSecondary'} numberOfLines={1}>
176178
{formattedAddressFromPlace(waypoint)}
177179
</Text>
178-
<Text color='$textSecondary'>{formatAddressSecondaryIdentifier(waypoint)}</Text>
180+
<Text color={isDestination ? '$gray-200' : '$textSecondary'}>{formatAddressSecondaryIdentifier(waypoint)}</Text>
179181
</YStack>
180182
</XStack>
181183
</XStack>

‎src/components/DriverMarker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const DriverMarker = ({ driver, onPositionChange, onHeadingChange, onMovement, .
6767
<TrackingMarker
6868
ref={markerRef}
6969
coordinate={{ latitude: driver.latitude, longitude: driver.longitude }}
70-
imageSource={{ uri: driver.getAttribute('avatar_url') }}
70+
imageSource={{ uri: driver.getAttribute('vehicle_avatar') }}
7171
size={{ width: 50, height: 50 }}
7272
{...props}
7373
/>

0 commit comments

Comments
 (0)