Add space between two elements on the same line

Question

I am adding two element on the row

  render() {
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <Icon
         name='person' 
         color='#98999c'
         onPress={this.handleClick.bind(this)} /> 
         <Text style={ styles.header }>
          { 'User Name' }
        </Text>
          
      </View>
          )
  }

How can I add a space between them?

EDIT:

I also have the same problem here:

const AppNavigator = StackNavigator({
  Home: {
    screen: AppDrawer,
    navigationOptions: ({navigation}) => ({
      headerLeft:
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Icon name="menu" size={35} margin={30} padding={30} onPress={ () => navigation.navigate('DrawerOpen') } />
      <ChangeLanguage style={{ margin: 30 , padding: 30}} />
      </View>,
      headerRight: 
      <HeaderUserInformation />,
    })
  }

Answer 1

You can use curly braces like an expression with both double quotes and single quotes for space i.e.,

{" "} or {' '} 

You can also use ES6 template literals i.e.,

`   <li></li>` or `  ${value}` 

You can also use &nbsp like below

<span>sample text &nbsp; <span> 

You can also use &nbsp in dangerouslySetInnerHTML when printing html content

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} /> 

Answer 2

Option 1:

• add: justifyContent: 'space-between' to the View

Option 2:

• add padding / margin to either your Icon or your Text components

Answer 3

I quite like using the short syntax for fragments:

<><strong>Foo</strong> </>