React Native: cant change button style

Question

I am trying to change the style of a button in React Native, but the edits for the button colour, margin, outlines etc aren't working at all. Here is the pic. Below is my code for HomeScreen.js

import React from 'react';
import {
    StyleSheet,
    TextInput,
    View,
    Text,
    Button,
    ScrollView,
    Image,
    Keyboard,
    TouchableOpacity,
    KeyboardAvoidingView,
} from 'react-native';

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Image
                source={require('../image/success.png')}
                style={{
                    width: '50%',
                    height: 100,
                    resizeMode: 'contain',
                    marginTop: 0,
                }}
            />
            <Text style={{
                fontSize: 20,
                textAlign: 'center',
                marginLeft: 35,
                marginRight: 35,
                marginTop: 0,
                marginBottom: 10,
                color: '#00a3cc'
            }}>
            {'\n\n'}
            This is the Home Screen
            </Text>
            <Button
            style={styles.buttonStyle}
            onPress={() => navigation.navigate('Settings')}
            title="Go to Settings"
            />
        </View>
    );
};

export default HomeScreen;

const styles = StyleSheet.create ({
    buttonStyle: {
        backgroundColor: '#7DE24E',
        borderWidth: 0,
        color: '#FFFFFF',
        borderColor: '#7DE24E',
        height: 40,
        alignItems: 'center',
        borderRadius: 30,
        marginLeft: 35,
        marginRight: 35,
        marginTop: 20,
        marginBottom: 25,
    }
});

Some help would be appreciated, let me know if more info is required. Thanks in advance.

Answer 1

You should use TouchableOpacity instead.

import React from 'react';
import {
    StyleSheet,
    TextInput,
    View,
    Text,
    ScrollView,
    Image,
    Keyboard,
    TouchableOpacity,
    KeyboardAvoidingView,
} from 'react-native';

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Image
                source={require('../image/success.png')}
                style={{
                    width: '50%',
                    height: 100,
                    resizeMode: 'contain',
                    marginTop: 0,
                }}
            />
            <Text style={{
                fontSize: 20,
                textAlign: 'center',
                marginLeft: 35,
                marginRight: 35,
                marginTop: 0,
                marginBottom: 10,
                color: '#00a3cc'
            }}>
            {'\n\n'}
            This is the Home Screen
            </Text>
            <TouchableOpacity 
               onPress={() => navigation.navigate('Settings')}
               style={styles.buttonStyle}
            >
              <Text style={styles.btnText}>Go to Settings</Text>
            </TouchableOpacity>
        </View>
    );
};

export default HomeScreen;

const styles = StyleSheet.create ({
    btnText: {
       color: '#FFFFFF',
       fontSize: 18,
       textAlign: 'center',
    },
    buttonStyle: {
        backgroundColor: '#7DE24E',
        height: 40,
        alignItems: 'center',
        borderRadius: 30,
        marginLeft: 35,
        marginRight: 35,
        marginTop: 20,
        marginBottom: 25,
    }
});