jeudi 15 octobre 2020

React Native Button onPress performance

So I have these buttons that do 2 things like checkbox button, Change color , toggle between green and black Stating checked as true or false

My issue is : button that I pressed has mild delay before It changes color, bad performance overall for my app , already tried this in my Redmi 5 Redmi note 9 and Galaxy a8, they all have mild delay with different delay duration Redmi 5 has longest delay like almost 1 sec. My question is : Is there any faster / better performance code for these buttons ? Is this wrong way to do it ?

Here is my code : first I state the initial value

const [booleanMonth,setMonth]=useState([
{key:0,value:'January',title:'Jan',color:'black',checked:false},
{key:1,value:'February',title:'Feb',color:'black',checked:false},
{key:2,value:'March',title:'Mar',color:'black',checked:false},
{key:3,value:'April',title:'Apr',color:'black',checked:false},
{key:4,value:'May',title:'May',color:'black',checked:false},
{key:5,value:'June',title:'Jun',color:'black',checked:false},
{key:6,value:'July',title:'Jul',color:'black',checked:false},
{key:7,value:'August',title:'Aug',color:'black',checked:false},
{key:8,value:'September',title:'Sep',color:'black',checked:true},
{key:9,value:'October',title:'Oct',color:'black',checked:false},
{key:10,value:'November',title:'Nov',color:'black',checked:false},
{key:11,value:'December',title:'Dec',color:'black',checked:false}
])

second, I create the buttons

  const createButtonMonth = () =>{
    return (<View style={styles.containerForButtons2}>
            {
              booleanMonth.map((item,key) => 
                <View key={item.key} style={styles.buttonFilter3}>
                <Button style={styles.buttonFilter3}
                title={item.title} 
                value={booleanMonth[item.key].checked} 
                color={booleanMonth[item.key].checked==true ? 'green':'black'}
                onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
                /></View>)
            }
            </View>)
    }

third I make function to change button color green to back and checked status from false to true vice versa

 const onPressMonthFilter = (keyMonth,statusMonth) =>{    
    let newArr = [...booleanMonth]
    if(newArr[keyMonth].checked==false){
      newArr[keyMonth].checked=true
    }else{
      newArr[keyMonth].checked=false
    }
    
    setMonth(newArr)

  }

thanks for the help




Aucun commentaire:

Enregistrer un commentaire