Skip to content

Commit c4f851c

Browse files
jokerttujokerttu
authored
docs: improve example app usability (#514)
1 parent c5f1fac commit c4f851c

File tree

10 files changed

+292
-142
lines changed

10 files changed

+292
-142
lines changed

‎example/src/App.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ import {
2323
} from '@react-navigation/native';
2424
import { useSafeAreaInsets } from 'react-native-safe-area-context';
2525
import { createStackNavigator } from '@react-navigation/stack';
26-
import { View, Button, Text } from 'react-native';
26+
import { View, Text } from 'react-native';
2727
import { CommonStyles } from './styles/components';
28+
import { ExampleAppButton } from './controls/ExampleAppButton';
2829
import NavigationScreen from './screens/NavigationScreen';
2930
import MultipleMapsScreen from './screens/MultipleMapsScreen';
3031
import MapIdScreen from './screens/MapIdScreen';
@@ -78,31 +79,32 @@ const HomeScreen = () => {
7879
</View>
7980
{/* Spacer */}
8081
<View style={CommonStyles.buttonContainer}>
81-
<Button
82+
<ExampleAppButton
8283
title="Navigation"
8384
onPress={() => isFocused && navigate('Navigation')}
8485
/>
8586
</View>
8687
<View style={CommonStyles.buttonContainer}>
87-
<Button
88+
<ExampleAppButton
8889
title="Multiple Maps"
8990
onPress={() => isFocused && navigate('Multiple maps')}
9091
/>
9192
</View>
9293
<View style={CommonStyles.buttonContainer}>
93-
<Button
94+
<ExampleAppButton
9495
title="Map ID"
9596
onPress={() => isFocused && navigate('Map ID')}
9697
/>
9798
</View>
9899
{/* Spacer */}
99100
<View style={CommonStyles.container} />
100101
<View style={CommonStyles.buttonContainer}>
101-
<Button
102-
color="grey"
102+
<ExampleAppButton
103103
title="Integration Tests"
104-
testID="integration_tests_button"
105104
onPress={() => isFocused && navigate('Integration tests')}
105+
backgroundColor="grey"
106+
pressedBackgroundColor="darkGrey"
107+
testID="integration_tests_button"
106108
/>
107109
</View>
108110
</View>

‎example/src/controls/ExampleAppButton.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import { Pressable, Text, StyleSheet } from 'react-native';
19+
import { Colors, BorderRadius, Typography, Spacing } from '../styles/theme';
20+
21+
type ExampleAppButtonProps = {
22+
title: string;
23+
onPress: () => void;
24+
backgroundColor?: string;
25+
pressedBackgroundColor?: string;
26+
textColor?: string;
27+
disabled?: boolean;
28+
testID?: string;
29+
};
30+
31+
export const ExampleAppButton = ({
32+
title,
33+
onPress,
34+
backgroundColor,
35+
pressedBackgroundColor: pressedColor,
36+
textColor: textColor,
37+
disabled = false,
38+
testID,
39+
}: ExampleAppButtonProps) => {
40+
const resolvedBackground = disabled
41+
? Colors.buttonDisabled
42+
: (backgroundColor ?? Colors.button);
43+
const resolvedPressed = disabled
44+
? Colors.buttonDisabled
45+
: (pressedColor ?? Colors.buttonPressed);
46+
const resolvedTextColor = disabled
47+
? Colors.textDisabled
48+
: (textColor ?? Colors.buttonText);
49+
50+
return (
51+
<Pressable
52+
testID={testID}
53+
onPress={disabled ? undefined : onPress}
54+
disabled={disabled}
55+
android_ripple={
56+
disabled ? undefined : { color: 'rgba(0,0,0,0.15)', foreground: true }
57+
}
58+
style={({ pressed }) => [
59+
styles.buttonBase,
60+
{
61+
backgroundColor:
62+
pressed && !disabled ? resolvedPressed : resolvedBackground,
63+
},
64+
disabled && styles.buttonDisabled,
65+
]}
66+
>
67+
<Text
68+
style={[
69+
styles.buttonText,
70+
{
71+
color: resolvedTextColor,
72+
},
73+
]}
74+
>
75+
{title}
76+
</Text>
77+
</Pressable>
78+
);
79+
};
80+
81+
const styles = StyleSheet.create({
82+
buttonBase: {
83+
paddingVertical: Spacing.md,
84+
paddingHorizontal: Spacing.lg,
85+
borderRadius: BorderRadius.lg,
86+
alignItems: 'center',
87+
marginVertical: Spacing.xs,
88+
},
89+
buttonText: {
90+
fontWeight: Typography.fontWeight.semibold,
91+
fontSize: Typography.fontSize.md,
92+
},
93+
buttonDisabled: {
94+
opacity: 0.6,
95+
},
96+
});

‎example/src/controls/mapsControls.tsx‎

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

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

19-
import { Button, Text, TextInput, View } from 'react-native';
19+
import { Text, TextInput, View } from 'react-native';
20+
import { ExampleAppButton } from './ExampleAppButton';
2021

2122
import SelectDropdown from 'react-native-select-dropdown';
2223
import { ControlStyles } from '../styles/components';
@@ -255,35 +256,41 @@ const MapsControls: React.FC<MapControlsProps> = ({
255256
placeholderTextColor="#000"
256257
keyboardType="numeric"
257258
/>
258-
<Button title="Move camera" onPress={moveCamera} />
259-
<Button
259+
<ExampleAppButton title="Move camera" onPress={moveCamera} />
260+
<ExampleAppButton
260261
title="Zoom in"
261262
onPress={() => {
262263
setZoom((zoom ?? defaultZoom) + 1);
263264
}}
264265
/>
265-
<Button
266+
<ExampleAppButton
266267
title="Zoom Out"
267268
onPress={() => {
268269
setZoom((zoom ?? defaultZoom) - 1);
269270
}}
270271
/>
271-
<Button title="Add marker" onPress={() => addMarker()} />
272-
<Button title="Add custom marker" onPress={() => addCustomMarker()} />
273-
<Button title="Add circle" onPress={addCircle} />
274-
<Button title="Add polyline" onPress={addPolyline} />
275-
<Button title="Add polygon" onPress={addPolygon} />
276-
<Button title="Clear map view" onPress={clearMapView} />
277-
<Button title="Get UI Settings" onPress={getUiSettings} />
278-
<Button title="Get My location" onPress={getMyLocation} />
279-
<Button
272+
<ExampleAppButton title="Add marker" onPress={() => addMarker()} />
273+
<ExampleAppButton
274+
title="Add custom marker"
275+
onPress={() => addCustomMarker()}
276+
/>
277+
<ExampleAppButton title="Add circle" onPress={addCircle} />
278+
<ExampleAppButton title="Add polyline" onPress={addPolyline} />
279+
<ExampleAppButton title="Add polygon" onPress={addPolygon} />
280+
<ExampleAppButton title="Clear map view" onPress={clearMapView} />
281+
<ExampleAppButton title="Get UI Settings" onPress={getUiSettings} />
282+
<ExampleAppButton title="Get My location" onPress={getMyLocation} />
283+
<ExampleAppButton
280284
title="Get My location enabled"
281285
onPress={getIsMyLocationEnabled}
282286
/>
283-
<Button title="Get camera position" onPress={getCameraPositionClicked} />
287+
<ExampleAppButton
288+
title="Get camera position"
289+
onPress={getCameraPositionClicked}
290+
/>
284291
<View style={ControlStyles.rowContainer}>
285292
<Text>Location marker</Text>
286-
<Button
293+
<ExampleAppButton
287294
title={enableLocationMarker ? 'Disable' : 'Enable'}
288295
onPress={() => {
289296
setEnableLocationMarker(!enableLocationMarker);
@@ -325,7 +332,7 @@ const MapsControls: React.FC<MapControlsProps> = ({
325332
<View style={ControlStyles.controlButtonGap} />
326333
<View style={ControlStyles.rowContainer}>
327334
<Text>Custom map paddings</Text>
328-
<Button
335+
<ExampleAppButton
329336
title={customPaddingEnabled ? 'Disable' : 'Enable'}
330337
onPress={toggleCustomPadding}
331338
/>

0 commit comments

Comments
 (0)