CODEWITHSUNDEEP
javascriptcsstypescriptreact-nativestyled-components
bombombs
bombombs

Reputation: 593

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

Upvotes: 2

Views: 111

Answers (3)

bombombs
bombombs

Reputation: 593

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

Upvotes: 0

Jefri Agistar
Jefri Agistar

Reputation: 117

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

Upvotes: 3

Varun Kaklia
Varun Kaklia

Reputation: 376

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

Upvotes: 1

Related Questions