Skip to content

Dynamic styles with StyleSheet get an type error? #48720

Open
@tiavina-mika

Description

@tiavina-mika

Description

It's work with this approach:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

function App(): React.JSX.Element {

  return (
      <View
        style={styles.dynamicStyle(100)}
      >
        <Text>Hello</Text>
      </View>
  );
}

const styles = StyleSheet.create({
  dynamicStyle: (value: number) => ({
    height: value,
  }),
});

export default App;

I got this TypeScript error

This expression is not callable.
  No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable

Steps to reproduce

  1. Git clone https://github.com/tiavina-mika/dynamic-styling-types-issue
  2. run npm install
  3. Open App.tsx file
  4. See the error in the editor

React Native Version

0.76.6

Affected Platforms

Runtime - Web, Runtime - Android, Runtime - iOS, Runtime - Desktop, Build - MacOS, Build - Windows, Build - Linux

Output of npx react-native info

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
  Memory: 6.80 GB / 15.95 GB
Binaries:
  Node:
    version: 20.16.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 10.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman:
    version: 20210110.135312.0
    path: C:\ProgramData\chocolatey\bin\watchman.EXE
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7935034
  Visual Studio: Not Found
Languages:
  Java:
    version: 1.8.0-262
    path: /c/Program Files/OpenJDK/jdk-8.0.262.10-hotspot/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  new

Stacktrace or Logs

[{
	"resource": "/E:Demos/dynamic-styling-types-issue/ReproducerApp/App.tsx",
	"owner": "typescript",
	"code": "2349",
	"severity": 8,
	"message": "This expression is not callable.\n  No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.",
	"source": "ts",
	"startLineNumber": 11,
	"startColumn": 23,
	"endLineNumber": 11,
	"endColumn": 35
},{
	"resource": "/E:/Demos/dynamic-styling-types-issue/ReproducerApp/App.tsx",
	"owner": "typescript",
	"code": "2322",
	"severity": 8,
	"message": "Type '(value: number) => { height: number; }' is not assignable to type 'ViewStyle | TextStyle | ImageStyle'.",
	"source": "ts",
	"startLineNumber": 19,
	"startColumn": 17,
	"endLineNumber": 21,
	"endColumn": 5,
	"relatedInformation": [
		{
			"startLineNumber": 19,
			"startColumn": 17,
			"endLineNumber": 21,
			"endColumn": 5,
			"message": "Did you mean to call this expression?",
			"resource": "/E:dynamic-styling-types-issue/ReproducerApp/App.tsx"
		}
	]
}]

Reproducer

https://github.com/tiavina-mika/dynamic-styling-types-issue

Screenshots and Videos

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions