CODEWITHSUNDEEP
reactjsreact-native
Jeremy
Jeremy

Reputation: 1675

React Native Paper align card content horizontal and vertical

I have had a couple of problems with this React Native Paper card, I need to vertically align the tittle but justifyContent is being pretty much ingnored. Here's the Card I have been working on.

const UnitCard = (props) => {
  return (
    <Card style={styles.card}>
      <Card.Content style={styles.cardContent}>
        <Title>UNIT CARD</Title>
        <Headline>Mt</Headline>
      </Card.Content>
    </Card>
  );
};

And this is the StyleSheet, I already tried ussing both justifyContent and allignItems as suggested here

const styles = StyleSheet.create({
  card: {
    backgroundColor: "skyblue",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },
  cardContent: {
    backgroundColor: "coral",
    display: "flex",
    flexDirection: "row"
  },
});

Here's a screenshot of my device

Upvotes: 3

Views: 4984

Answers (1)

Muhammad Yousuf
Muhammad Yousuf

Reputation: 178

I am new to React-Native but something like this helped me out.

What I did is I took a Card made it a circle and inside its Card.Content I made it take all the space of the Card and also made it circle and after that I wrote the properties to place all the views to be in centre of the Card.Content section.

<Card style={styles.cardCircle}>
  <Card.Content style={styles.cardCircleContent}>
      <Text>{"here"}</Text>
  </Card.Content>
</Card>

const styles = StyleSheet.create({
  cardCircle: {
    borderRadius: 100,
    width: 140,
    height: 140,
    backgroundColor: "red",
    elevation: 10,
  },
  cardCircleContent: {
    flex: 1,
    borderRadius: 100,
    justifyContent: "center",
    alignItems: "center",
  },
});

Upvotes: 2

Related Questions