Spacing in the JSX

Question

I have a JSX file and I need a space between the {item.payment.bucket} and OU. In HTML it would look something like this:

{item.payment.bucket}   OU.

My JSX code:

<ValueDiv>
    <Icon src={require("../../images/icons/img-cash.png")}/>
    {item.payment.bucket}
    OU
    <Icon src={require("../../images/icons/img-ball.png")}/>         
</ValueDiv>

Answer 1

You can print a string with a space ({' '}) to give one space.

const App = () => (
  <React.Fragment>
    <strong>Sem</strong>
    <em>Espaços</em>
    
    <hr />
    
    <strong>Com</strong>{' '}
    <em>Espaços</em>
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

If you want to give multiple spaces, you can use the   normally:

const App = () => (
  <React.Fragment>
    <span>Múltiplos</span>
    &nbsp;
    &nbsp;
    &nbsp;
    &nbsp;
    &nbsp;
    <span>Espaços</span>
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 2

I don’t know if I understand your question, but if what you’re trying to do is add a space inside a text you can do like this:

<Text style={styles.sectionTitle}>{'    '}Debug{' '}</Text>

Or you can create an empty view with the size of the spacing you need, for example if you want a horizontal space:

<View style={{flexDirection: 'row'}}>
    <Componente1>
        //conteúdo
    </Componente1>
    <View style={{height: <tam espacamento> width: < tam espacamento>}} </View>
    <Componente2>
        //Conteudo
    </Componente2>
</View>

I advise you to create a component in your project to put spaces anywhere:

function Spacer(props) {
  return <View style={{height: props.size, width: props.size}} />;
}

Can use like this:

<View style={{flexDirection: 'row'}}>
    <Componente1>
        //conteúdo
    </Componente1>
    <Spacer size={16}/> //16 Como exemplo de tamanho para o espaçamento desejado.
    <Componente2>
        //Conteudo
    </Componente2>
</View>

If not that, please replicate. ;)