1

In my React Native app the <Card> component from react-native-paper doesn't appear as it does in examples:

Screenshot

ListScreen.js:

import React from 'react';
import { View, ScrollView } from 'react-native';
import NavBar from '../NavBar';
import CardItem from '../CardItem';
import styles from '../../Assets/Styles';

const ListScreen = () => (
  <View style={styles.view}>
    <ScrollView>
      <CardItem title="Card 1" content="Hello World!" />
      <CardItem title="Another Card" content="idk bye" />
      <CardItem title="Yes" content="Pls work pls." />
      <CardItem title="Card 2" content="Hello World!!" />
    </ScrollView>
    <NavBar />
  </View>
);

export default ListScreen;

CardItem.js:

import React from 'react';
import { Card, Paragraph } from 'react-native-paper';
import styles from '../Assets/Styles';

const CardItem = (props) => (
  <Card style={styles.card}>
    <Card.Title title={props.title} />
    <Card.Content>
      <Paragraph>{props.content}</Paragraph>
    </Card.Content>
  </Card>
);

export default CardItem;

Styles.js:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  navbar: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  view: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {},
});

export default styles;

I've tried changing styles.card many times but it still wont change.

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
TacoSnack
  • 129
  • 10
  • 1
    Your code seems to be fine at first sight. I imagine you followed up react-native-paper documentation on how to use their library, right? Are you able to see any other component like Text? Any other information will be great to know. Like, are you using react-native or Expo, Which versions, navigation library, etc. – Stepan Nikulenko Oct 19 '21 at 22:25
  • @StepanNikulenko I'm running the code on Expo Snack, `Text` from react-native will still render fine. I'm using `react-navigation` for the nav. Expo version 42.0.0, the full code is here: https://snack.expo.dev/@tacosnack1/app-thing – TacoSnack Oct 20 '21 at 01:25
  • Well, nobody can read your mind and see how you imagine this should works... So if you have some visual reference what do you want to achieve, would save you time. For the instance you can try removing: alignItems: 'center', justifyContent: 'center', from view's style and add some margins to card's styles. – Stepan Nikulenko Oct 20 '21 at 22:29

0 Answers0