CODEWITHSUNDEEP
reactjsreact-native
Ixyz
Ixyz

Reputation: 35

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

I am learning to use react native with expo but at one point they ask me to make a button, the button they create looks good, they did it in android, but I want to do it in iOS and only the word changes color

Upvotes: 1

Views: 3582

Answers (2)

Unico
Unico

Reputation: 93

Button component is more limited than the Touchables. You can set many things on Touchables, and most useful is TouchableOpacity. Read this and see the example: https://reactnative.dev/docs/touchableopacity

Upvotes: 0

Muhammad Rafeh Atique
Muhammad Rafeh Atique

Reputation: 872

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!

Upvotes: 3

Related Questions