Dynamic styles with StyleSheet get an type error?

[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

[shubhamguptadream11]

@tiavina-mika
The error occurs because StyleSheet.create tries to validate the style object, and it doesn't support functions as values.
In order to achieve dynamic nature you can do something like this

function App(): React.JSX.Element {
  const value = 100;
  return (
    <View style={{height: value}}>
      <Text>Hello</Text>
    </View>
  );
}

export default App;

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.