Text Indentation on React Native - css

Question

I need to indent the first line of a paragraph on React Native. But the use of the common css text-indent property (textIndent) isn't compatible with React Native, and neither are pseudo-element selectors (like :first-line). Is there any way to do this without wrapping the whole line in <Text> tags and defining its own style? Which words will end up in the first line of a paragraph is somewhat indeterministic from one device's viewport to another device's viewport.

Answer 1

Use {'\t'}. Just like this:
<Text>{'\t'}Hi there</Text>

Answer 2

For a purely CSS solution.
//styles.js
text: {
paddingLeft: 10,
}

Answer 3

I was able to get the text-indent to work in my react webapp with the below syntax:
//info.js
import './App.css'
export default class Info extends React.Component {
static defaultProps = {
history: {
goBack: () => { }
}
}
render() {
return (
<div>
<Nav />
<div id='info'>
<h2>Info</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
);
}
}
//App.css
div#info p {
text-indent: 20px;
}