How to change button style on press in React Native?

Sep 05, 2022 . Admin

In this article we will cover on how to implement change a button color by using onpress on react native. you can understand a concept of change color of button on click react native. you'll learn react native button press effect. if you have question about how to change color of button on press in react native then I will give simple example with solution. follow bellow step for change background color on click in react native.

In this example,We will change button style on press in react can easy and simply prees then color change in react can store button value prees then condition add to color component.The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

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

export default function App() {

    const [isActive, setIsActive] = useState(false);

    const onPressLearnMore = () =>{

    return (
      <View style={styles.container}>

        color={ isActive ? "#841584" : "red"}
        title="Press me"


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.


It will help you...

#React Native