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, 2022 in TypeSript by Logan
• 2,140 points
3,541 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
    }
});

If you need to know more about React, Its recommended to join React JS Course today.

answered Jun 10, 2022 by Nina
• 3,060 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, 2022 in TypeSript by Logan
• 2,140 points
708 views
0 votes
1 answer

React Native Performance: Javascript vs Typescript

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

answered Jun 13, 2022 in TypeSript by Nina
• 3,060 points
825 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, 2022 in TypeSript by Nina
• 3,060 points
4,053 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,140 points
2,486 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, 2022 in Others by narikkadan
• 63,720 points
6,026 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, 2022 in TypeSript by Nina
• 3,060 points
56,291 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, 2022 in TypeSript by Nina
• 3,060 points
524 views
0 votes
1 answer
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP