Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StyleSheet.flatten flow issues #23451

Closed
Esemesek opened this issue Feb 14, 2019 · 3 comments
Closed

StyleSheet.flatten flow issues #23451

Esemesek opened this issue Feb 14, 2019 · 3 comments

Comments

@Esemesek
Copy link
Contributor

Esemesek commented Feb 14, 2019

🐛 Bug Report

StyleSheet.flatten return types which are incompatible with NativeComponents.
I am using flow-bin@0.86.0, which is the same as react-native@0.58.4

Cannot create View element because inexact ____DangerouslyImpreciseStyle_Internal [1] is incompatible with exact
$ReadOnly [2] in property style.

     App.js
      21│ export default class App extends Component<Props> {
      22│   render() {
      23│     return (
      24│       <View style={StyleSheet.flatten(styles.container)}>
      25│         <Text style={styles.welcome}>Welcome to React Native!</Text>
      26│         <Text style={styles.instructions}>To get started, edit App.js</Text>
      27│         <Text style={styles.instructions}>{instructions}</Text>
      28│       </View>
      29│     );
      30│   }
      31│ }

     node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js
 [2] 647│   $ReadOnly<$Shape<____ViewStyle_Internal>>,

     node_modules/react-native/Libraries/StyleSheet/flattenStyle.js
 [1]  19│ ): ?DangerouslyImpreciseStyle {

To Reproduce

  1. Initialize new project
  2. Apply this diff
diff --git a/App.js b/App.js
index bb48232..b9b5335 100644
--- a/App.js
+++ b/App.js
@@ -21,7 +21,7 @@ type Props = {};
 export default class App extends Component<Props> {
   render() {
     return (
-      <View style={styles.container}>
+      <View style={StyleSheet.flatten(styles.container)}>
         <Text style={styles.welcome}>Welcome to React Native!</Text>
         <Text style={styles.instructions}>To get started, edit App.js</Text>
         <Text style={styles.instructions}>{instructions}</Text>
  1. Install flow-bin@0.86.0
  2. Run compilation yarn flow

Expected Behavior

Flow compilation should be successful.

Code Example

https://github.com/Esemesek/RNFlowRepro

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 101.36 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.6.0 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.5.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 27, 28
        Build Tools: 27.0.3, 28.0.2, 28.0.3
        System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.58.4 => 0.58.4
@cpojer
Copy link
Contributor

cpojer commented Mar 20, 2019

@Esemesek could you send a pull request to fix this?

@satya164
Copy link
Contributor

This seems to be correct behaviour. Closing.

@irohitb
Copy link

irohitb commented Jun 7, 2019

@satya164 can you at least explain why this error is coming?

@facebook facebook locked as resolved and limited conversation to collaborators May 30, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label May 30, 2020
@Ashoat Ashoat removed the Resolution: Locked This issue was locked by the bot. label Jul 15, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants