How to vertically center Text in TouchableOpacity?

I am trying to vertically center Text in a TouchableOpacity but it is hard to get it done for me.

My App.tsx:

import { StatusBar } from "expo-status-bar";import React from "react";import { StyleSheet, View } from "react-native";import { CustomButton } from "./src/components/CustomButton";export default function App() {  return (<View style={styles.container}><CustomButton title="Button" /><StatusBar style="auto" /></View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: "#fff",    alignItems: "center",    justifyContent: "center",  },});

And my CustomButton.tsx:

import React from "react";import {  View,  TouchableOpacity,  StyleSheet,  Text,} from "react-native";interface CustomButtonProps {  title: string;}export const CustomButton = ({ title }: CustomButtonProps): JSX.Element => {  return (<View style={styles.container}><TouchableOpacity style={styles.button}><Text style={styles.buttonTitle}>{title}</Text></TouchableOpacity></View>  );};const styles = StyleSheet.create({  container: {    marginBottom: 12,  },  button: {    borderRadius: 4,    width: 240,    height: 100,    backgroundColor: "#FFF",  },  buttonTitle: {    alignSelf: "center",    fontSize: 24,    color: "#fff",    fontWeight: "bold",  },});

Currently I set alignSelf in buttonTitle as 'center' but I have also tried:

• textAlign: 'center' in buttonTitle,
• alignItems: 'center' in button,
• alignItems: 'center', justifyContent: 'center' in button

And many other ways I could find on Google but none of them worked. It only centers the Text horizontally. Can anyone help me with vertically centering Text of this TouchableOpacity component?

Thanks in advance!