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

CodePudding user response：

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!

CodePudding user response：

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