Paraboly / react-native-information-card

Fully customizable information card for React Native via Paraboly
https://paraboly.com
MIT License
6 stars 3 forks source link

Information Card not rendered. #2

Open haso5898 opened 4 years ago

haso5898 commented 4 years ago

Hi,

I have build my App with expo. I wanted to have a cardview and the information view is really beautiful so i wanted to use it. But it is not getting rendered on my screen. I am implementing the card in a different component then importing it from another component. This is how I did it This one is the example app.js copied over directly CardComponent


const CardComponent = (props) => {

  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView
        style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
      >
        <View style={{ marginTop: 12 }}>
          <InformationCard
            fontFamily="Montserrat-Regular"
            statusText="Waiting"
            statusColor="#4287f5"
          />
        </View>
        <View style={{ marginTop: 12 }}>
          <InformationCard
            height={85}
            descriptionDisable
            statusColor="purple"
            borderColor="blue"
            statusText="Suspended"
          />
        </View>
        <View style={{ marginTop: 12 }}>
          <InformationCard />
        </View>
        <View style={{ marginTop: 12 }}>
          <InformationCard
            height={85}
            descriptionDisable
            statusColor="green"
            statusText="Active"
            borderColor="orange"
          />
        </View>
        <View style={{ marginTop: 12 }}>
          <InformationCard
            statusColor="#f54242"
            statusText="Urgent"
            borderColor="#f54242"
          />
        </View>
      </SafeAreaView>
    </View>
  );
};

This is where I render it

const MyListsView = props => {
    return (
     <CardComponent></CardComponent>
    );
};

This is my package json.

 "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.3",
    "@material-ui/core": "^4.9.10",
    "@paraboly/react-native-card": "^0.3.0",
    "@paraboly/react-native-information-card": "0.0.7",
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/bottom-tabs": "^5.2.6",
    "@react-navigation/core": "^5.3.3",
    "@react-navigation/native": "^5.1.5",
    "@react-navigation/stack": "^5.2.10",
    "expo": "^37.0.7",
    "expo-font": "~8.1.0",
    "formik": "^2.1.4",
    "galio-framework": "^0.6.3",
    "native-base": "2.13.8",
    "prop-types": "^15.7.2",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-androw": "0.0.34",
    "react-native-card-ui": "^1.1.1",
    "react-native-cardview": "^2.0.5",
    "react-native-dynamic-vector-icons": "^0.1.1",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-material-ripple": "^0.9.1",
    "react-native-really-awesome-button": "^1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-size-matters": "^0.3.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-form": "^8.3.5",
    "typeface-roboto": "0.0.75",
    "yup": "^0.28.3"
  },
WrathChaos commented 4 years ago

I've never tested it on Expo. Let me test it on Expo if it is not working, I can create an Expo version for you :)

dlogvin commented 4 years ago

It works on expo, I'm using it on expo.

WrathChaos commented 4 years ago

I also tested on expo, it works. @haso5898, can you share with me a reproducible example?