1

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

Ixyz
  • 25
  • 2
  • 7
  • 1
    There exists no way to change background color for Button. You can use `TouchableOpacity` for your purpose. See [here](https://stackoverflow.com/a/41754577/8196025). – Rohit Aggarwal Feb 06 '22 at 14:43

2 Answers2

1

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!

Muhammad Rafeh Atique
  • 722
  • 5
  • 22
0

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

Unico
  • 93
  • 11