Trying to make my first app and learn a bit about coding and react and react native. I started making this mtg life counter and ran into a problem that the touchables are under some text and therefore cannot be pressed. Is there a simple way around this?

I would want the upper half of the number also register + to life and the lower part to - life. It currently kind of works on mobile, but the touchable part is too small.

```
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Dimensions, TouchableWithoutFeedback } from 'react-native';

const windowHeight = Dimensions.get('window').height;
var opponentColor = 'green'
var playerColor = 'red'

export default function App() {

  const [playerLife, setplayerLife] = useState(20);
  const [opponentLife, setOpponentLife] = useState(20);

  return (
    <View style={styles.container}>
      <View style={styles.rivi}>
      <TouchableWithoutFeedback onPress ={() => setplayerLife(playerLife - 1)}>
        <View style={styles.sideContainerOpponent}>
          <Text>Mana -</Text>
        </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress ={() => setOpponentLife(opponentLife - 1)}>
          <View style={styles.midContainerOpponent}>
            <Text>Vihu -</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.sideContainerOpponent}>
          <Text>Tyhjä</Text>
        </View>
      </View>
      <View style={styles.rivi}>
        <View style={styles.sideContainerOpponent}>
          <Text>Mana +</Text>
        </View>
        <TouchableWithoutFeedback onPress ={() => setOpponentLife(opponentLife + 1)}>
          <View style={styles.midContainerOpponent}>
            <Text>Vihu +</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.sideContainerOpponent}>
          <Text>Tyhjä</Text>
        </View>
      </View>

      <View style={styles.rivi}>
        <View style={styles.sideContainerPlayer}>
          <Text>Tyhjä</Text>
        </View>
        <TouchableWithoutFeedback onPress ={() => setplayerLife(playerLife + 1)}>
          <View style={styles.midContainerPlayer}>
            {/* <Text>Life +</Text> */}
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.sideContainerPlayer}>
          <Text>Mana +</Text>
        </View>
      </View>
      <View style={styles.rivi}>
        <View style={styles.sideContainerPlayer}>
          <Text>Tyhjä </Text>
        </View>
        <TouchableWithoutFeedback onPress ={() => setplayerLife(playerLife - 1)}>
          <View style={styles.midContainerPlayer}>
            <Text>Life -</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.sideContainerPlayer}>
          <Text>Mana -</Text>
        </View>
      </View>

      <View style={styles.pelaaja1}>
        <Text style={styles.lifeCounterPlayer}>
        {playerLife}
      </Text>
      </View>
      <View style={styles.pelaaja2}>
        <View>
          <Text style={styles.lifeCounterOpponent}>
          {opponentLife}
      </Text>
        </View>
      </View>
    </View >

  );
}

const styles = StyleSheet.create({
  rivi: {
    flex: 1,
    flexDirection: 'row',
    alignSelf: 'stretch',
    alignContent: 'stretch',
  },
  container: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sideContainerOpponent: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: opponentColor,
    alignItems: 'center',
    justifyContent: 'center',
  },
  midContainerOpponent: {
    flex: 3,
    alignSelf: 'stretch',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sideContainerPlayer: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: playerColor,
    alignItems: 'center',
    justifyContent: 'center',
  },
  midContainerPlayer: {
    flex: 3,
    alignSelf: 'stretch',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

  pelaaja1: {
    position: 'absolute',
    top: windowHeight / 2,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  pelaaja2: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: windowHeight / 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  lifeCounterPlayer: {
    fontSize: windowHeight / 4,
  },
  lifeCounterOpponent: {
    fontSize: windowHeight / 4,
    transform: [{ rotate: '180deg' }]
  },
});

```