Skip to content

Instantly share code, notes, and snippets.

@mdvacca
Last active February 28, 2020 10:53
Show Gist options
  • Save mdvacca/934ae7b9318c69d11f3965093641a64d to your computer and use it in GitHub Desktop.
Save mdvacca/934ae7b9318c69d11f3965093641a64d to your computer and use it in GitHub Desktop.
Custom ReactNative Text component that handles lineHeight correctly in Android.
/**
* Custom Text that handles lineHeight correctly in Android
* @flow
*/
'use strict';
import React from 'react';
import RN, { StyleSheet, Dimensions, Platform } from 'react-native';
type Props = any;
export class Text extends React.Component {
props: Props;
_root: any;
constructor(props: Props){
super(props);
}
setNativeProps (nativeProps: any) {
this._root.setNativeProps(nativeProps);
}
render() : any {
var style = { ...StyleSheet.flatten(this.props.style) };
if (Platform.OS === 'android' && style.lineHeight && style.fontSize) {
style.paddingTop = (style.lineHeight - style.fontSize) + (style.paddingTop || style.paddingVertical || style.padding || 0);
}
return (
<RN.Text
{...this.props}
style={style}
ref={(ref) => this._root = ref}
>
{this.props.children}
</RN.Text>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment