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.