Skip to content

refactor: remove MD2 theme #4725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 13, 2025
Merged

refactor: remove MD2 theme #4725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce31b01
refactor: remove MD2 theme related code
lukewalczak May 9, 2025
41cb4f3
refactor: remove MD2 from example
lukewalczak May 9, 2025
64b3745
refactor: remove MD2 from all examples
lukewalczak May 9, 2025
55513cf
fix: revert gitignore
lukewalczak May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 24 additions & 46 deletions example/src/DrawerItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,15 @@ import {
Button,
Dialog,
Drawer,
MD2Colors,
MD3Colors,
Switch,
Text,
TouchableRipple,
Portal,
useTheme,
} from 'react-native-paper';

import { deviceColorsSupported, isWeb } from '../utils';
import { useExampleTheme } from './hooks/useExampleTheme';
import { PreferencesContext } from './PreferencesContext';

const DrawerItemsData = [
Expand Down Expand Up @@ -96,7 +95,7 @@ function DrawerItems() {

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

const { isV3, colors } = useExampleTheme();
const { colors } = useTheme();
const isIOS = Platform.OS === 'ios';
const expoGoExecution =
Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
Expand All @@ -107,7 +106,6 @@ function DrawerItems() {
toggleShouldUseDeviceColors,
toggleTheme,
toggleRtl: toggleRTL,
toggleThemeVersion,
toggleCollapsed,
toggleCustomFont,
toggleRippleEffect,
Expand Down Expand Up @@ -137,14 +135,10 @@ function DrawerItems() {
};

const coloredLabelTheme = {
colors: isV3
? {
secondaryContainer: MD3Colors.tertiary80,
onSecondaryContainer: MD3Colors.tertiary20,
}
: {
primary: MD2Colors.tealA200,
},
colors: {
secondaryContainer: MD3Colors.tertiary80,
onSecondaryContainer: MD3Colors.tertiary20,
},
};

return (
Expand All @@ -157,7 +151,7 @@ function DrawerItems() {
},
]}
>
{isV3 && collapsed && (
{collapsed && (
<Drawer.Section style={styles.collapsedSection}>
{DrawerCollapsedItemsData.map((props, index) => (
<Drawer.CollapsedItem
Expand Down Expand Up @@ -187,9 +181,9 @@ function DrawerItems() {
</Drawer.Section>

<Drawer.Section title="Preferences">
{deviceColorsSupported && isV3 ? (
{deviceColorsSupported ? (
<TouchableRipple onPress={toggleShouldUseDeviceColors}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<View style={styles.preference}>
<Text variant="labelLarge">Use device colors *</Text>
<View pointerEvents="none">
<Switch value={shouldUseDeviceColors} />
Expand All @@ -198,7 +192,7 @@ function DrawerItems() {
</TouchableRipple>
) : null}
<TouchableRipple onPress={toggleTheme}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<View style={styles.preference}>
<Text variant="labelLarge">Dark Theme</Text>
<View pointerEvents="none">
<Switch value={isDarkTheme} />
Expand All @@ -208,7 +202,7 @@ function DrawerItems() {

{!isWeb && (
<TouchableRipple onPress={_handleToggleRTL}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<View style={styles.preference}>
<Text variant="labelLarge">RTL</Text>
<View pointerEvents="none">
<Switch value={isRTL} />
Expand All @@ -217,39 +211,26 @@ function DrawerItems() {
</TouchableRipple>
)}

<TouchableRipple onPress={toggleThemeVersion}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<Text variant="labelLarge">MD 2</Text>
<TouchableRipple onPress={toggleCollapsed}>
<View style={styles.preference}>
<Text variant="labelLarge">Collapsed drawer *</Text>
<View pointerEvents="none">
<Switch value={!isV3} />
<Switch value={collapsed} />
</View>
</View>
</TouchableRipple>

{isV3 && (
<TouchableRipple onPress={toggleCollapsed}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<Text variant="labelLarge">Collapsed drawer *</Text>
<View pointerEvents="none">
<Switch value={collapsed} />
</View>
</View>
</TouchableRipple>
)}

{isV3 && (
<TouchableRipple onPress={toggleCustomFont}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<Text variant="labelLarge">Custom font *</Text>
<View pointerEvents="none">
<Switch value={customFontLoaded} />
</View>
<TouchableRipple onPress={toggleCustomFont}>
<View style={styles.preference}>
<Text variant="labelLarge">Custom font *</Text>
<View pointerEvents="none">
<Switch value={customFontLoaded} />
</View>
</TouchableRipple>
)}
</View>
</TouchableRipple>

<TouchableRipple onPress={toggleRippleEffect}>
<View style={[styles.preference, isV3 && styles.v3Preference]}>
<View style={styles.preference}>
<Text variant="labelLarge">
{isIOS ? 'Highlight' : 'Ripple'} effect *
</Text>
Expand All @@ -259,7 +240,7 @@ function DrawerItems() {
</View>
</TouchableRipple>
</Drawer.Section>
{isV3 && !collapsed && (
{!collapsed && (
<Text variant="bodySmall" style={styles.annotation}>
* - available only for MD3
</Text>
Expand Down Expand Up @@ -301,9 +282,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 12,
paddingHorizontal: 16,
},
v3Preference: {
height: 56,
paddingHorizontal: 28,
},
Expand Down
9 changes: 2 additions & 7 deletions example/src/ExampleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { FlatList } from 'react-native';

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

import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
Expand Down Expand Up @@ -49,7 +49,6 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
import ToggleButtonExample from './Examples/ToggleButtonExample';
import TooltipExample from './Examples/TooltipExample';
import TouchableRippleExample from './Examples/TouchableRippleExample';
import { useExampleTheme } from './hooks/useExampleTheme';

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

const { colors, isV3 } = useExampleTheme();
const { colors } = useTheme();
const safeArea = useSafeAreaInsets();

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

if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
return null;
}

return (
<List.Item
unstable_pressDelay={65}
Expand Down
12 changes: 2 additions & 10 deletions example/src/Examples/ActivityIndicatorExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import * as React from 'react';
import { StyleSheet, View } from 'react-native';

import {
ActivityIndicator,
FAB,
List,
MD2Colors,
MD3Colors,
} from 'react-native-paper';
import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper';

import { useExampleTheme } from '../hooks/useExampleTheme';
import ScreenWrapper from '../ScreenWrapper';

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

return (
<ScreenWrapper style={styles.container}>
Expand Down Expand Up @@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => {
<List.Section title="Custom color">
<ActivityIndicator
animating={animating}
color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
color={MD3Colors.error20}
hidesWhenStopped={false}
/>
</List.Section>
Expand Down
41 changes: 13 additions & 28 deletions example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,14 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';

import Icon from '@expo/vector-icons/MaterialCommunityIcons';
import {
Avatar,
MD2Colors,
MD3Colors,
Paragraph,
Text,
} from 'react-native-paper';
import { Avatar, MD3Colors, Text, useTheme } from 'react-native-paper';

import CustomFAB from './CustomFAB';
import CustomFABControls, {
Controls,
initialControls,
} from './CustomFABControls';
import { animatedFABExampleData } from '../../../utils';
import { useExampleTheme } from '../../hooks/useExampleTheme';

type Item = {
id: string;
Expand All @@ -32,7 +25,7 @@ type Item = {
};

const AnimatedFABExample = () => {
const { colors, isV3 } = useExampleTheme();
const { colors } = useTheme();

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

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

const renderItem = React.useCallback(
({ item }: { item: Item }) => {
const TextComponent = isV3 ? Text : Paragraph;

return (
<View style={styles.itemContainer}>
<Avatar.Text
style={[styles.avatar, { backgroundColor: item.bgColor }]}
label={item.initials}
color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
color={MD3Colors.primary100}
size={40}
/>
<View style={styles.itemTextContentContainer}>
<View style={styles.itemHeaderContainer}>
<TextComponent
<Text
variant="labelLarge"
style={[styles.header, !item.read && styles.read]}
ellipsizeMode="tail"
numberOfLines={1}
>
{item.sender}
</TextComponent>
<TextComponent
</Text>
<Text
variant="labelLarge"
style={[styles.date, !item.read && styles.read]}
>
{item.date}
</TextComponent>
</Text>
</View>

<View style={styles.itemMessageContainer}>
<View style={styles.flex}>
<TextComponent
<Text
variant="labelLarge"
ellipsizeMode="tail"
numberOfLines={1}
style={!item.read && styles.read}
>
{item.header}
</TextComponent>
<TextComponent
</Text>
<Text
variant="labelLarge"
numberOfLines={1}
ellipsizeMode="tail"
>
{item.message}
</TextComponent>
</Text>
</View>

<Icon
name={item.favorite ? 'star' : 'star-outline'}
color={
item.favorite
? isV3
? MD3Colors.error70
: MD2Colors.orange500
: isV3
? MD3Colors.neutralVariant70
: MD2Colors.grey500
item.favorite ? MD3Colors.error70 : MD3Colors.neutralVariant70
}
size={20}
onPress={() => setVisible(!visible)}
Expand All @@ -114,7 +99,7 @@ const AnimatedFABExample = () => {
</View>
);
},
[visible, isV3]
[visible]
);

const onScroll = ({
Expand Down
5 changes: 1 addition & 4 deletions example/src/Examples/AnimatedFABExample/CustomFAB.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {

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

import { useExampleTheme } from '../../hooks/useExampleTheme';

type CustomFABProps = {
animatedValue: Animated.Value;
visible: boolean;
Expand All @@ -31,7 +29,6 @@ const CustomFAB = ({
iconMode,
}: CustomFABProps) => {
const [isExtended, setIsExtended] = React.useState(true);
const { isV3 } = useExampleTheme();

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

Expand All @@ -50,7 +47,7 @@ const CustomFAB = ({
icon={'plus'}
label={label}
extended={isExtended}
uppercase={!isV3}
uppercase={false}
onPress={() => console.log('Pressed')}
visible={visible}
animateFrom={animateFrom}
Expand Down
Loading
Loading