React-Native Switch Component not working click

Question

React-Native with I do studies but Doesnt work when my use component.

this is my data:

const data=[
  {id: 0, name:'cafe.exe', isFavorite:true},
  {id: 1, name:'Kafe.Kafe', isFavorite:false},
  {id: 2, name:'BugG', isFavorite:false},
  {id: 3, name:'Rockn Coke', isFavorite:true},
  {id: 4, name:'do(drink)', isFavorite:false},
  {id: 5, name:'Esc', isFavorite:false},
];

this is my code:

unction App(){
const \[cafeList, setCafeList\]=useState(data);
const \[showOnlyFavorite, setShowOnlyFavorite\]=useState(false);

function onFavoriteChange(isFavoriteSelected){
setShowOnlyFavorite(isFavoriteSelected);
isFavoriteSelected
? setCafeList(cafeList.filter(cafe=\>cafe.isFavorite))
:setCafeList(data);
}

return (
\<SafeAreaView\>
\<View style={{margin:10}}\>

          <Text>Show Only Favorite</Text>
    
          <Switch 
                  style={{left:-320}}
                  value={showOnlyFavorite} 
                  onValueChage={onFavoriteChange} 
          />
          </View>
          <FlatList 
              data={cafeList} 
              renderItem={({item})=> <Text style={{fontSize:25}}>{item.name}</Text>} 
          />
      </SafeAreaView>

);
}

export default App;

where could i be doing wrong

React-Native Switch Component not working click

Answer 1

here is example code it's working

hope this will help you

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

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}></Switch>
      {isEnabled ? <Text> its on</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;