setting page

app/(tabs)/_layout.tsx

@@ -66,14 +66,28 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="donates"
+        name="settings"
         options={{
-          title: 'Donates',
-          tabBarIcon: ({ color }) => <TabBarIcon name="dollar" color={color} />,
+          title: 'Settings',
+          tabBarIcon: ({ color }) => <TabBarIcon name="cogs" color={color} />,
           headerTransparent: true,
           headerBackground: () => (
             <BlurView tint={colorScheme} intensity={100} style={StyleSheet.absoluteFill} />
           ),
+          headerRight: () => (
+            <Link href="/donatesModal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="dollar"
+                    size={25}
+                    color={Colors[colorScheme ?? 'light'].text}
+                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
         }}
       />
     </Tabs>

app/(tabs)/settings.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Switch } from 'react-native';
+import { Text, View } from '../../components/Themed';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useRecoilState } from 'recoil';
+import { autoReadPokemonName } from 'store/globalState';
+
+export default function TabDonatesScreen() {
+  const headerHeight = useHeaderHeight();
+  const [isEnabled, setIsEnabled] = useRecoilState(autoReadPokemonName);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  const handleAutoRead = () => {
+    toggleSwitch();
+  }
+
+  return (
+    <View style={{ ...styles.container, marginTop: headerHeight }}>
+      <View style={styles.wrapper}>
+        <View style={styles.row}>
+          <Text>Auto Read Pokemon Name</Text>
+          <Switch
+             onValueChange={handleAutoRead}
+             value={isEnabled}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    padding: 16
+  },
+  wrapper: {
+    maxWidth: 500,
+    minWidth: 300,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+});

app/_layout.tsx

@@ -57,6 +57,7 @@ function RootLayoutNav() {
           <Stack.Screen name="pokemonList" />
           <Stack.Screen name="pokemonDetails" options={{ headerShown: false }} />
           <Stack.Screen name="modal" options={{ headerTitle: 'Information', presentation: 'modal' }} />
+          <Stack.Screen name="donatesModal" options={{ headerTitle: 'Donates', presentation: 'modal' }} />
         </Stack>
       </ThemeProvider>
     </RecoilRoot>

app/(tabs)/donates.tsx → app/donatesModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, Alert, Image, Linking, Clipboard, Platform } from 'react-native';
-import { Text, View } from '../../components/Themed';
+import { Text, View } from '../components/Themed';
 
 export default function TabDonatesScreen() {
 
@@ -58,10 +58,10 @@ export default function TabDonatesScreen() {
 
         <View style={styles.donationRow}>
           <TouchableOpacity style={styles.payPalButton} onPress={showPayPalDonation}>
-            <Image source={require('../../assets/images/paypal.png')} style={styles.logo} />
+            <Image source={require('../assets/images/paypal.png')} style={styles.logo} />
           </TouchableOpacity>
           <TouchableOpacity style={styles.metaMaskButton} onPress={showMetaMaskAddress}>
-            <Image source={require('../../assets/images/metamask.png')} style={styles.logo} />
+            <Image source={require('../assets/images/metamask.png')} style={styles.logo} />
           </TouchableOpacity>
         </View>
         <Text>Thank you for making the Pokédex App awesome!</Text>

app/pokemonDetails.tsx

@@ -8,11 +8,13 @@ import PokemonTypes from '../constants/PokemonTypes';
 import * as Speech from 'expo-speech';
 import { useLocalSearchParams } from 'expo-router';
 import pokemonMovesType from "../constants/PokemonMovesType";
+import { useRecoilValue } from 'recoil';
+import { autoReadPokemonName } from 'store/globalState';
 
 
 export default function PokemonDetailsScreen() {
   const params = useLocalSearchParams();
-  const { endPoint, imgId } = params;
+  const { endPoint, imgId, name } = params;
   const [imageId, setImageId] = useState(imgId);
   const [pokeEndPoint, setEndpoint] = useState(endPoint as any);
   const [details, setDetail] = useState([]) as any;
@@ -21,9 +23,10 @@ export default function PokemonDetailsScreen() {
   const [evolutionEndPoint, setEvolutionEndPoint] = useState([]) as any;
   const [dominantType, setDominantType] = useState('');
   const [activeTabs, setActiveTabs] = useState(0) as any;
-
   const officialArtWork = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/" + imageId + ".png";
 
+  const autoRead = useRecoilValue(autoReadPokemonName);
+
   const getPokemon = async () => {
     axios({
       url: pokeEndPoint,
@@ -102,10 +105,21 @@ export default function PokemonDetailsScreen() {
 
   let animation = useRef(new Animated.Value(0));
 
-  const pokeSpeak = (sentance: string) => {
-    Speech.speak(sentance);
+  const pokeSpeak = (sentence: any) => {
+    Speech.speak(sentence);
   };
 
+  useEffect(() => {
+    let readExample = true;
+    if (readExample === true && autoRead === true) {
+      setTimeout(() => {
+        pokeSpeak(name)
+      }, 1500);
+    }
+    return function cleanup() {
+      readExample = false
+    }
+  }, []);
 
   return (
     <View style={styles.container}>

components/PokemonListing.tsx

@@ -11,11 +11,12 @@ const PokemonListing = ({ handleNextPokemon, data }: { handleNextPokemon?: any,
   const headerHeight = useHeaderHeight();
   const router = useRouter();
 
-  function handlePokemonDetails(link: any, id: any) {
+  function handlePokemonDetails(link: any, id: any, name: any) {
     router.push({
       pathname: "/pokemonDetails", params: {
         endPoint: link,
-        imgId: id
+        imgId: id,
+        name: name
       }
     });
   }
@@ -37,7 +38,7 @@ const PokemonListing = ({ handleNextPokemon, data }: { handleNextPokemon?: any,
           const pokemonImage = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' + pokemonId + '.png';
           return (
             <TouchableOpacity
-              onPress={() => handlePokemonDetails(item.url, pokemonId)}
+              onPress={() => handlePokemonDetails(item.url, pokemonId, item.name)}
               style={{ ...styles.pokemonWrapper, width: wrapperWidth }}
               key={item.name}
             >

store/globalState.tsx

@@ -33,3 +33,9 @@ export const favoritePokemonState = atom({
   default: [],
   effects_UNSTABLE: [localStorageEffect('favoritePokemonState')],
 });
+
+export const autoReadPokemonName = atom({
+  key: 'autoReadPokemonName',
+  default: false,
+  effects_UNSTABLE: [localStorageEffect('autoReadPokemonName')],
+});