Question 34341 in React native Question posted in
The official React Native documentation can be found here.

React Native switch between props onPress

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    you should define a state for it

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search