ClassName props is missing in object type. Flow and CSS Modules

694 Views Asked by At

I have initialized a React Native app with the CLI quickstart. The only thing I have edited is that I use CSS Modules for styling the component (note: className in stead of style). I want to typecheck the project with flow and if I run flow it gives the following error.

I Cannot create View element because property className is missing in object type [1] but exists in props [2].

What can I do?

// @flow

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

import styles from "./base.sass";

const App = () => {
  const [title] = React.useState("Hello");

  return (
    <View className={styles.title}>
      <Text>{title}</Text>
    </View>
  );
};

export default App; 
2

There are 2 best solutions below

0
Shing Ho Tan On

It's not React.js, you can't use like that. Here is an example.

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

const App = () => {
  const [title] = React.useState("Hello");

  return (
    <View style={styles.title}>
      <Text>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  title: {
    justifyContent: 'center',
    alignItems: 'center',
  }
});

export default App; 
1
Serhii Puchkovskyi On

The className prop has been removed from View starting from 0.11: https://github.com/necolas/react-native-web/issues/1146

Please check a version you use!