TypeScript and React Native Are the type definitions for RN styles wrong

0 votes

I thought in React it is allowed to assign arrays to styles?

Like this:

import React from 'react';
import { Text } from "react-native";

// ...

render() {
  const textStyles = [styles.text];
  return <Text style={textStyles}>Some Text</Text>;
}

But TSLint complains about this line with:

[ts]
Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>[]' is not assignable to type 'StyleProp<TextStyle>'.
  Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>[]' is not assignable to type 'RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle> | null | undefined>'.
Types of property 'pop' are incompatible.
  Type '() => RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type '() => StyleProp<TextStyle>'.
    Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type 'StyleProp<TextStyle>'.
      Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type 'StyleProp<TextStyle>'.
      Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>' is not assignable to type 'StyleProp<TextStyle>'.

What is going on here? Are the types of React Native wrong? Or am I somehow supposed to typecast these arrays for RN styles?

Jun 9 in TypeSript by Logan
• 2,140 points
120 views

1 answer to this question.

0 votes

You can test some of ways for solve your problem, hope this work:

1 : style={styles.yourStyle as any} maybe you should do the trick!

2 : I can't see how you implement your styles but you can test something like this?

import { StyleSheet, TextStyle, ViewStyle } from "react-native";

type Style = {
    container: ViewStyle;
    title: TextStyle;
    icon: ImageStyle;
};

export default StyleSheet.create<Style>({
    container: {
        flex: 1
    },
    title: {
        color: red
    },
    icon: {
        width: 10,
        height: 10
    }
});
answered Jun 10 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
0 answers

What is a type in Typescript for the Component class in Angular 2+?

I have a small problem, but big ...READ MORE

Jul 5 in TypeSript by Logan
• 2,140 points
12 views
0 votes
1 answer

React Native Performance: Javascript vs Typescript

TypeScript is just compiled to JavaScript. Think ...READ MORE

answered Jun 13 in TypeSript by Nina
• 3,020 points
18 views
0 votes
1 answer
0 votes
1 answer

How can I define a type for a CSS color in TypeScript?

There was a proposal for a type of ...READ MORE

answered Jun 15 in TypeSript by Nina
• 3,020 points
11 views
+1 vote
1 answer

Selenium errors : element not clickable. Reactjs application

@Faatima, have you tried using Implicit wait ...READ MORE

answered Oct 29, 2019 in Selenium by Abha
• 28,120 points
1,297 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 11,280 points
437 views
0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
679 views
0 votes
1 answer

What does <T> do in TypeSript?

This is a TS Generics declaration. T will be declared ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
14 views
0 votes
1 answer
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP