question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<Text> variant prop is not working

See original GitHub issue

Current 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: Capture d’écran 2022-07-19 à 16 10 12

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

Repro: https://snack.expo.dev/@pskli/trembling-banana

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
lukewalczakcommented, Jul 19, 2022

@psaikali you can find the alpha version 5.0.0-rc.3.

1reaction
psaikalicommented, Jul 19, 2022

Thanks for your help @lukewalczak !

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found