RN: wrap buttons when a big font size-CodePudding

I have two buttons in a row. When increasing the font size the text leaves for the next line. Is it possible to wrap the buttons when the font size is increased? I'm trying to set flex: 1 1 50% and min-width for buttons and flex-direction: row; flex-wrap: wrap; align-items: center; for container, but that wrapping for default font size and increasing.

Button size prop: width: ${props => props.size === 'normal' || props.size === 'large' ? '100%' : null};

Default font size:

Increasing the font size in settings:

Wrapping with default and increasing:

<styled.Container>
  <styled.ButtonWrap>
    <Button size='minimal' style={{ alignItems: 'center' }} title='Inapoi' type='secondary' />
  </styled.ButtonWrap>
  <styled.ButtonWrap>
    <Button size='minimal' style={{ alignItems: 'center' }} title='Urmatorul' />
  </styled.ButtonWrap>
</styled.Container>

export const Container = styled.View`
  margin-top: 8px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fa755a;
`;

export const ButtonWrap = styled.View`
  flex: 1 1 50%;
  min-width: 198px;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 6px;
  background-color: #0db41b;
`;

UPD: Resolved with

export const ButtonWrap = styled.View`
  flex: auto;
  margin-top: 6px;
  margin-left: 8px;
  margin-right: 8px;
  min-width: 162px;
`;

export const Container = styled.View`
  flex-flow: wrap;
  margin-top: 8px;
  align-items: center;
`;

CodePudding user response：

You didn't actually set the display from Container to flex. IF you add the following to Container, you should be okay.

display: flex;

Otherwise, you can always use inline-block, which has auto wrapping. The only thing you have to do is to set margin: auto to center the items.

CodePudding user response：

Resolved with:

export const ButtonWrap = styled.View`
  flex: auto;
  margin-top: 6px;
  margin-left: 8px;
  margin-right: 8px;
  min-width: 162px;
`;

export const Container = styled.View`
  flex-flow: wrap;
  margin-top: 8px;
  align-items: center;
`;