Text is cropped when setting custom font width for a button

[StephenChips]

Platform

XiaoMi K40

package.json content

{
  "name": "running-app",
  "version": "1.0.0",
  "main": "/node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~46.0.13",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.6",
    "react-native-paper": "5.0.0-rc.6",
    "react-native-web": "~0.18.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.1.6",
    "@types/react": "~18.0.21",
    "@types/react-native": "~0.70.4",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.40.0",
    "eslint": "^8.0.1",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.9",
    "expo-modules-autolinking": ">=0.8.1",
    "typescript": "^4.1"
  },
  "private": true
}

Code that I don't understand

function ButtonStartRunning() {
  return (
    <Button
      mode="elevated"
      contentStyle={{ height: 200 }}
      labelStyle={{fontSize: 40}}
      onPress={() => console.log('Pressed')}
    >
      <Text>START RUNNINNG</Text>
    </Button>
  );
}

Actual Behaviour

The text is cropped horizontally, only the bottom part is shown.

Expected Behaviour

A full-width large botton with a line of crazy large text. (It is the most important button in the App I developing)

[lukewalczak]

Hey @StephenChips, I think you should also specify the lineHeight in your styles.

[StephenChips]

@lukewalczak Thanks, I will try. What value should I set?

Fixed. Though I think (and don't quite understand why) lineHeight is not changed as the text size is changed.