React Native switch between props onPress-CodePudding

How can i switch between appearance props with onPress? exampe: Default -> Active -> Background -> Default. in AppearanceButton file i have these three props

appearance?: "default" | "active" | "background"

These props control the color of my AppearnceButton, how can i switch between the appearance props onPress?

 function onPressSwitchAppearance() {
        {
          //How to switch between the appearance props onPress?
        }
    }


<View>
   <AppearnceButton onPress={onPressSwitchAppearance} appearance="default" icon="icon1" />
 </View>

CodePudding user response：

You can use a state variable to maintain the appearance and pass it to your AppearanceButton component.

Here is the code for your reference:

import { useState } from 'react';

const YourComponent = () => {
    const [appearance, setAppearance] = useState<"default" | "active" | "background">('default');

    const onPressSwitchAppearance = () => {
      if(apperance === 'default') {
        setAppearance('active');
      } else if (apperance === 'active') {
        setAppearance('background');
      } else {
        setAppearance('default');
      }
    }

    return (
        <View>
            <AppearnceButton onPress={onPressSwitchAppearance} appearance={appearance} icon="icon1" />
        </View>
    )

}

but I'm not sure how you want to decide the new value for appearance.

CodePudding user response：

you should define a state for it

const [appearance ,setApearance] = useState("default")

and in onPressSwitchAppearance you can use setApearance to change the appearance.