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>
);
};
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"
},
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
This is where I render it