bug fixes

app/screens/account/index.js

@@ -192,6 +192,7 @@ class About extends React.PureComponent {
                   <NBImage
                     style={{height: 50, width: 50, marginRight: 10, borderRadius: 25}}
                     source={account.data ? account.data.photo == '' ? Assets.logo.profileHolder : {uri: account.data.photo} : Assets.logo.profileHolder}
+                    alt="Profile Photo"
                   />
                 </View>
                 <View style={{flex: 3, justifyContent: 'center'}}>
@@ -262,6 +263,7 @@ class About extends React.PureComponent {
           <Image
             source={Assets.logo.unioil}
             style={{width: '100%', height: '85%', resizeMode: 'contain'}}
+            alt="Unioil Logo"
           />
         </View>
         <View style={{flex: 1}}>
@@ -271,6 +273,7 @@ class About extends React.PureComponent {
                 <NBImage
                   style={{height: 50, width: 50, marginRight: 10, borderRadius: 25}}
                   source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
+                  alt="Profile Photo"
                 />
               </View>
               <View style={{flex: 3, justifyContent: 'center'}}>

app/screens/main/station/fragments/bottomsheet.js

@@ -92,15 +92,14 @@ const updateFavorite = async (city, index, callback) => {
 
 export default function renderStationPanel(props) {
 
-  const [updatedFavorite, setupdatedfavorite] = useState(false)
-  const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null)
   const bottomSheetRef = useRef(null);
+  const snapPoints = [450, 300, 0];
 
   useEffect(() => {
     if (props.visible) {
       bottomSheetRef.current?.expand();
     } else {
-      bottomSheetRef.current?.close(); 
+      bottomSheetRef.current?.collapse();
     }
   }, [props.visible]);
 
@@ -108,10 +107,11 @@ export default function renderStationPanel(props) {
     <View style={styles.container}>
       <BottomSheet
         ref={bottomSheetRef}
-        snapPoints={['50%', '30%', '0%']}
+        snapPoints={snapPoints}
         enablePanDownToClose={true}
-        index={props.visible ? 1 : -1}
+        index={-1}
       >
+        {renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite)}
         <View style={styles.panelHeader}>
           <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
             <Text style={{ flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15 }}>
@@ -125,7 +125,6 @@ export default function renderStationPanel(props) {
             </View>
           </View>
         </View>
-        {renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite)}
       </BottomSheet>
     </View >
   )

app/screens/main/station/fragments/map.js

@@ -33,8 +33,8 @@ export default function RenderMap(props){
   return (
     <MapView
       ref={props.getRef}
-      // provider={PROVIDER_GOOGLE}
+      provider={PROVIDER_GOOGLE}
-      provider={null}
+      // provider={null}
       loadingEnabled={true}
       style={styles.map}
       showsUserLocation={true}

app/screens/main/station/fragments/stationdetailspanel.js

@@ -47,12 +47,13 @@ const renderStationPanel = (props) => {
   const [updateFavorite, setUpdateFavorite] = useState(0)
   const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
   const bottomSheetRef = useRef(null);
+  const snapPoints = ['40%'];
 
   useEffect(() => {
     if (props.visible) {
       bottomSheetRef.current?.expand();
     } else {
-      bottomSheetRef.current?.close(); 
+      bottomSheetRef.current?.collapse();
     }
   }, [props.visible]);
 
@@ -180,13 +181,14 @@ const renderStationPanel = (props) => {
   }
 
   return (
-    <View style={{ flex: 1 }}>
+    // <View style={{ flex: 1 }}>
       <BottomSheet
         ref={bottomSheetRef}
-        snapPoints={['70%', '40%', '0%']}
+        index={-1}
+        snapPoints={snapPoints}
         enablePanDownToClose={true}
-        enableContentPanningGesture={true}
       >
+        {renderStationDetails(props.data, props.onClick)}
         <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
           <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
             <Text numberOfLines={1} style={{ flex: 1, paddingRight: 40, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold' }}>
@@ -215,9 +217,8 @@ const renderStationPanel = (props) => {
             </View>
           </View>
         </View>
-        {renderStationDetails(props.data, props.onClick)}
       </BottomSheet>
-    </View>
+    // </View>
   );
 }
 

app/screens/main/station/fragments/stationpanel.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useState, useEffect, useRef} from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
   Text,
   View,
@@ -39,7 +39,7 @@ const styles = {
   },
 };
 
-const {height} = Dimensions.get('window');
+const { height } = Dimensions.get('window');
 
 const renderStations = (isGuest, data, onPress, onUpdateFavorite, props) => {
   return data.map((station, index) => {
@@ -49,9 +49,10 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite, props) => {
       return (
         <Icon.AntDesign
           name={name}
-          style={{marginLeft: mgn}}
+          style={{ marginLeft: mgn }}
           color={Theme.colors.yellow}
           size={20}
+          key={i}
         />
       );
     });
@@ -60,10 +61,10 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite, props) => {
         key={index}
         activeOpacity={1}
         onPress={() => onPress(station) || null}
-        style={{backgroundColor: props.app_theme?.theme.dark ? Theme.colors.black : Theme.colors.white}}
+        style={{ backgroundColor: props.app_theme?.theme.dark ? Theme.colors.black : Theme.colors.white }}
-        >
+      >
-        <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
+        <View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
-          <View style={{flex: 5}}>
+          <View style={{ flex: 5 }}>
             <Text
               style={{
                 fontSize: 16,
@@ -81,17 +82,17 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite, props) => {
               }}>
               {station.address}
             </Text>
-            <View style={{flexDirection: 'row', paddingTop: 7}}>{stars}</View>
+            <View style={{ flexDirection: 'row', paddingTop: 7 }}>{stars}</View>
           </View>
           <TouchableOpacity
             onPress={() => {
-              if(isGuest){
+              if (isGuest) {
                 guestError()
               } else {
                 updateFavorite(station, index, onUpdateFavorite)
               }
             }}
-            style={{flex: 0, justifyContent: 'center'}}>
+            style={{ flex: 0, justifyContent: 'center' }}>
             <Icon.FontAwesome
               name={station.favorite ? 'heart' : 'heart-o'}
               size={28}
@@ -100,7 +101,7 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite, props) => {
           </TouchableOpacity>
         </View>
         <Divider
-          style={{marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w}}
+          style={{ marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w }}
         />
       </TouchableOpacity>
     );
@@ -113,13 +114,13 @@ const guestError = () => {
     `\nApply for a card to enjoy this feature`,
     [
       {
-          text: 'Cancel',  
+        text: 'Cancel',
-          onPress: () => console.log('Cancel Pressed'),  
+        onPress: () => console.log('Cancel Pressed'),
-          style: { color: 'red' },  
+        style: { color: 'red' },
       },
       {
-          text: 'Enroll Card', 
+        text: 'Enroll Card',
-          onPress: () => navigate('Login')
+        onPress: () => navigate('Login')
       },
     ]
   );
@@ -148,16 +149,11 @@ const updateFavorite = async (city, index, callback) => {
 };
 
 const renderStationPanel = (props) => {
-   const [snap, setSnap] = useState(['10%', '10%', '3%']); 
+  const [snap, setSnap] = useState(['10%', '10%', '3%']);
-   const bottomSheetRef = useRef(null);
+  const bottomSheetRef = useRef(null);
 
   useEffect(() => {
     init();
-    if (props.visible) {
-      bottomSheetRef.current?.expand(); 
-    } else {
-      bottomSheetRef.current?.close(); 
-    }
   }, [props.visible, props.data]);
 
   const init = () => {
@@ -177,79 +173,62 @@ const renderStationPanel = (props) => {
   };
 
   const getPanelTitle = () => {
-    if(props.error) return 'There was an error'
+    if (props.error) return 'There was an error'
-    else if(props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
+    else if (props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
-    else if(!props.loading && props.isFavorite && props.data.length == 0) return 'No Favorite'
+    else if (!props.loading && props.isFavorite && props.data.length == 0) return 'No Favorite'
-    else if(props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
+    else if (props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
     else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
   }
 
-  const renderHeaders = () => (
+  const renderHeaders = () => {
-      <View style={styles.panel}>
+    return (
-        <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
+      <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
-          <View
+        <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
-            style={{
+          <Text style={{
-              flexDirection: 'row',
+            flex: 4,
-              justifyContent: 'center',
+            padding: 5,
-              padding: 15,
+            color: props.app_theme?.theme.colors.text,
-            }}>
+            fontSize: 15,
-            <Text
+          }}>
-              style={{
+            {getPanelTitle()}
-                flex: 4,
+          </Text>
-                padding: 5,
+          <View style={{ flex: 0, justifyContent: 'center' }}>
-                color: props.app_theme?.theme.colors.text,
+            {props.error ? (
-                fontSize: 15,
+              <TouchableOpacity onPress={props.onError} activeOpacity={1}>
-              }}>
+                <Text style={{ color: '#fff' }}>Try Again</Text>
-              {getPanelTitle()}
+              </TouchableOpacity>
-            </Text>
+            ) : props.loading ? (
-            <View style={{flex: 0, justifyContent: 'center'}}>
+              <ActivityIndicator color={Theme.colors.primary} size={25} />
-              {props.error ? (
+            ) : null}
-                <TouchableOpacity onPress={props.onError} activeOpacity={1}>
-                  <Text style={{color: '#fff'}}>Try Again</Text>
-                </TouchableOpacity>
-              ) : props.loading ? (
-                <ActivityIndicator color={Theme.colors.primary} size={25} />
-              ) : null}
-            </View>
           </View>
         </View>
       </View>
     );
+  };
 
-    const renderContents = () => (
+  const renderContents = () => {
-      <BottomSheetScrollView
+    return (
-        style={{
+      <SafeAreaView>
-          backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
+        {props.data.length > 0 ? renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite, props) :
-        }}
+          <View style={{ height: 250, width: '100%', backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}></View>}
-      >
+      </SafeAreaView>
-        <SafeAreaView>
-          {props.data.length > 0 ? (
-            renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite, props)
-          ) : (
-            <View
-              style={{
-                height: 250,
-                width: '100%',
-                backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
-              }}
-            />
-          )}
-        </SafeAreaView>
-      </BottomSheetScrollView>
     );
+  };
 
   return (
-    <View style={{ flex: 1 }}>
+    // <View style={{ flex: 1 }}>
       <BottomSheet
         ref={bottomSheetRef}
         snapPoints={snap}
         enablePanDownToClose={true}
-        index={props.visible ? 1 : -1}
+        index={-1}
       >
-        {renderHeaders()}
+        <View>
-        {renderContents()}
+          {renderHeaders()}
+          {renderContents()}
+        </View>
       </BottomSheet>
-    </View>
+    // </View>
   );
 }
 

app/screens/payatpump/fragments/stationpanel.js

@@ -103,37 +103,41 @@ const updateFavorite = async (city, index, callback) => {
 };
 
 const renderStationPanel = (props) => {
-  const [panel, setpanel] = useState(null);
-  const [updatedFavorite, setupdatedfavorite] = useState(false);
-  const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null);
-  const [loading, setLoading] = useState(false);
   const [snap, setSnap] = useState(['10%', '10%', '3%']);
   const bottomSheetRef = useRef(null);
+  const [initialSnap, setInitialSnap] = useState(0)
 
   useEffect(() => {
     init();
-    if (props.visible) {
-      bottomSheetRef.current?.expand();
-    } else {
-      bottomSheetRef.current?.close();
-    }
   }, [props.visible, props.data.length]);
 
+
   const init = () => {
-    if (props.visible == true || props.data.length !== 0) {
+    if (props.visible == true) {
       if (props.data.length === 1) {
         setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
       } else if (props.data.length === 2) {
         setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
+        setInitialSnap(0);
       } else {
         setSnap(['38%', '8%', '8%']);
+        setInitialSnap(0);
+      }
+    } else if (props.data.length != 0) {
+      if (props.data.length === 1) {
+        setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
+      } else if (props.data.length === 2) {
+        setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
+        setInitialSnap(0);
+      } else {
+        setSnap(['38%', '8%', '8%']);
+        setInitialSnap(0);
       }
-
     } else {
       setSnap([Platform.select({ ios: '14%', android: '12%' }), '8%', '8%']);
+      setInitialSnap(2);
     }
   };
-
   const getPanelTitle = () => {
     if (props.error) return 'There was an error'
     else if (props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
@@ -142,22 +146,16 @@ const renderStationPanel = (props) => {
     else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
   }
 
-  const renderHeaders = () => (
+  const renderHeaders = () => {
-    <View style={styles.panel}>
+    return (
       <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
-        <View
+        <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
-          style={{
+          <Text style={{
-            flexDirection: 'row',
+            flex: 4,
-            justifyContent: 'center',
+            padding: 5,
-            padding: 15,
+            color: props.app_theme?.theme.colors.text,
+            fontSize: 15,
           }}>
-          <Text
-            style={{
-              flex: 4,
-              padding: 5,
-              color: props.app_theme?.theme.colors.text,
-              fontSize: 15,
-            }}>
             {getPanelTitle()}
           </Text>
           <View style={{ flex: 0, justifyContent: 'center' }}>
@@ -171,42 +169,29 @@ const renderStationPanel = (props) => {
           </View>
         </View>
       </View>
-    </View>
+    );
-  );
+  };
-
-
-  const renderContents = () => (
-    <BottomSheetScrollView 
-      style={{
-        backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
-      }}
-    >
-      {props.data.length > 0 ? (
-        renderStations(props.data, props.onClick, props.onUpdateFavorite, props)
-      ) : (
-        <View
-          style={{
-            height: 250,
-            width: '100%',
-            backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
-          }}
-        >
-          <View />
-        </View>
-      )}
-    </BottomSheetScrollView>
-  );
 
+  const renderContents = () => {
+    return (
+      <SafeAreaView style={props.data.length < 3 && { height: '100%', backgroundColor: 'white' }}>
+        {props.data.length > 0 ? renderStations(props.data, props.onClick, props.onUpdateFavorite, props) :
+          <View style={{ height: 250, width: '100%', backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}></View>}
+      </SafeAreaView>
+    );
+  };
 
   return (
     <BottomSheet
       ref={bottomSheetRef}
       snapPoints={snap}
       enablePanDownToClose={true}
-      index={props.visible ? 1 : -1} 
+      index={initialSnap}
     >
-      {renderHeaders()}
+      <View>
-      {renderContents()}
+        {renderHeaders()}
+        {renderContents()}
+      </View>
     </BottomSheet>
   );
 }

index.js

@@ -6,11 +6,13 @@ import './polyfills.js';
 import 'react-native-gesture-handler';
 import 'react-native-reanimated';
 
-import { AppRegistry } from 'react-native';
+import { AppRegistry, LogBox } from 'react-native';
 import App from './app/App';
 import { name as appName } from './app.json';
 import messaging from '@react-native-firebase/messaging';
 
+LogBox.ignoreLogs(['`new NativeEventEmitter()`']);
+
 messaging().setBackgroundMessageHandler(async remoteMessage => {
     console.log("'Message handled in the background!'", remoteMessage);
 });