TypeScript React Native String literal assignment error

Question

I have been getting a very strange error with regards to TypeScript telling me string literals do not match. (TypeScript v1.8)

import { Component } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  }
});

export class App extends Component<any, any> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

Error:

src\client\index.ios.tsx(19,15): error TS2322: Type '{ fontSize: number; textAlign: string; margin: number; }' is not assignable to type 'TextStyle'.
  Types of property 'textAlign' are incompatible.
    Type 'string' is not assignable to type '"auto" | "left" | "right" | "center"'.
      Type 'string' is not assignable to type '"center"'.

I installed the correct typings. It seems that the following does not work in TypeScript.

interface Test {
  a: "p" | "q"
}

let x : Test;
let y = {
  a: "p"
}

x = y;

Source: https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

I have this issue with Typescript 2.1.x as well.

Learner
– Learner

2017-02-09 02:17:33 +00:00
Commented Feb 9, 2017 at 2:17 — Learner
– Learner, Commented Feb 9, 2017 at 2:17

Cailen · Accepted Answer · 2016-09-07 15:02:24Z

13

I know I'm late to the game, but just came across the same issue and prefer this solution (hate using 'any' since it kind of defeats the purpose of Typescript, although sometimes it's the only option):

import { Component } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";

interface Props { 
}

interface State {
}

interface Style { 
  container: React.ViewStyle,
  welcome: React.TextStyle
}

const styles = StyleSheet.create<Style>({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  }
});

export class App extends Component<Props, State> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

If we tell StyleSheet.create what type of styles to create the build error is resolved.

answered Sep 7, 2016 at 15:02

Cailen

6901 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stuart Schechter Over a year ago

I find it easier and cleaner to add "as React.ViewStyle following the "container: { ... }" definition, just before the comma that separates it from the welcome definition. Then add "as React.TextStyle" following the "welcome : { ... }" definition. That way, if someone else goes to add the new file, the need to add the typing the the style will be apparent.

basarat · Accepted Answer · 2016-06-20 03:12:50Z

6

sadly you need to assert the type:

<Text style={styles.welcome as any}>

Reason:

The type is inferred to based on declaraiton. A string literal is inferred as string (instead of string literal) because

let foo = "asdf"; // foo: string

// Its a string becuase: 
foo = "something else"; // Would be strange if this would error

answered Jun 20, 2016 at 3:12

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

TypeScript React Native String literal assignment error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related