How to display text and a button inlined in react native?

Question

I want to get the following result in react-native:

I use styled-components and I am using styled.Text for the grey text, and styled.TouchableOpacity for the red text but I can't get them inlined after playing with all the styling.

How can I achieve the desired result?

Edit, after reading the answer here, this is the result I am currently having:

This is how my source code like:

function App() {
  return (
    <MoreInformationContainer>
      <Typo.Caption color={ColorsEnum.GREY_DARK}>
        {_(t`Pour plus d'informations, nous t'invitons à consulter notre`)}
        <AppButton
          title={_(t`Politique des cookies`)}
          // onPress={dismissModal}
          icon={ExternalLinkSite}
          textSize={12}
          disabled
          inline
        />
      </Typo.Caption>
    </MoreInformationContainer>
  )
}
const MoreInformationContainer = styled.View({
  flexDirection: 'row',
  flexWrap: 'wrap',
  position: 'relative',
})

And this is my AppButton component:

https://gist.github.com/83f5b6b91f015a75340d0664f79529fb

As you can see, I use an inline props to apply the inline style. I've just tried to position the bottom of the clickable link, and I couldn't found a css that does that, any clue ?

Answer 1

You can use

flexDirection: 'row'

in the parent view to display inline

<View style={{flexDirection: 'row'}}>
  <Styled.Text />
  <Styled.TouchableOpacity />
</View>

<AppButton
  style={{bottom: -5}}
  title={_(t`Politique des cookies`)}
  // onPress={dismissModal}
  icon={ExternalLinkSite}
  textSize={12}
  disabled
  inline
/>;