CODEWITHSUNDEEP
javascriptcssreact-native
John
John

Reputation: 39

Component only rendered if there is an item in it

I have a component that is only being rendered if there is Text. I am trying to create a header div to a card div that i created, but the header div isn't being rendered properly.

FeedCardHeader.js

import React from 'react';
import styled from 'styled-components/native';
import { Text } from 'react-native'

const Root = styled.View`
    height 50;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: blue;
`;

function FeedCardHeader() {
    return(
        <Root>
            <Text>This is a text</Text>
        </Root>
    )
}

export default FeedCardHeader;

FeedCard.js

import React from 'react';
import styled from 'styled-components/native';

import FeedCardHeader from './FeedCardHeader';

const Root = styled.View`
  min-height: 180px;
  background-color: white;
  width: 100%;
  shadow-color: ${props => props.theme.SECONDARY};
  shadow-offset: 0px 2px;
  shadow-radius: 2px;
  shadow-opacity: 0.1;
  elevation: 2;
`;

function FeedCard() {
    return (
      <Root>
        <FeedCardHeader />
      </Root>
    );
}

export default FeedCard;

My main issue is that if the <Text>This is a text</Text> isn't there, the component is not rendered. When it is there, it is only the size of the contents in the component. I set the component to have a height of 50, so shouldn't it be there regardless and have the set height.

Upvotes: 2

Views: 47

Answers (1)

ellitt
ellitt

Reputation: 833

Your Root styled component needs width as well as height and you need a colon after the height key in your CSS.

const Root = styled.View`
    height: 50;
    width: 100%; // Do whatever you want it to be here.
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: blue;
`;

When you had text in there, it gave the element inherent width, which is why it showed up.

Upvotes: 1

Related Questions