Skip to content

Commit a808726

Browse files
jokerttujokerttu
authored
chore: improve example app layout for latest ios versions (#474)
1 parent 9848783 commit a808726

File tree

4 files changed

+64
-105
lines changed

4 files changed

+64
-105
lines changed

‎example/src/controls/mapsControls.tsx‎

Lines changed: 23 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import React, { useEffect, useState } from 'react';
1818

19-
import { Button, Switch, Text, TextInput, View } from 'react-native';
19+
import { Button, Text, TextInput, View } from 'react-native';
2020

2121
import SelectDropdown from 'react-native-select-dropdown';
2222
import styles from '../styles';
@@ -27,7 +27,6 @@ import {
2727
type Circle,
2828
type Polyline,
2929
type Polygon,
30-
type Padding,
3130
} from '@googlemaps/react-native-navigation-sdk';
3231

3332
export interface MapControlsProps {
@@ -42,12 +41,7 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
4241
const [enableLocationMarker, setEnableLocationMarker] = useState(true);
4342
const [latitude, onLatChanged] = useState('');
4443
const [longitude, onLngChanged] = useState('');
45-
const [padding, setPadding] = useState<Padding>({
46-
top: 0,
47-
bottom: 0,
48-
left: 0,
49-
right: 0,
50-
});
44+
const [customPaddingEnabled, setCustomPaddingEnabled] = useState(false);
5145

5246
useEffect(() => {
5347
if (zoom !== null) {
@@ -202,10 +196,20 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
202196
mapViewController.clearMapView();
203197
};
204198

205-
const onPaddingChanged = (edge: keyof typeof padding, value: string) => {
206-
const updatedPadding: Padding = { ...padding, [edge]: Number(value) };
207-
setPadding(updatedPadding);
208-
mapViewController.setPadding(updatedPadding);
199+
const toggleCustomPadding = () => {
200+
if (!customPaddingEnabled) {
201+
// Enable custom paddings: more on top and bottom
202+
mapViewController.setPadding({
203+
top: 60,
204+
bottom: 40,
205+
left: 10,
206+
right: 10,
207+
});
208+
} else {
209+
// Disable: reset paddings
210+
mapViewController.setPadding({ top: 0, bottom: 0, left: 0, right: 0 });
211+
}
212+
setCustomPaddingEnabled(!customPaddingEnabled);
209213
};
210214

211215
return (
@@ -254,9 +258,9 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
254258
<Button title="Get camera position" onPress={getCameraPositionClicked} />
255259
<View style={styles.rowContainer}>
256260
<Text>Location marker</Text>
257-
<Switch
258-
value={enableLocationMarker}
259-
onValueChange={() => {
261+
<Button
262+
title={enableLocationMarker ? 'Disable' : 'Enable'}
263+
onPress={() => {
260264
setEnableLocationMarker(!enableLocationMarker);
261265
setMyLocationButtonEnabled(!enableLocationMarker);
262266
}}
@@ -295,43 +299,10 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
295299
</View>
296300
<View style={styles.controlButtonGap} />
297301
<View style={styles.rowContainer}>
298-
<Text>Top padding</Text>
299-
<TextInput
300-
style={styles.input}
301-
onChangeText={value => onPaddingChanged('top', value)}
302-
value={padding.top?.toFixed(0)}
303-
keyboardType="numeric"
304-
inputMode="numeric"
305-
/>
306-
</View>
307-
<View style={styles.rowContainer}>
308-
<Text>Bottom padding</Text>
309-
<TextInput
310-
style={styles.input}
311-
onChangeText={value => onPaddingChanged('bottom', value)}
312-
value={padding.bottom?.toFixed(0)}
313-
keyboardType="numeric"
314-
inputMode="numeric"
315-
/>
316-
</View>
317-
<View style={styles.rowContainer}>
318-
<Text>Left padding</Text>
319-
<TextInput
320-
style={styles.input}
321-
onChangeText={value => onPaddingChanged('left', value)}
322-
value={padding.left?.toFixed(0)}
323-
keyboardType="numeric"
324-
inputMode="numeric"
325-
/>
326-
</View>
327-
<View style={styles.rowContainer}>
328-
<Text>Right padding</Text>
329-
<TextInput
330-
style={styles.input}
331-
onChangeText={value => onPaddingChanged('right', value)}
332-
value={padding.right?.toFixed(0)}
333-
keyboardType="numeric"
334-
inputMode="numeric"
302+
<Text>Custom map paddings</Text>
303+
<Button
304+
title={customPaddingEnabled ? 'Disable' : 'Enable'}
305+
onPress={toggleCustomPadding}
335306
/>
336307
</View>
337308
</View>

‎example/src/controls/navigationControls.tsx‎

Lines changed: 34 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,7 @@
1515
*/
1616

1717
import React, { useState } from 'react';
18-
import {
19-
Alert,
20-
Button,
21-
Platform,
22-
Switch,
23-
Text,
24-
TextInput,
25-
View,
26-
} from 'react-native';
18+
import { Alert, Button, Platform, Text, TextInput, View } from 'react-native';
2719
import {
2820
CameraPerspective,
2921
type NavigationViewController,
@@ -393,73 +385,73 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
393385
<Button title="Get traveled path" onPress={getTraveledPath} />
394386
<View style={styles.rowContainer}>
395387
<Text>Trip progress</Text>
396-
<Switch
397-
value={tripProgressBarEnabled}
398-
onValueChange={() => {
388+
<Button
389+
title={tripProgressBarEnabled ? 'Disable' : 'Enable'}
390+
onPress={() => {
399391
toggleTripProgressBarEnabled(!tripProgressBarEnabled);
400392
}}
401393
/>
402394
</View>
403395
<View style={styles.rowContainer}>
404396
<Text>Report incident button</Text>
405-
<Switch
406-
value={reportIncidentButtonEnabled}
407-
onValueChange={() => {
397+
<Button
398+
title={reportIncidentButtonEnabled ? 'Disable' : 'Enable'}
399+
onPress={() => {
408400
toggleReportIncidentButtonEnabled(!reportIncidentButtonEnabled);
409401
}}
410402
/>
411403
</View>
412404
<View style={styles.rowContainer}>
413405
<Text>Speed limit icon</Text>
414-
<Switch
415-
value={speedLimitIconEnabled}
416-
onValueChange={() => {
406+
<Button
407+
title={speedLimitIconEnabled ? 'Disable' : 'Enable'}
408+
onPress={() => {
417409
toggleSpeedLimitIconEnabled(!speedLimitIconEnabled);
418410
}}
419411
/>
420412
</View>
421413
<View style={styles.rowContainer}>
422414
<Text>Speedometer</Text>
423-
<Switch
424-
value={speedometerEnabled}
425-
onValueChange={() => {
415+
<Button
416+
title={speedometerEnabled ? 'Disable' : 'Enable'}
417+
onPress={() => {
426418
toggleSpeedometerEnabled(!speedometerEnabled);
427419
}}
428420
/>
429421
</View>
430422
<View style={styles.rowContainer}>
431423
<Text>Traffic incidents card</Text>
432-
<Switch
433-
value={trafficIncidentCardsEnabled}
434-
onValueChange={() => {
424+
<Button
425+
title={trafficIncidentCardsEnabled ? 'Disable' : 'Enable'}
426+
onPress={() => {
435427
toggleTrafficIncidentCardsEnabled(!trafficIncidentCardsEnabled);
436428
}}
437429
/>
438430
</View>
439431
<View style={styles.rowContainer}>
440432
<Text>Navigation UI</Text>
441-
<Switch
442-
value={navigationUiEnabled}
443-
onValueChange={() => {
433+
<Button
434+
title={navigationUiEnabled ? 'Disable' : 'Enable'}
435+
onPress={() => {
444436
toggleNavigationUiEnabled(!navigationUiEnabled);
445437
}}
446438
/>
447439
</View>
448440
<View style={styles.rowContainer}>
449441
<Text>Turn-by-turn logging</Text>
450-
<Switch
451-
value={turnByTurnLoggingEnabled}
452-
onValueChange={() => {
442+
<Button
443+
title={turnByTurnLoggingEnabled ? 'Disable' : 'Enable'}
444+
onPress={() => {
453445
toggleTurnByTurnLoggingEnabled(!turnByTurnLoggingEnabled);
454446
}}
455447
/>
456448
</View>
457449
{Platform.OS === 'ios' ? (
458450
<View style={styles.rowContainer}>
459451
<Text>Background location updates</Text>
460-
<Switch
461-
value={backgroundLocationUpdatesEnabled}
462-
onValueChange={() => {
452+
<Button
453+
title={backgroundLocationUpdatesEnabled ? 'Disable' : 'Enable'}
454+
onPress={() => {
463455
toggleBackgroundLocationUpdatesEnabled(
464456
!backgroundLocationUpdatesEnabled
465457
);
@@ -469,27 +461,27 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
469461
) : null}
470462
<View style={styles.rowContainer}>
471463
<Text>Recenter button</Text>
472-
<Switch
473-
value={recenterButtonEnabled}
474-
onValueChange={() => {
464+
<Button
465+
title={recenterButtonEnabled ? 'Disable' : 'Enable'}
466+
onPress={() => {
475467
toggleRecenterButtonEnabled(!recenterButtonEnabled);
476468
}}
477469
/>
478470
</View>
479471
<View style={styles.rowContainer}>
480472
<Text>Header enabled</Text>
481-
<Switch
482-
value={headerEnabled}
483-
onValueChange={() => {
473+
<Button
474+
title={headerEnabled ? 'Disable' : 'Enable'}
475+
onPress={() => {
484476
toggleHeaderEnabled(!headerEnabled);
485477
}}
486478
/>
487479
</View>
488480
<View style={styles.rowContainer}>
489481
<Text>Footer enabled</Text>
490-
<Switch
491-
value={footerEnabled}
492-
onValueChange={() => {
482+
<Button
483+
title={footerEnabled ? 'Disable' : 'Enable'}
484+
onPress={() => {
493485
toggleFooterEnabled(!footerEnabled);
494486
}}
495487
/>

‎example/src/screens/NavigationScreen.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import React, { useEffect, useState, useMemo, useCallback } from 'react';
18-
import { Button, Switch, Text, View } from 'react-native';
18+
import { Button, View } from 'react-native';
1919
import Snackbar from 'react-native-snackbar';
2020

2121
import {
@@ -413,15 +413,12 @@ const NavigationScreen = () => {
413413
{mapViewAutoAvailable && (
414414
<Button title="Auto" onPress={onShowAutoMapsControlsClick} />
415415
)}
416-
<View style={styles.rowContainer}>
417-
<Text>Margin</Text>
418-
<Switch
419-
value={!!margin}
420-
onValueChange={() => {
421-
setMargin(margin ? null : marginAmount);
422-
}}
423-
/>
424-
</View>
416+
<Button
417+
title={margin ? 'Margin on' : 'Margin off'}
418+
onPress={() => {
419+
setMargin(margin ? null : marginAmount);
420+
}}
421+
/>
425422
</View>
426423
</View>
427424
) : (

‎example/src/styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ const styles = StyleSheet.create({
4242
flexDirection: 'row',
4343
justifyContent: 'space-between',
4444
alignItems: 'center',
45-
color: 'white',
4645
},
4746
controlButtons: {
4847
alignSelf: 'stretch',

0 commit comments

Comments
 (0)