React Native touchable opacity margin expands the clickable area - react-native

Question

So I have this code below, but when I add margins to my buttons in their styling like marginTop and marginLeft (shomeButton, mhomeButtom, and abthomeButton specifically), the clickable area for said button is expanded to whatever margins I have added. I tried using absolute positioning instead but that made it so it required many clicks for the buttons to work. Is there any fix? Thanks!
import React from 'react';
import { StyleSheet, View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { LinearGradient } from 'expo-linear-gradient';
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient colors={['#1155CC', 'transparent']} style={styles.background}/>
<Text style={styles.titleText}>GEO</Text>
<TouchableOpacity onPress={() => navigation.navigate('Single')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.singleButton}>
<Text style={styles.buttonText}> Single Player </Text>
</LinearGradient>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('Multi')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.multiButton}>
<Text style={styles.buttonText}> Multi-Player </Text>
</LinearGradient>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('About')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.creditButton}>
<Text style={styles.buttonText}> About </Text>
</LinearGradient>
</TouchableOpacity>
<Image style={styles.tinyLogo} resizeMode="cover" source={require('./assets/earth-icon.png')}/>
</View>
);
}
function SingleScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient colors={['#1155CC', 'transparent']} style={styles.background}/>
<Text style={styles.titleText}>GEO</Text>
<Text style={styles.underText}>Single</Text>
<Text style={styles.normText}>Last Answer:</Text>
<Text style={styles.normundText}>Arizona</Text>
<Text style={styles.normunaText}>Word: </Text>
<TextInput style={styles.input} placeholder="Your Answer" />
<Text style={styles.normunsText}>Incorrect/ Correct</Text>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.shomeButton}>
<Text style={styles.buttonText}> Home </Text>
</LinearGradient>
</TouchableOpacity>
</View>
);
}
function MultiScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient colors={['#1155CC', 'transparent']} style={styles.background}/>
<Text style={styles.titleText}>GEO</Text>
<Text style={styles.underText}>Multi</Text>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.mhomeButton}>
<Text style={styles.buttonText}> Home </Text>
</LinearGradient>
</TouchableOpacity>
</View>
);
}
function AboutScreen({ navigation }) {
return (
<View style={styles.container}>
<LinearGradient colors={['#1155CC', 'transparent']} style={styles.background}/>
<Text style={styles.titleText}>GEO</Text>
<Text style={styles.underText}>About</Text>
<Text style={styles.creditText}>Creators: Anonymous</Text>
<Text style={styles.credit2Text}>Version Number: 0.0.0</Text>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<LinearGradient colors={['#00FFFE', '#31f48e']} style={styles.abthomeButton}>
<Text style={styles.buttonText}> Home </Text>
</LinearGradient>
</TouchableOpacity>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Single" component={SingleScreen} />
<Stack.Screen name="Multi" component={MultiScreen} />
<Stack.Screen name="About" component={AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4db4d7',
alignItems: 'center',
},
titleText: {
fontFamily: 'serif',
fontWeight: 'bold',
fontSize: 100,
color: '#31f48e',
},
underText: {
fontFamily: 'serif',
fontWeight: 'bold',
fontSize: 50,
color: '#31f48e',
},
singleButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 40,
},
buttonText: {
fontFamily: 'serif',
fontWeight: 'bold',
fontSize: 30,
color: '#ffffff',
},
multiButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 40,
marginBottom: 20,
},
tinyLogo: {
width: 380,
height: 380,
justifyContent: 'center',
alignItems: 'center',
},
abthomeButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 210,
marginLeft: 225,
},
background: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 500,
},
creditButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 20,
marginBottom: 35,
},
creditText: {
fontFamily: 'serif',
fontSize: 25,
color: '#000000',
marginTop: 150,
},
credit2Text: {
fontFamily: 'serif',
fontSize: 25,
color: '#000000',
marginTop: 20,
},
credit3Text: {
fontFamily: 'serif',
fontSize: 25,
color: '#000000',
marginTop: 5,
},
mhomeButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 550,
marginLeft: 230,
},
shomeButton: {
backgroundColor: '#31f48e',
borderRadius: 20,
elevation: 20,
height: 50,
marginTop: 220,
marginLeft: 230,
},
normText: {
fontFamily: 'serif',
fontSize: 30,
color: '#000000',
marginTop: 50,
},
normundText: {
fontFamily: 'serif',
fontSize: 30,
color: '#000000',
},
normunsText: {
fontFamily: 'serif',
fontSize: 30,
color: '#000000',
marginTop: 25
},
normunaText: {
fontFamily: 'serif',
fontSize: 25,
color: '#000000',
marginTop: 25
},
input: {
height: 40,
borderWidth: 2,
borderRadius: 10,
padding: 10,
marginTop: 25,
},
});
export default App;

Answer 1

Try adding style with flex 1, it worked for me.