How To Change React Native Button Title Color? Solution

we can not change  title color of default react native button. but for that we have to make custom button.  example below.

Create a  new js file

create a new js file. i made button.js  file. then put all code inside the file.

import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';

export default function FlatButton({ text, onPress }) {
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={styles.button}>
                <Text style={styles.buttonText}>{text}</Text>
            </View>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    button: {
        borderRadius: 8,
        paddingVertical: 14,
        paddingHorizontal: 10,
        backgroundColor: '#f01d71',
    },
    buttonText: {
        color: 'yellow',
        fontWeight: 'bold',
        textTransform: 'uppercase',
        fontSize: 16,
        textAlign: 'center',
    }
});

Open you page when you want to show your button. i want to add this button in app.js file so i add that button in this file.

Import button. js file

import FlatButton from './button';

Custom button

 <FlatButton text="Press me" />