Skip to content

Commit 41cb4f3

Browse files
lukewalczaklukewalczak
committed
refactor: remove MD2 from example
1 parent ce31b01 commit 41cb4f3

22 files changed

+90
-239
lines changed

‎example/src/Examples/ActivityIndicatorExample.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
33

4-
import {
5-
ActivityIndicator,
6-
FAB,
7-
List,
8-
MD2Colors,
9-
MD3Colors,
10-
} from 'react-native-paper';
4+
import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper';
115

12-
import { useExampleTheme } from '../hooks/useExampleTheme';
136
import ScreenWrapper from '../ScreenWrapper';
147

158
const ActivityIndicatorExample = () => {
169
const [animating, setAnimating] = React.useState<boolean>(true);
17-
const { isV3 } = useExampleTheme();
1810

1911
return (
2012
<ScreenWrapper style={styles.container}>
@@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => {
4941
<List.Section title="Custom color">
5042
<ActivityIndicator
5143
animating={animating}
52-
color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
44+
color={MD3Colors.error20}
5345
hidesWhenStopped={false}
5446
/>
5547
</List.Section>

‎example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
33
import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
44

55
import Icon from '@expo/vector-icons/MaterialCommunityIcons';
6-
import {
7-
Avatar,
8-
MD2Colors,
9-
MD3Colors,
10-
Paragraph,
11-
Text,
12-
} from 'react-native-paper';
6+
import { Avatar, MD3Colors, Text } from 'react-native-paper';
137

148
import CustomFAB from './CustomFAB';
159
import CustomFABControls, {
@@ -32,7 +26,7 @@ type Item = {
3226
};
3327

3428
const AnimatedFABExample = () => {
35-
const { colors, isV3 } = useExampleTheme();
29+
const { colors } = useExampleTheme();
3630

3731
const isIOS = Platform.OS === 'ios';
3832

@@ -47,63 +41,55 @@ const AnimatedFABExample = () => {
4741

4842
const renderItem = React.useCallback(
4943
({ item }: { item: Item }) => {
50-
const TextComponent = isV3 ? Text : Paragraph;
51-
5244
return (
5345
<View style={styles.itemContainer}>
5446
<Avatar.Text
5547
style={[styles.avatar, { backgroundColor: item.bgColor }]}
5648
label={item.initials}
57-
color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
49+
color={MD3Colors.primary100}
5850
size={40}
5951
/>
6052
<View style={styles.itemTextContentContainer}>
6153
<View style={styles.itemHeaderContainer}>
62-
<TextComponent
54+
<Text
6355
variant="labelLarge"
6456
style={[styles.header, !item.read && styles.read]}
6557
ellipsizeMode="tail"
6658
numberOfLines={1}
6759
>
6860
{item.sender}
69-
</TextComponent>
70-
<TextComponent
61+
</Text>
62+
<Text
7163
variant="labelLarge"
7264
style={[styles.date, !item.read && styles.read]}
7365
>
7466
{item.date}
75-
</TextComponent>
67+
</Text>
7668
</View>
7769

7870
<View style={styles.itemMessageContainer}>
7971
<View style={styles.flex}>
80-
<TextComponent
72+
<Text
8173
variant="labelLarge"
8274
ellipsizeMode="tail"
8375
numberOfLines={1}
8476
style={!item.read && styles.read}
8577
>
8678
{item.header}
87-
</TextComponent>
88-
<TextComponent
79+
</Text>
80+
<Text
8981
variant="labelLarge"
9082
numberOfLines={1}
9183
ellipsizeMode="tail"
9284
>
9385
{item.message}
94-
</TextComponent>
86+
</Text>
9587
</View>
9688

9789
<Icon
9890
name={item.favorite ? 'star' : 'star-outline'}
9991
color={
100-
item.favorite
101-
? isV3
102-
? MD3Colors.error70
103-
: MD2Colors.orange500
104-
: isV3
105-
? MD3Colors.neutralVariant70
106-
: MD2Colors.grey500
92+
item.favorite ? MD3Colors.error70 : MD3Colors.neutralVariant70
10793
}
10894
size={20}
10995
onPress={() => setVisible(!visible)}
@@ -114,7 +100,7 @@ const AnimatedFABExample = () => {
114100
</View>
115101
);
116102
},
117-
[visible, isV3]
103+
[visible]
118104
);
119105

120106
const onScroll = ({

‎example/src/Examples/AvatarExample.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
33

4-
import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
4+
import { Avatar, List, MD3Colors } from 'react-native-paper';
55

6-
import { useExampleTheme } from '../hooks/useExampleTheme';
76
import ScreenWrapper from '../ScreenWrapper';
87

98
const AvatarExample = () => {
10-
const { isV3 } = useExampleTheme();
119
return (
1210
<ScreenWrapper>
1311
<List.Section title="Text">
@@ -16,11 +14,11 @@ const AvatarExample = () => {
1614
style={[
1715
styles.avatar,
1816
{
19-
backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
17+
backgroundColor: MD3Colors.error70,
2018
},
2119
]}
2220
label="XD"
23-
color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
21+
color={MD3Colors.primary0}
2422
/>
2523
<Avatar.Text style={styles.avatar} label="XD" />
2624
<Avatar.Text style={styles.avatar} label="XD" size={80} />
@@ -32,11 +30,11 @@ const AvatarExample = () => {
3230
style={[
3331
styles.avatar,
3432
{
35-
backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
33+
backgroundColor: MD3Colors.error70,
3634
},
3735
]}
3836
icon="folder"
39-
color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
37+
color={MD3Colors.primary0}
4038
/>
4139
<Avatar.Icon style={styles.avatar} icon="folder" />
4240
<Avatar.Icon style={styles.avatar} icon="folder" size={80} />

‎example/src/Examples/BadgeExample.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,15 @@ import {
55
Badge,
66
IconButton,
77
List,
8-
MD2Colors,
98
MD3Colors,
109
Text,
1110
Switch,
1211
} from 'react-native-paper';
1312

14-
import { useExampleTheme } from '../hooks/useExampleTheme';
1513
import ScreenWrapper from '../ScreenWrapper';
1614

1715
const BadgeExample = () => {
1816
const [visible, setVisible] = React.useState<boolean>(true);
19-
const { isV3 } = useExampleTheme();
2017

2118
return (
2219
<ScreenWrapper>
@@ -44,9 +41,7 @@ const BadgeExample = () => {
4441
style={[
4542
styles.badge,
4643
{
47-
backgroundColor: isV3
48-
? MD3Colors.primary80
49-
: MD2Colors.blue500,
44+
backgroundColor: MD3Colors.primary80,
5045
},
5146
]}
5247
>
@@ -59,11 +54,11 @@ const BadgeExample = () => {
5954
<View style={styles.row}>
6055
<View style={styles.item}>
6156
<IconButton icon="book-open" size={36} style={styles.button} />
62-
<Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
57+
<Badge visible={visible} style={styles.badge} size={6} />
6358
</View>
6459
<View style={styles.item}>
6560
<IconButton icon="receipt" size={36} style={styles.button} />
66-
<Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
61+
<Badge visible={visible} style={styles.badge} size={6} />
6762
</View>
6863
</View>
6964
</List.Section>

‎example/src/Examples/BannerExample.tsx‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
View,
99
} from 'react-native';
1010

11-
import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
11+
import { Banner, FAB, MD3Colors } from 'react-native-paper';
1212

1313
import { useExampleTheme } from '../hooks/useExampleTheme';
1414
import ScreenWrapper from '../ScreenWrapper';
@@ -29,25 +29,16 @@ const BannerExample = () => {
2929
setHeight(layoutHeight);
3030
};
3131

32-
const customTheme = !defaultTheme.isV3
33-
? {
34-
...defaultTheme,
35-
colors: {
36-
text: MD2Colors.white,
37-
surface: MD2Colors.blue200,
38-
primary: MD2Colors.purple900,
39-
},
40-
}
41-
: {
42-
...defaultTheme,
43-
colors: {
44-
onSurface: MD3Colors.tertiary100,
45-
elevation: {
46-
level1: MD3Colors.tertiary50,
47-
},
48-
primary: MD3Colors.tertiary10,
49-
},
50-
};
32+
const customTheme = {
33+
...defaultTheme,
34+
colors: {
35+
onSurface: MD3Colors.tertiary100,
36+
elevation: {
37+
level1: MD3Colors.tertiary50,
38+
},
39+
primary: MD3Colors.tertiary10,
40+
},
41+
};
5142

5243
return (
5344
<>

‎example/src/Examples/CheckboxExample.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
33

4-
import {
5-
Checkbox,
6-
MD2Colors,
7-
MD3Colors,
8-
Paragraph,
9-
Text,
10-
TouchableRipple,
11-
} from 'react-native-paper';
4+
import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper';
125

13-
import { useExampleTheme } from '../hooks/useExampleTheme';
146
import ScreenWrapper from '../ScreenWrapper';
157

168
const CheckboxExample = () => {
179
const [checkedNormal, setCheckedNormal] = React.useState<boolean>(true);
1810
const [checkedCustom, setCheckedCustom] = React.useState<boolean>(true);
1911
const [indeterminate, setIndeterminate] = React.useState<boolean>(true);
2012

21-
const { isV3 } = useExampleTheme();
22-
const TextComponent = isV3 ? Text : Paragraph;
23-
2413
return (
2514
<ScreenWrapper style={styles.container}>
2615
<TouchableRipple onPress={() => setCheckedNormal(!checkedNormal)}>
2716
<View style={styles.row}>
28-
<TextComponent>Normal</TextComponent>
17+
<Text>Normal</Text>
2918
<View pointerEvents="none">
3019
<Checkbox status={checkedNormal ? 'checked' : 'unchecked'} />
3120
</View>
@@ -34,10 +23,10 @@ const CheckboxExample = () => {
3423

3524
<TouchableRipple onPress={() => setCheckedCustom(!checkedCustom)}>
3625
<View style={styles.row}>
37-
<TextComponent>Custom</TextComponent>
26+
<Text>Custom</Text>
3827
<View pointerEvents="none">
3928
<Checkbox
40-
color={isV3 ? MD3Colors.error70 : MD2Colors.blue500}
29+
color={MD3Colors.error70}
4130
status={checkedCustom ? 'checked' : 'unchecked'}
4231
/>
4332
</View>
@@ -46,23 +35,23 @@ const CheckboxExample = () => {
4635

4736
<TouchableRipple onPress={() => setIndeterminate(!indeterminate)}>
4837
<View style={styles.row}>
49-
<TextComponent>Indeterminate</TextComponent>
38+
<Text>Indeterminate</Text>
5039
<View pointerEvents="none">
5140
<Checkbox status={indeterminate ? 'indeterminate' : 'unchecked'} />
5241
</View>
5342
</View>
5443
</TouchableRipple>
5544

5645
<View style={styles.row}>
57-
<TextComponent>Checked (Disabled)</TextComponent>
46+
<Text>Checked (Disabled)</Text>
5847
<Checkbox status="checked" disabled />
5948
</View>
6049
<View style={styles.row}>
61-
<TextComponent>Unchecked (Disabled)</TextComponent>
50+
<Text>Unchecked (Disabled)</Text>
6251
<Checkbox status="unchecked" disabled />
6352
</View>
6453
<View style={styles.row}>
65-
<TextComponent>Indeterminate (Disabled)</TextComponent>
54+
<Text>Indeterminate (Disabled)</Text>
6655
<Checkbox status="indeterminate" disabled />
6756
</View>
6857
</ScreenWrapper>

‎example/src/Examples/ChipExample.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import * as React from 'react';
22
import { Image, StyleSheet, View } from 'react-native';
33

44
import color from 'color';
5-
import {
6-
Chip,
7-
List,
8-
MD2Colors,
9-
MD3Colors,
10-
Snackbar,
11-
Text,
12-
} from 'react-native-paper';
5+
import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper';
136

147
import { useExampleTheme } from '../hooks/useExampleTheme';
158
import ScreenWrapper from '../ScreenWrapper';
@@ -20,7 +13,7 @@ const ChipExample = () => {
2013
text: '',
2114
});
2215
const { isV3 } = useExampleTheme();
23-
const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900;
16+
const customColor = MD3Colors.error50;
2417

2518
return (
2619
<>

0 commit comments

Comments
 (0)