Skip to content

Commit 9a4d323

Browse files
lukewalczaklukewalczak
authored
refactor: remove MD2 theme (#4725)
* refactor: remove MD2 theme related code * refactor: remove MD2 from example * refactor: remove MD2 from all examples * fix: revert gitignore
1 parent 3e297da commit 9a4d323

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+692
-1732
lines changed

‎example/src/DrawerItems.tsx‎

Lines changed: 24 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,15 @@ import {
99
Button,
1010
Dialog,
1111
Drawer,
12-
MD2Colors,
1312
MD3Colors,
1413
Switch,
1514
Text,
1615
TouchableRipple,
1716
Portal,
17+
useTheme,
1818
} from 'react-native-paper';
1919

2020
import { deviceColorsSupported, isWeb } from '../utils';
21-
import { useExampleTheme } from './hooks/useExampleTheme';
2221
import { PreferencesContext } from './PreferencesContext';
2322

2423
const DrawerItemsData = [
@@ -96,7 +95,7 @@ function DrawerItems() {
9695

9796
const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
9897

99-
const { isV3, colors } = useExampleTheme();
98+
const { colors } = useTheme();
10099
const isIOS = Platform.OS === 'ios';
101100
const expoGoExecution =
102101
Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
@@ -107,7 +106,6 @@ function DrawerItems() {
107106
toggleShouldUseDeviceColors,
108107
toggleTheme,
109108
toggleRtl: toggleRTL,
110-
toggleThemeVersion,
111109
toggleCollapsed,
112110
toggleCustomFont,
113111
toggleRippleEffect,
@@ -137,14 +135,10 @@ function DrawerItems() {
137135
};
138136

139137
const coloredLabelTheme = {
140-
colors: isV3
141-
? {
142-
secondaryContainer: MD3Colors.tertiary80,
143-
onSecondaryContainer: MD3Colors.tertiary20,
144-
}
145-
: {
146-
primary: MD2Colors.tealA200,
147-
},
138+
colors: {
139+
secondaryContainer: MD3Colors.tertiary80,
140+
onSecondaryContainer: MD3Colors.tertiary20,
141+
},
148142
};
149143

150144
return (
@@ -157,7 +151,7 @@ function DrawerItems() {
157151
},
158152
]}
159153
>
160-
{isV3 && collapsed && (
154+
{collapsed && (
161155
<Drawer.Section style={styles.collapsedSection}>
162156
{DrawerCollapsedItemsData.map((props, index) => (
163157
<Drawer.CollapsedItem
@@ -187,9 +181,9 @@ function DrawerItems() {
187181
</Drawer.Section>
188182

189183
<Drawer.Section title="Preferences">
190-
{deviceColorsSupported && isV3 ? (
184+
{deviceColorsSupported ? (
191185
<TouchableRipple onPress={toggleShouldUseDeviceColors}>
192-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
186+
<View style={styles.preference}>
193187
<Text variant="labelLarge">Use device colors *</Text>
194188
<View pointerEvents="none">
195189
<Switch value={shouldUseDeviceColors} />
@@ -198,7 +192,7 @@ function DrawerItems() {
198192
</TouchableRipple>
199193
) : null}
200194
<TouchableRipple onPress={toggleTheme}>
201-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
195+
<View style={styles.preference}>
202196
<Text variant="labelLarge">Dark Theme</Text>
203197
<View pointerEvents="none">
204198
<Switch value={isDarkTheme} />
@@ -208,7 +202,7 @@ function DrawerItems() {
208202

209203
{!isWeb && (
210204
<TouchableRipple onPress={_handleToggleRTL}>
211-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
205+
<View style={styles.preference}>
212206
<Text variant="labelLarge">RTL</Text>
213207
<View pointerEvents="none">
214208
<Switch value={isRTL} />
@@ -217,39 +211,26 @@ function DrawerItems() {
217211
</TouchableRipple>
218212
)}
219213

220-
<TouchableRipple onPress={toggleThemeVersion}>
221-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
222-
<Text variant="labelLarge">MD 2</Text>
214+
<TouchableRipple onPress={toggleCollapsed}>
215+
<View style={styles.preference}>
216+
<Text variant="labelLarge">Collapsed drawer *</Text>
223217
<View pointerEvents="none">
224-
<Switch value={!isV3} />
218+
<Switch value={collapsed} />
225219
</View>
226220
</View>
227221
</TouchableRipple>
228222

229-
{isV3 && (
230-
<TouchableRipple onPress={toggleCollapsed}>
231-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
232-
<Text variant="labelLarge">Collapsed drawer *</Text>
233-
<View pointerEvents="none">
234-
<Switch value={collapsed} />
235-
</View>
236-
</View>
237-
</TouchableRipple>
238-
)}
239-
240-
{isV3 && (
241-
<TouchableRipple onPress={toggleCustomFont}>
242-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
243-
<Text variant="labelLarge">Custom font *</Text>
244-
<View pointerEvents="none">
245-
<Switch value={customFontLoaded} />
246-
</View>
223+
<TouchableRipple onPress={toggleCustomFont}>
224+
<View style={styles.preference}>
225+
<Text variant="labelLarge">Custom font *</Text>
226+
<View pointerEvents="none">
227+
<Switch value={customFontLoaded} />
247228
</View>
248-
</TouchableRipple>
249-
)}
229+
</View>
230+
</TouchableRipple>
250231

251232
<TouchableRipple onPress={toggleRippleEffect}>
252-
<View style={[styles.preference, isV3 && styles.v3Preference]}>
233+
<View style={styles.preference}>
253234
<Text variant="labelLarge">
254235
{isIOS ? 'Highlight' : 'Ripple'} effect *
255236
</Text>
@@ -259,7 +240,7 @@ function DrawerItems() {
259240
</View>
260241
</TouchableRipple>
261242
</Drawer.Section>
262-
{isV3 && !collapsed && (
243+
{!collapsed && (
263244
<Text variant="bodySmall" style={styles.annotation}>
264245
* - available only for MD3
265246
</Text>
@@ -301,9 +282,6 @@ const styles = StyleSheet.create({
301282
justifyContent: 'space-between',
302283
alignItems: 'center',
303284
paddingVertical: 12,
304-
paddingHorizontal: 16,
305-
},
306-
v3Preference: {
307285
height: 56,
308286
paddingHorizontal: 28,
309287
},

‎example/src/ExampleList.tsx‎

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

44
import type { StackNavigationProp } from '@react-navigation/stack';
5-
import { Divider, List } from 'react-native-paper';
5+
import { Divider, List, useTheme } from 'react-native-paper';
66
import { useSafeAreaInsets } from 'react-native-safe-area-context';
77

88
import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
@@ -49,7 +49,6 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
4949
import ToggleButtonExample from './Examples/ToggleButtonExample';
5050
import TooltipExample from './Examples/TooltipExample';
5151
import TouchableRippleExample from './Examples/TouchableRippleExample';
52-
import { useExampleTheme } from './hooks/useExampleTheme';
5352

5453
export const mainExamples: Record<
5554
string,
@@ -132,16 +131,12 @@ const data = Object.keys(mainExamples).map(
132131
export default function ExampleList({ navigation }: Props) {
133132
const keyExtractor = (item: { id: string }) => item.id;
134133

135-
const { colors, isV3 } = useExampleTheme();
134+
const { colors } = useTheme();
136135
const safeArea = useSafeAreaInsets();
137136

138137
const renderItem = ({ item }: { item: Item }) => {
139138
const { data, id } = item;
140139

141-
if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
142-
return null;
143-
}
144-
145140
return (
146141
<List.Item
147142
unstable_pressDelay={65}

‎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 & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,14 @@ 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, useTheme } from 'react-native-paper';
137

148
import CustomFAB from './CustomFAB';
159
import CustomFABControls, {
1610
Controls,
1711
initialControls,
1812
} from './CustomFABControls';
1913
import { animatedFABExampleData } from '../../../utils';
20-
import { useExampleTheme } from '../../hooks/useExampleTheme';
2114

2215
type Item = {
2316
id: string;
@@ -32,7 +25,7 @@ type Item = {
3225
};
3326

3427
const AnimatedFABExample = () => {
35-
const { colors, isV3 } = useExampleTheme();
28+
const { colors } = useTheme();
3629

3730
const isIOS = Platform.OS === 'ios';
3831

@@ -47,63 +40,55 @@ const AnimatedFABExample = () => {
4740

4841
const renderItem = React.useCallback(
4942
({ item }: { item: Item }) => {
50-
const TextComponent = isV3 ? Text : Paragraph;
51-
5243
return (
5344
<View style={styles.itemContainer}>
5445
<Avatar.Text
5546
style={[styles.avatar, { backgroundColor: item.bgColor }]}
5647
label={item.initials}
57-
color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
48+
color={MD3Colors.primary100}
5849
size={40}
5950
/>
6051
<View style={styles.itemTextContentContainer}>
6152
<View style={styles.itemHeaderContainer}>
62-
<TextComponent
53+
<Text
6354
variant="labelLarge"
6455
style={[styles.header, !item.read && styles.read]}
6556
ellipsizeMode="tail"
6657
numberOfLines={1}
6758
>
6859
{item.sender}
69-
</TextComponent>
70-
<TextComponent
60+
</Text>
61+
<Text
7162
variant="labelLarge"
7263
style={[styles.date, !item.read && styles.read]}
7364
>
7465
{item.date}
75-
</TextComponent>
66+
</Text>
7667
</View>
7768

7869
<View style={styles.itemMessageContainer}>
7970
<View style={styles.flex}>
80-
<TextComponent
71+
<Text
8172
variant="labelLarge"
8273
ellipsizeMode="tail"
8374
numberOfLines={1}
8475
style={!item.read && styles.read}
8576
>
8677
{item.header}
87-
</TextComponent>
88-
<TextComponent
78+
</Text>
79+
<Text
8980
variant="labelLarge"
9081
numberOfLines={1}
9182
ellipsizeMode="tail"
9283
>
9384
{item.message}
94-
</TextComponent>
85+
</Text>
9586
</View>
9687

9788
<Icon
9889
name={item.favorite ? 'star' : 'star-outline'}
9990
color={
100-
item.favorite
101-
? isV3
102-
? MD3Colors.error70
103-
: MD2Colors.orange500
104-
: isV3
105-
? MD3Colors.neutralVariant70
106-
: MD2Colors.grey500
91+
item.favorite ? MD3Colors.error70 : MD3Colors.neutralVariant70
10792
}
10893
size={20}
10994
onPress={() => setVisible(!visible)}
@@ -114,7 +99,7 @@ const AnimatedFABExample = () => {
11499
</View>
115100
);
116101
},
117-
[visible, isV3]
102+
[visible]
118103
);
119104

120105
const onScroll = ({

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import {
99

1010
import { AnimatedFAB } from 'react-native-paper';
1111

12-
import { useExampleTheme } from '../../hooks/useExampleTheme';
13-
1412
type CustomFABProps = {
1513
animatedValue: Animated.Value;
1614
visible: boolean;
@@ -31,7 +29,6 @@ const CustomFAB = ({
3129
iconMode,
3230
}: CustomFABProps) => {
3331
const [isExtended, setIsExtended] = React.useState(true);
34-
const { isV3 } = useExampleTheme();
3532

3633
const isIOS = Platform.OS === 'ios';
3734

@@ -50,7 +47,7 @@ const CustomFAB = ({
5047
icon={'plus'}
5148
label={label}
5249
extended={isExtended}
53-
uppercase={!isV3}
50+
uppercase={false}
5451
onPress={() => console.log('Pressed')}
5552
visible={visible}
5653
animateFrom={animateFrom}

0 commit comments

Comments
 (0)