Skip to content

Commit 430000e

Browse files
xdimota7xxdimota7x
authored
chore: remove md2 (#4898)
* chore: remove md2 support * docs: remove md2 references from docs * chore: update example to use md3 only, removing md2 references * chore: remove Typography/v2 and version references from types * chore: remove subtitle and subtitleStyle from AppbarContent * chore: remove getColor from BottomNavigation
1 parent 8b6b5e5 commit 430000e

179 files changed

Lines changed: 1533 additions & 5787 deletions

File tree

Some content is hidden

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

‎docs/docs/guides/01-getting-started.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,3 @@ export default function Main() {
165165
);
166166
}
167167
```
168-
169-
:::note
170-
For MD2 check the following [Material Design 2 default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v2/LightTheme.tsx).
171-
:::

‎docs/docs/guides/02-theming.mdx‎

Lines changed: 5 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,7 @@ You can change the theme prop dynamically and all the components will automatica
6565
A theme usually contains the following properties:
6666

6767
- `dark` (`boolean`): whether this is a dark theme or light theme.
68-
- `version`: specify which design system components should follow in the app
69-
- 3 - new Material You (MD3)
70-
- 2 - previous Material Design (MD2)
68+
- `version`: Material You (MD3); kept for compatibility and normalized to `3` by `PaperProvider`
7169
- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)).
7270
- `roundness` (`number`): roundness of common elements, such as buttons.
7371
- `colors` (`object`): various colors used throughout different elements.
@@ -471,111 +469,13 @@ export default function HomeScreen() {
471469
}
472470
```
473471

474-
## Material Design 2
472+
## Material Design 3
475473

476-
Using Material Design 2 is <b>fully supported in React Native Paper v5.x</b>.
474+
React Native Paper ships with Material Design 3 (Material You) only. Customize the default experience by extending `MD3LightTheme` or `MD3DarkTheme` (see [Extending the theme](#extending-the-theme) and [Advanced theme overrides](#advanced-theme-overrides)).
477475

478-
### Simple setup
476+
### Migrating from Material Design 2
479477

480-
In order to use the Material Design 2 theme you can just pass `{ version: 2 }` to the PaperProvider theme prop:
481-
482-
```js
483-
import * as React from 'react';
484-
import { PaperProvider } from 'react-native-paper';
485-
import App from './src/App';
486-
487-
export default function Main() {
488-
return (
489-
<PaperProvider theme={{ version: 2 }}>
490-
<App />
491-
</PaperProvider>
492-
);
493-
}
494-
```
495-
496-
Specifying `{ version: 2 }` tells React Native Paper to use the built in Material Design 2 theme, so you don't have to fully extend it on your own.
497-
498-
### Advanced setup
499-
500-
As with any theme, you can also specify your custom properties within the Material Design 2 theme:
501-
502-
```js
503-
import * as React from 'react';
504-
import { MD2LightTheme, PaperProvider } from 'react-native-paper';
505-
import App from './src/App';
506-
507-
export default function Main() {
508-
const theme = {
509-
...MD2LightTheme,
510-
511-
// Specify a custom property
512-
custom: 'property',
513-
514-
// Specify a custom nested property
515-
colors: {
516-
...MD2LightTheme.colors,
517-
primary: '#fefefe',
518-
},
519-
};
520-
521-
return (
522-
<PaperProvider theme={theme}>
523-
<App />
524-
</PaperProvider>
525-
);
526-
}
527-
```
528-
529-
### Typescript
530-
531-
Due to the amount of changes in the theme's schema shape it falls into the [Advanced theme overrides](#advanced-theme-overrides) category. The steps are identical as with any advanced theme, just make sure to extend the built-in `MD2LightTheme` or `MD2DarkTheme` instead of `MD3LightTheme` or `MD3DarkTheme`.
532-
533-
The final example for Material Design 2 would look like this:
534-
535-
```ts
536-
import * as React from 'react';
537-
import { MD2LightTheme, PaperProvider, useTheme } from 'react-native-paper';
538-
import App from './src/App';
539-
540-
const theme = {
541-
// Extend Material Design 2 theme
542-
543-
...MD2LightTheme, // or MD2DarkTheme
544-
545-
// Specify a custom property
546-
myOwnProperty: true,
547-
548-
// Specify a custom nested property
549-
colors: {
550-
...MD2LightTheme.colors,
551-
myOwnColor: '#BADA55',
552-
},
553-
};
554-
555-
export type AppTheme = typeof theme;
556-
557-
export const useAppTheme = () => useTheme<AppTheme>();
558-
559-
export default function Main() {
560-
return (
561-
<PaperProvider theme={theme}>
562-
<App />
563-
</PaperProvider>
564-
);
565-
}
566-
567-
// App.tsx
568-
569-
export default function App() {
570-
const { theme } = useAppTheme();
571-
572-
return <View style={{ backgroundColor: theme.colors.primary }} />;
573-
}
574-
```
575-
576-
### Migrating to Material You
577-
578-
If you are migrating from Material Design 2 (4.x and lower) to Material You (5.x), please refer to our [Migration Guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0)
478+
If you are upgrading from Material Design 2 (4.x and lower), follow the [Migration Guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0).
579479

580480
## Applying a theme to a paper component
581481

‎docs/docs/guides/04-fonts.md‎

Lines changed: 2 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -47,99 +47,8 @@ Now, you are able to use `fontFamily` from font files.
4747
4848
## Configuring fonts in ThemeProvider
4949
50-
### Material Design 2
51-
52-
#### Using `configureFonts` helper
53-
54-
To create a custom font, prepare a `fontConfig` object where fonts are divided by platforms. After that, you have to:
55-
56-
* pass the `fontConfig` into `configureFonts` params object property called `config`
57-
* set the params object property `isV3` to `false`.
58-
59-
The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and `native`. Use these to override fonts on particular platforms.
60-
61-
:::info
62-
At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`.
63-
:::
64-
65-
```js
66-
import * as React from 'react';
67-
import { configureFonts, MD2LightTheme, PaperProvider } from 'react-native-paper';
68-
import App from './src/App';
69-
70-
const fontConfig = {
71-
web: {
72-
regular: {
73-
fontFamily: 'sans-serif',
74-
fontWeight: 'normal',
75-
},
76-
medium: {
77-
fontFamily: 'sans-serif-medium',
78-
fontWeight: 'normal',
79-
},
80-
light: {
81-
fontFamily: 'sans-serif-light',
82-
fontWeight: 'normal',
83-
},
84-
thin: {
85-
fontFamily: 'sans-serif-thin',
86-
fontWeight: 'normal',
87-
},
88-
},
89-
ios: {
90-
regular: {
91-
fontFamily: 'sans-serif',
92-
fontWeight: 'normal',
93-
},
94-
medium: {
95-
fontFamily: 'sans-serif-medium',
96-
fontWeight: 'normal',
97-
},
98-
light: {
99-
fontFamily: 'sans-serif-light',
100-
fontWeight: 'normal',
101-
},
102-
thin: {
103-
fontFamily: 'sans-serif-thin',
104-
fontWeight: 'normal',
105-
},
106-
},
107-
android: {
108-
regular: {
109-
fontFamily: 'sans-serif',
110-
fontWeight: 'normal',
111-
},
112-
medium: {
113-
fontFamily: 'sans-serif-medium',
114-
fontWeight: 'normal',
115-
},
116-
light: {
117-
fontFamily: 'sans-serif-light',
118-
fontWeight: 'normal',
119-
},
120-
thin: {
121-
fontFamily: 'sans-serif-thin',
122-
fontWeight: 'normal',
123-
},
124-
}
125-
};
126-
127-
const theme = {
128-
...MD2LightTheme,
129-
fonts: configureFonts({config: fontConfig, isV3: false}),
130-
};
131-
132-
export default function Main() {
133-
return (
134-
<PaperProvider theme={theme}>
135-
<App />
136-
</PaperProvider>
137-
);
138-
}
139-
```
140-
141-
:::tip
142-
If you're using TypeScript use `as const` when defining `fontConfig`.
50+
:::note
51+
Older Material Design 2 platform-split font configuration (`configureFonts` with per-platform `ios` / `android` / `web` keys) is no longer supported. Use the Material Design 3 typescale and `configureFonts` as documented below.
14352
:::
14453
14554
### Material Design 3

‎docs/docs/guides/08-theming-with-react-navigation.md‎

Lines changed: 4 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,9 @@ But how to make them work together?
1111

1212
## Themes adaptation
1313

14-
### Material Design 2
15-
16-
Fortunately, in Material Design 2, both React Navigation and React Native Paper offer very similar API when it comes to theming and theme color structure. It's possible to import them in light and dark variants from both.
17-
18-
```js
19-
import {
20-
DarkTheme as NavigationDarkTheme,
21-
DefaultTheme as NavigationDefaultTheme,
22-
} from '@react-navigation/native';
23-
24-
import {
25-
MD2LightTheme,
26-
MD2DarkTheme,
27-
} from 'react-native-paper';
28-
```
29-
3014
### Material Design 3
3115

32-
From v5, React Native Paper theme colors structure follows the Material Design 3 <i>(known as Material You)</i> colors system, which differs significantly from both the previous Paper's theme and React Navigation theme.
16+
React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape.
3317

3418
However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
3519

@@ -67,8 +51,7 @@ import { createStackNavigator } from '@react-navigation/stack';
6751
import { TouchableOpacity } from 'react-native';
6852
import {
6953
Card,
70-
Title,
71-
Paragraph,
54+
Text,
7255
List,
7356
PaperProvider,
7457
} from 'react-native-paper';
@@ -86,8 +69,8 @@ const HomeScreen = ({ navigation }) => (
8669
>
8770
<Card>
8871
<Card.Content>
89-
<Title>{title}</Title>
90-
<Paragraph>{content}</Paragraph>
72+
<Text variant="titleLarge">{title}</Text>
73+
<Text variant="bodyMedium">{content}</Text>
9174
</Card.Content>
9275
</Card>
9376
</TouchableOpacity>
@@ -127,24 +110,6 @@ To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepm
127110
npm install deepmerge
128111
```
129112
130-
### Material Design 2
131-
132-
```js
133-
import {
134-
NavigationContainer,
135-
DarkTheme as NavigationDarkTheme,
136-
DefaultTheme as NavigationDefaultTheme,
137-
} from '@react-navigation/native';
138-
import {
139-
MD2DarkTheme,
140-
MD2LightTheme,
141-
} from 'react-native-paper';
142-
import merge from 'deepmerge';
143-
144-
const CombinedDefaultTheme = merge(MD2LightTheme, NavigationDefaultTheme);
145-
const CombinedDarkTheme = merge(MD2DarkTheme, NavigationDarkTheme);
146-
```
147-
148113
### Material Design 3
149114
150115
```js
@@ -171,27 +136,6 @@ const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);
171136
172137
Alternatively, we could merge those themes using vanilla JavaScript:
173138
174-
### Material Design 2
175-
176-
```js
177-
const CombinedDefaultTheme = {
178-
...MD2LightTheme,
179-
...NavigationDefaultTheme,
180-
colors: {
181-
...MD2LightTheme.colors,
182-
...NavigationDefaultTheme.colors,
183-
},
184-
};
185-
const CombinedDarkTheme = {
186-
...MD2DarkTheme,
187-
...NavigationDarkTheme,
188-
colors: {
189-
...MD2DarkTheme.colors,
190-
...NavigationDarkTheme.colors,
191-
},
192-
};
193-
```
194-
195139
### Material Design 3
196140
197141
```js

0 commit comments

Comments
 (0)