🦺 added Beautifull Ui for validations

App.tsx

@@ -11,6 +11,7 @@ import About from './screens/About';
 import Share from './screens/Share';
 import Feedback from './screens/Feedback';
 import SplashScreen from 'react-native-splash-screen';
+import Toast from 'react-native-toast-message';
 
 const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator();
@@ -49,6 +50,8 @@ export default function App() {
         <Drawer.Screen name="Share" component={Share} />
         <Drawer.Screen name="Feedback" component={Feedback} />
       </Drawer.Navigator>
+      {/* Adding Toast component at the root level */}
+      <Toast />
     </NavigationContainer>
   );
 }

screens/Feedback.tsx

@@ -9,6 +9,7 @@ import {
   Linking,
 } from 'react-native';
 import Animated, {StretchInX, StretchOutX} from 'react-native-reanimated';
+import Toast from 'react-native-toast-message';
 
 export default function Feedback() {
   const [name, setName] = useState('');
@@ -18,10 +19,11 @@ export default function Feedback() {
   const sendFeedback = () => {
     // Validate if all fields are filled
     if (!name || !emailAddress || !featureDescription) {
-      Alert.alert(
-        'Validation Error',
-        'Please fill in all the required fields.',
-      );
+      Toast.show({
+        type: 'error',
+        text1: 'Validation Error',
+        text2: 'Please fill in all the required fields.',
+      });
       return;
     }
 

screens/Home.tsx

@@ -11,6 +11,7 @@ import Title from '../components/Title';
 import LottieView from 'lottie-react-native';
 import {NavigationProp} from '@react-navigation/native';
 import Animated, {FadeIn, FadeOut, FadeOutDown} from 'react-native-reanimated';
+import Toast from 'react-native-toast-message';
 
 export default function Home({navigation}: {navigation: NavigationProp<any>}) {
   const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
@@ -21,7 +22,12 @@ export default function Home({navigation}: {navigation: NavigationProp<any>}) {
     if (selectedDifficulty) {
       navigation.navigate('Quiz', {difficulty: selectedDifficulty});
     } else {
-      Alert.alert('Please select a difficulty level');
+      // Alert.alert('Please select a difficulty level');
+      Toast.show({
+        type: 'info',
+        text1: 'Validation Error',
+        text2: 'Please select a difficulty level.',
+      });
     }
   };