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

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

What I am trying to accomplish

CodePudding user response：

can you try to use, justify-content: space-between in container.. I think you'll get your answer. If you still face your problem, lemme know, i will help you. Thanks

CodePudding user response：

on the container you have to create a display: 'flex', flex-direction: 'row', justify-content: 'space-between'

CodePudding user response：

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;
`;