Usually when you work with Text components in React Native you just have some text inside it like so:

<Text>Hi there!</Text>

However, what happens if you want to make part of your text into a link and interactive?

You would pass in an onPress prop to the <Text>component:

<Text onPress={() => {console.log('pressed!'}}>Press me!</Text>

Great! But, what happens if we want to style our text so that only the onPress text is changed?

In React Native you are able to have nested Text components and style them accordingly:

<Text style={{ color: '#FFFFFF' }}>
	Thanks for watching and be sure to follow me on my 
	<Text 
		style={{ color: 'blue' }} 
		onPress={() => {console.log('take me to my twitter!'}}>
			Twitter account
	</Text>
	for more!
</Text>

Wrap your Text components in a View

Now, what happens if we want to add a bit of spacing and padding to our Text component?

<Text style={{ padding: 16, color: '#FFFFFF' }}>
	Thanks for watching and be sure to follow me on my 
	<Text 
		style={{ color: 'blue' }} 
		onPress={() => {console.log('take me to my twitter!'}}>
			Twitter account
	</Text>
	for more!
</Text>

That works! Until it doesn't.

Visually you'll see that our text component does have the padding all around but, now when you try to press on your linked onPresstext it doesn't register as easily.