Setting card height programmatically in React Native - react-native

Question

In my React Native app, I want to display cards using simple <View>'s that will have a set height to begin with and display two lines of text.
If the text is longer than two lines, I want to display a "more" button which will expand the height of the view to fit all the text when clicked.
My question is how to determine/calculate the height?
The approach I'm thinking is to use two different style classes and programmatically switch them but I'm not sure how to dynamically figure out the height of the <View> so that all the text would fit into it, however long it may be.
const cardStyle = this.props.moreButtonClicked ? "card-long" : "card-std";
return (
<View style={cardStyle}>
<Text>
{
this.props.cardContent.length <= 120
? this.props.cardContent
: this.props.moreButtonClicked
? this.props.cardContent
: this.props.cardContent.substring(0, 119)
}
</Text>
</View>
);
Specifically, how do I figure out the right height for my card-long style class? Or is there a better approach to handling this? Thanks.

Answer 1

You can determine text height before rendering the text by using this library: https://github.com/aMarCruz/react-native-text-size
Here is an example:
import rnTextSize, { TSFontSpecs } from 'react-native-text-size'
type Props = {}
type State = { width: number, height: number }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs: TSFontSpecs = {
fontFamily = undefined,
fontSize = 24,
fontStyle = 'italic',
fontWeight = 'bold',
}
const text = 'I ❤️ rnTextSize'
class Test extends Component<Props, State> {
state = {
width: 0,
height: 0,
}
async componentDidMount() {
const width = Dimensions.get('window').width * 0.8
const size = await rnTextSize.measure({
text, // text to measure, can include symbols
width, // max-width of the "virtual" container
...fontSpecs, // RN font specification
})
this.setState({
width: size.width,
height: size.height
})
}
// The result is reversible
render() {
const { width, height } = this.state
return (
<View style={{ padding: 12 }}>
<Text style={{ width, height, ...fontSpecs }}>
{text}
</Text>
</View>
)
}
}