Open
Description
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
- Git clone https://github.com/tiavina-mika/dynamic-styling-types-issue
- run
npm install
- Open
App.tsx
file - 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