<Text> variant prop is not working
See original GitHub issueCurrent behaviour
The <Text>
component renders the same text style, independent of its variant prop.
For instance, the following (copy/pasted from the documentation):
import { View } from "react-native";
import { Text } from "react-native-paper";
const EventListItem = () => {
return (
<View>
<Text variant="displayLarge">Display Large</Text>
<Text variant="displayMedium">Display Medium</Text>
<Text variant="displaySmall">Display small</Text>
<Text variant="headlineLarge">Headline Large</Text>
<Text variant="headlineMedium">Headline Medium</Text>
<Text variant="headlineSmall">Headline Small</Text>
<Text variant="titleLarge">Title Large</Text>
<Text variant="titleMedium">Title Medium</Text>
<Text variant="titleSmall">Title Small</Text>
<Text variant="bodyLarge">Body Large</Text>
<Text variant="bodyMedium">Body Medium</Text>
<Text variant="bodySmall">Body Small</Text>
<Text variant="labelLarge">Label Large</Text>
<Text variant="labelMedium">Label Medium</Text>
<Text variant="labelSmall">Label Small</Text>
</View>
);
};
Renders:
Expected behaviour
Text styling should be different depending on the variant.
Code sample
The theme object is provided to both <PaperProvider>
and <NavigationContainer>
and looks like that:
import { DefaultTheme as NavigationDefaultTheme } from "@react-navigation/native";
import { DefaultTheme as PaperDefaultTheme } from "react-native-paper";
/**
* Color palette.
*/
export const COLORS = {
orange: "#F7A600",
pink: "#E50070",
purple: "#7F2C70",
};
/**
* App theme (merging React Navigation and Paper themes).
*/
export const AppTheme = {
...PaperDefaultTheme,
...NavigationDefaultTheme,
colors: {
...PaperDefaultTheme.colors,
...NavigationDefaultTheme.colors,
primary: COLORS.purple,
secondary: COLORS.pink,
tertiary: COLORS.orange,
},
};
So as you can see, I’ve only modified the colors. Even if I don’t pass any theme, the text variants are ignored.
What have you tried
- with or without the custom theme described above,
Your Environment
software | version |
---|---|
ios or android | both |
react-native | 0.68.2 |
react-native-paper | 4.12.3 |
npm or yarn | npm 8.5.5 |
expo sdk | 45.0.0 |
Issue Analytics
- State:
- Created a year ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Why is the align prop of MUI Typography component not ...
I'm trying to right-align some text items using the align prop of MUI's Typography component. I'm setting the variant to body2 , which...
Read more >Codemod variant-prop doesn't change files as expected #30422
Steps: Run npx @mui/codemod v5.0.0/variant-prop on a project that does has TextField, Select, and FormControls with no variant defined. Context ...
Read more >font-variant - CSS: Cascading Style Sheets - MDN Web Docs
The font-variant CSS shorthand property allows you to set all the font variants for a font.
Read more >Material-UI text field with the multiline prop is not working with ...
Coding example for the question Material-UI text field with the multiline prop is not working with a variant prop of value outlined-Reactjs.
Read more >CSS font-variant property - W3Schools
The font-variant property specifies whether or not a text should be displayed in a small-caps font. Show demo ❯. Default value: normal. Inherited:...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@psaikali you can find the alpha version 5.0.0-rc.3.
Thanks for your help @lukewalczak !