Search code examples
javascriptcsstypescriptreact-nativestyled-components

React-Native Styled-Components Trying to Put Two Different Components in the Same Line

I tried to put two different components of text in the same line utilizing Container, but when I did that, the properties I've set in GeneralText and Information seem to go way. With the exception of the color I've set for Information.

What would be the best way to approach this?

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


const GeneralText = styled.Text`
  font-size: 15px;
  margin-left: 12px;
  padding-bottom: 20px;
  padding-top: 20px;
`;

const Information = styled.Text`
  font-size: 15px;
  margin-left: 300px;
  padding-bottom: 20px;
  padding-top: 20px;
  color: grey;
`;

const Container = styled.Text`
  flex: 65px;
`;

const Menu: FC<Props> = () => (
  <Menu>
      <Container>
        <GeneralText>First Name</GeneralText>
        <Information>John Smith</Information>
      </Container>
  </Menu>
);

export default Menu;

What I currently have

enter image description here

What I am trying to accomplish

enter image description here

Solution

  • Had to change const Container = styled.Text to const Container = styled.View as well as adding position: absolute; underneath Information

    const GeneralText = styled.Text`
  font-size: 15px;
  margin-left: 12px;
`;

const Information = styled.Text`
  font-size: 15px;
  margin-left: 300px;
  position: absolute;
  color: grey;
`;

const Container = styled.View`
  padding-bottom: 20px;
  padding-top: 20px;
  flex: 65px;
`;