Vue Native doesn't strip (leading) whitespace in multi-line Text elements

[RohanTalip]

Steps to reproduce:

• vue-native init VueNativeText --no-crna
• cd VueNativeText
• Edit App.vue to add a text element with the contents split over multiple lines, as seen below.
• react-native run-ios

Here are the contents of my App.vue :

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    <text class="wide">some text
                                on multiple
                                           lines
    </text>
  </view>
</template>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.text-color-primary {
  color: blue;
}

.wide {
  border-width: 1px;
  width: 90%;
}
</style>

Here is a screenshot of what appears in the app:

This doesn't happen in a React Native app; multiple spaces are stripped out and multiple lines are collapsed and wrapped.

You could argue that being able to control when a new line is started is useful (given that I have seen a number of answers for how to add newlines to React Native Text elements), however compatibility with React Native is probably better. At the very least, the leading whitespace should be removed.

[RohanTalip]

With the same change in PR #165 made locally in VueNativeText/node_modules/vue-native-template-compiler/build.js I get this in my app now, using the same template as before (and after clearing the metro cache) :

[RohanTalip]

This issue is particularly important if you use an automatic formatter like Prettier on long text elements, i.e. it will wrap them with leading whitespace, which will show up in your app.

[RohanTalip]

@sanketsahusoft , @gauravprwl14 , @RishabhKarnad : any opinions on my pull request #165 ?

[sanketsahu]

Let us check this one. If all is well, we will merge it.