Ok, Let's make this simple. I've two Text components, one inside another. The first Text has fontSize of 60, and the nested one has fontSize of 20. As the font size varies, the nested Text sits base aligned. I want the nested Text vertically center aligned with the parent one.
Code
// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';
type PropTypes = {}
export default class SampleVC extends Component<PropTypes> {
render() {
return (
<Text style={{ fontSize: 60 }}>
Big Text
<Text style={{ fontSize: 20 }}>Small Text</Text>
</Text>
);
}
}
Current Output
Needed Output
I know this is a simple scenario, but as am new to react native , i can't figure it out. I've searched all over the web,but couldn't find any helpful resource.

