how to change the background color of a button in an app created with react native on ios?

We mostly use touchable Opacity as a button in React Native app because we have no deeper access to React Native button that’s why.

Below is the use of Button made with Touchable Opacity

import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import colors from '../../constants/colors';

const Button = props => { // normalText | whiteTheme
    const style = props.normalText ? { fontWeight: 'bold', fontSize: 15, fontFamily: undefined } : {}
    return (
        <TouchableOpacity style={{ ...styles.button, ...props.style, backgroundColor: props.whiteTheme ? colors.secondary : colors.primary }} onPress={props.onPress}>
            <Text style={{ ...styles.text, color: props.whiteTheme ? colors.primary : colors.secondary, ...style, ...props.textStyle }} numberOfLines={1} adjustsFontSizeToFit={true}>
                {props.title}
            </Text>
        </TouchableOpacity>
    );
}

export default Button;

const styles = StyleSheet.create({
    button: {
        backgroundColor: colors.secondary,
        height: 40,
        borderRadius: 6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        color: colors.primary,
        fontSize: 17.5,
        fontFamily: 'bold'
    },
});

I hope you got it!

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top