React-native-paper: Failed prop type: Invalid props.style key `0` supplied to `Text`

[FirdousNath]

ExceptionsManager.js:126 Warning: Failed prop type: Invalid props.style key `0` supplied to `Text`.
Bad object: {
  "0": "A",
  "1": "s",
  "2": "a",
  "3": "p",
  "4": "-",
  "5": "S",
  "6": "y",
  "7": "m",
  "8": "b",
  "9": "o",
  "10": "l",
  "color": "#ffffff",
  "textAlign": "center",
  "letterSpacing": 1,
  "marginVertical": 9,
  "marginHorizontal": 16,
  "textTransform": "uppercase"
}
Valid keys: [
  "display",
  "width",
  "height",
  "start",
  "end",
  "top",
  "left",
  "right",
  "bottom",
  "minWidth",
  "maxWidth",
  "minHeight",
  "maxHeight",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginEnd",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingEnd",
  "borderWidth",
  "borderTopWidth",
  "borderStartWidth",
  "borderEndWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "alignContent",
  "overflow",
  "flex",
  "flexGrow",
  "flexShrink",
  "flexBasis",
  "aspectRatio",
  "zIndex",
  "direction",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "transformMatrix",
  "decomposedMatrix",
  "scaleX",
  "scaleY",
  "rotation",
  "translateX",
  "translateY",
  "backfaceVisibility",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderStartColor",
  "borderEndColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomEndRadius",
  "borderStyle",
  "opacity",
  "elevation",
  "color",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontWeight",
  "fontVariant",
  "textShadowOffset",
  "textShadowRadius",
  "textShadowColor",
  "letterSpacing",
  "lineHeight",
  "textAlign",
  "textAlignVertical",
  "includeFontPadding",
  "textDecorationLine",
  "textDecorationStyle",
  "textDecorationColor",
  "textTransform",
  "writingDirection"
]
    in Text (at Text.tsx:35)
    in Text (created by Context.Consumer)
    in ThemedComponent (created by withTheme(Text))
    in withTheme(Text) (at Button.tsx:282)
    in RCTView (at Button.tsx:269)
    in RCTView (at TouchableRipple/index.native.tsx:83)
    in TouchableNativeFeedback (at TouchableRipple/index.native.tsx:70)
    in TouchableRipple (created by Context.Consumer)
    in ThemedComponent (created by withTheme(TouchableRipple))
    in withTheme(TouchableRipple) (at Button.tsx:254)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Surface.tsx:70)
    in Surface (created by Context.Consumer)
    in ThemedComponent (created by withTheme(Surface))
    in withTheme(Surface) (at Button.tsx:244)
    in Button (created by Context.Consumer)
    in ThemedComponent (created by withTheme(Button))
    in withTheme(Button) (at inviteMovie.js:195)
    in RCTView (at inviteMovie.js:194)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at createAnimatableComponent.js:599)
    in withAnimatable(Component) (at inviteMovie.js:115)
    in InviteMovie (created by ConnectFunction)
    in ConnectFunction (at navigationStore.js:441)
    in StatelessWrapped (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at router.js:53)
    in RouterComponent (created by ConnectFunction)
    in ConnectFunction (at App.js:32)
    in ThemeProvider (at Provider.tsx:21)
    in RCTView (at PortalHost.tsx:128)
    in Portal.Host (at Provider.tsx:17)
    in Provider (at App.js:31)
    in PersistGate (at App.js:30)
    in Provider (at App.js:29)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

My code :
<Button style={{ position: "absolute", bottom: 0, width: "100%", paddingVertical: 6 }} mode="contained" onPress={() => { if (this.props.fromPoll) { Actions.pop(); this.props.setPollMovie(true, this.state.movie); } else this.setState({ askForMessage: true }); }} > Skip </Button>

Verison :

"react-native-paper": "^3.6.0",
"react": "16.9.0",
"react-native": "^0.61.5",

[FirdousNath]

This issue is arising in all Text, TextInput and Button. almost everywhere where I its using textual data

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.io. If it's not possible to repro it on snack.expo.io, then you can also provide the repro in a GitHub repository.

[Ross-Gibson]

I had this issue too, after recently upgrading from 2.16.0 to 3.10.1. I was able to resolve the issue using the fontConfig.

[jdanene]

I had this issue too, after recently upgrading from 2.16.0 to 3.10.1. I was able to resolve the issue using the fontConfig.

Could you provide more detail in how you fixed the error?

[Ross-Gibson]

Hey @jdanene I've since upgraded to 4.2.0, but here's an example of how I construct my theme. It's still a work in progress, so excuse the comments. I hope it helps you see how to use the fontConfig. For more info, see the docs.

import { configureFonts } from 'react-native-paper';
import { DynamicValue } from 'react-native-dark-mode';

type FontWeight =
  | 'normal'
  | 'bold'
  | '100'
  | '200'
  | '300'
  | '400'
  | '500'
  | '600'
  | '700'
  | '800'
  | '900';

const fontConfig = {
  default: {
    regular: {
      fontFamily: 'Helvetica Neue',
      fontWeight: <FontWeight>'normal',
    },
    medium: {
      fontFamily: 'HelveticaNeue-Medium',
      fontWeight: <FontWeight>'normal',
    },
    light: {
      fontFamily: 'HelveticaNeue-Light',
      fontWeight: <FontWeight>'normal',
    },
    thin: {
      fontFamily: 'HelveticaNeue-Thin',
      fontWeight: <FontWeight>'normal',
    },
  },
};

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      myOwnColor: string;
    }

    interface Theme {
      myOwnProperty: boolean;
    }
  }
}

const AppLightTheme: ReactNativePaper.Theme = {
  dark: false, // whether this is a dark theme or light theme.
  mode: 'adaptive',
  roundness: 3, // roundness of common elements, such as buttons.
  colors: {
    primary: '#4285F4', // primary color for your app, usually your brand color.
    background: '#F6F6F6', // background color for pages, such as lists.
    surface: '#F9F9F9', // background color for elements containing content, such as cards.
    accent: '#FBBC05', // secondary color for your app which complements the primary color.
    error: '#EA4335',
    text: '#242424', // text color for content.
    onSurface: '#242424',
    onBackground: '#242424',
    disabled: 'rgba(0, 0, 0, 0.26)', // color for disabled elements.
    placeholder: 'rgba(0, 0, 0, 0.54)', // color for placeholder text, such as input placeholder.
    backdrop: 'rgba(0, 0, 0, 0.5)', // color for backdrops of various components such as modals.
    notification: '#34A853',
    myOwnColor: 'red', // TODO: Remove or use, this is just an example of custom colors in RN Paper v4
  },
  fonts: configureFonts(fontConfig),
  animation: {
    scale: 1.0,
  },
  myOwnProperty: true, // TODO: Remove or use, this is just an example of custom properties in RN Paper v4
};

const AppDarkTheme: ReactNativePaper.Theme = {
  dark: true,
  mode: 'adaptive',
  roundness: 3,
  colors: {
    primary: '#4285F4', // primary color for your app, usually your brand color.
    background: '#242424', // background color for pages, such as lists.
    surface: '#7B7B7B', // background color for elements containing content, such as cards.
    accent: '#FBBC05', // secondary color for your app which complements the primary color.
    error: '#EA4335',
    text: '#F6F6F6', // text color for content.
    onSurface: '#F6F6F6',
    onBackground: '#F6F6F6',
    disabled: 'rgba(255, 255, 255, 0.3)', // color for disabled elements.
    placeholder: 'rgba(255, 255, 255, 0.54)', // color for placeholder text, such as input placeholder.
    backdrop: 'rgba(0, 0, 0, 0.5)', // color for backdrops of various components such as modals.
    notification: '#34A853',
    myOwnColor: 'red', // TODO: Remove or use, this is just an example of custom colors in RN Paper v4
  },
  fonts: configureFonts(fontConfig),
  animation: {
    scale: 1.0,
  },
  myOwnProperty: true, // TODO: Remove or use, this is just an example of custom properties in RN Paper v4
};

export const AppTheme = new DynamicValue(AppLightTheme, AppDarkTheme);

const NavigationLightTheme = {
  dark: false,
  colors: {
    primary: AppLightTheme.colors.primary, // The primary color of the app used to tint various elements.
    background: AppLightTheme.colors.background, // The color of various backgrounds, such as background color for the screens.
    card: AppLightTheme.colors.background, // The background color of card-like elements, such as headers, tab bars etc.
    text: AppLightTheme.colors.text, // The text color of various elements.
    border: AppLightTheme.colors.backdrop, // The color of borders, e.g. header border, tab bar border etc.
  },
};

const NavigationDarkTheme = {
  dark: true,
  colors: {
    primary: AppDarkTheme.colors.primary, // The primary color of the app used to tint various elements.
    background: AppDarkTheme.colors.background, // The color of various backgrounds, such as background color for the screens.
    card: AppDarkTheme.colors.background, // The background color of card-like elements, such as headers, tab bars etc.
    text: AppDarkTheme.colors.text, // The text color of various elements.
    border: AppDarkTheme.colors.backdrop, // The color of borders, e.g. header border, tab bar border etc.
  },
};

export const NavigationTheme = new DynamicValue(
  NavigationLightTheme,
  NavigationDarkTheme,
);

const appleLogoBlack = require('./assets/logos/apple_logo_black.png');
const appleLogoWhite = require('./assets/logos/apple_logo_white.png');
const appleLogoUri = new DynamicValue(appleLogoBlack, appleLogoWhite);

const facebookLogoBlue = require('./assets/logos/facebook_logo_blue.png');
const facebookLogoUri = new DynamicValue(facebookLogoBlue, facebookLogoBlue);

const googleLogoColor = require('./assets/logos/google_logo_color.png');
const googleLogoUri = new DynamicValue(googleLogoColor, googleLogoColor);

export const AssetTheme = {
  logos: {
    apple: appleLogoUri,
    facebook: facebookLogoUri,
    google: googleLogoUri,
  },
};

[DaNiELChIoRo]

The problem still present, last known version without this 2.16.0

[griffinreichert22]

I am using expo and I am curious if I need to be doing a different way of linking the fonts to the app. I have the same fontConfig and use configureFonts(), but they do not pass into my theme. I know the fonts work because when I use loadFontsAsync and use them on non react-native-paper components they format correctly.

@Ross-Gibson any ideas?

[SafdarSikander]

@Ross-Gibson same issue can not load the font in the expo.