Question 34313 in React native Question posted in
The official React Native documentation can be found here.

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

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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

    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search