how can I fix these problems and run the app without errors. PS: I tried to adopt the app on other views with the same code and the code is working.
Code:
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
View,
Text,
Image,
TouchableHighlight
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import * as Location from 'expo-location';
import MapView, { Marker } from 'react-native-maps';
import { colors, device, fonts, gStyle } from '../constants';
import RequestRideType from '../components/RequestRideType';
import SelectRideType from '../components/SelectRideType';
import TouchIcon from '../components/TouchIcon';
import TouchText from '../components/TouchText';
import WhereTo from '../components/WhereTo';
import SvgCheckShield from '../components/icons/Svg.CheckShield';
import SvgMenu from '../components/icons/Svg.Menu';
import SvgQRCode from '../components/icons/Svg.QRCode';
import { getlist } from '../services/event';
const { PROVIDER_GOOGLE } = MapView;
export const types = {
car: {
image: 'carSm',
imageLg: 'carLg',
text: 'Soccer'
},
bike: {
image: 'bikeSm',
imageLg: 'bikeLg',
text: 'Basket'
},
golf: {
image: 'golfSm',
imageLg: 'golfLg',
text: 'Golf'
},
baseball: {
image: 'golfSm',
imageLg: 'golfLg',
text: 'Baseball'
}
};
export function HomeLoad(props) {
const [Activity, setlistActivity] = useState([]);
const load = async () => {
if (Activity.length === 0) {
const list = await getlist();
setlistActivity(list);
}
};
useEffect(() => {
load();
});
return <Home eventlist={Activity} props={props} />;
}
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'car',
selectType: false,
showMap: false,
userLat: null,
userLon: null
};
this.toggleTypeModal = this.toggleTypeModal.bind(this);
this.changeRideType = this.changeRideType.bind(this);
}
async componentDidMount() {
// Check location permession
const { status: existingStatus } =
await Location.requestForegroundPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Location.requestForegroundPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== 'granted') {
return;
}
// Load Position of user
const { coords } = await Location.getCurrentPositionAsync();
this.setState({
showMap: true,
userLat: coords.latitude,
userLon: coords.longitude
});
}
toggleTypeModal() {
this.setState((prevState) => ({
selectType: !prevState.selectType
}));
}
changeRideType(type) {
this.setState({
type
});
}
render() {
const { eventlist } = this.props;
const { navigation } = this.props.props;
const { type, selectType, showMap, userLat, userLon } = this.state;
return (
<View style={gStyle.container}>
{showMap && (
<React.Fragment>
<MapView
followsUserLocation
minZoomLevel={4}
pitchEnabled
rotateEnabled
zoomEnabled
scrollEnabled
provider={PROVIDER_GOOGLE}
region={{
latitude: userLat,
longitude: userLon,
latitudeDelta: 0.01,
longitudeDelta: 0.01
}}
showsUserLocation
style={styles.map}
>
{eventlist.length > 0
? eventlist.map((objectvalue) => (
<Marker
key={Math.random()}
coordinate={{
latitude: objectvalue.latitudine
? objectvalue.latitudine
: this.state.userLat,
longitude: objectvalue.longitudine
? objectvalue.longitudine
: this.state.userLon
}}
>
<View style={styles.circle}>
<Text style={styles.pinText}>
{objectvalue.SportType === 'Golf' ? (
<Image
style={stylesMarker.tinyLogo}
source={require('../assets/images/golf-lg.jpg')}
/>
) : objectvalue.SportType === 'Soccer' ? (
<Image
style={stylesMarker.tinyLogo}
source={require('../assets/images/soccer.png')}
/>
) : objectvalue.SportType === 'Baseball' ? (
<Image
style={stylesMarker.tinyLogo}
source={require('../assets/images/baseball.jpg')}
/>
) : (
<Image
style={stylesMarker.tinyLogo}
source={require('../assets/images/basket.png')}
/>
)}
</Text>
</View>
</Marker>
))
: console.log('non ci sono eventi')}
</MapView>
</React.Fragment>
)}
{!showMap && (
<View style={styles.containerNoLocation}>
<Text style={styles.textLocationNeeded}>Search Fit Event...</Text>
<TouchText
// eslint-disable-next-line no-undef
onPress={() => Linking.openURL('app-settings:')}
style={styles.btnGoTo}
styleText={styles.btnGoToText}
text="Go To Permissions"
/>
</View>
)}
{type === 'bike' && (
<View style={styles.rightContainer}>
<View style={styles.icon}>
<TouchIcon
icon={<SvgQRCode />}
iconSize={20}
onPress={() => navigation.navigate('ModalQRCode')}
style={[styles.icon, styles.iconQRCode]}
/>
<TouchIcon
icon={<SvgCheckShield />}
iconSize={20}
onPress={() => navigation.navigate('ModalTutorialBike')}
style={[styles.icon, styles.iconShield]}
/>
</View>
</View>
)}
<View style={styles.header}>
<TouchIcon
icon={<SvgMenu />}
iconSize={32}
onPress={() => navigation.toggleDrawer()}
/>
<RequestRideType
image={types[type].image}
onPress={this.toggleTypeModal}
text={types[type].text}
/>
{type === 'car' && <View style={styles.placeholder} />}
{type === 'bike' && (
<TouchText
onPress={() => navigation.navigate('ModalHelp')}
style={styles.help}
text="Info"
/>
)}
</View>
<SelectRideType
data={types}
onClose={this.toggleTypeModal}
onSelect={this.changeRideType}
visible={selectType}
/>
<WhereTo />
<View style={styles.mainConatinerStyle} />
<TouchableHighlight onPress={() => Actions.addactivity()}>
<Image
onPress={() => Actions.addactivity()}
style={styles.image}
source={require('../assets/images/add.png')}
/>
</TouchableHighlight>
</View>
);
}
}
const stylesMarker = StyleSheet.create({
container: {
paddingTop: 50
},
tinyLogo: {
height: 50,
width: 50
},
logo: {
height: 58,
width: 66
}
});
const styles = StyleSheet.create({
mainConatinerStyle: {
flexDirection: 'row',
flex: 1
},
image: {
display: 'flex',
flexDirection: 'row',
height: 50,
justifyContent: 'space-between',
marginBottom: 10,
marginLeft: 30,
width: 50
},
floatingMenuButtonStyle: {
alignSelf: 'flex-end',
bottom: 35,
position: 'absolute'
},
circle: {
backgroundColor: 'red',
borderRadius: 30 / 2,
height: 30,
width: 30
},
pinText: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
textAlign: 'center'
},
map: {
flex: 1,
height: device.height,
position: 'absolute',
width: device.width
},
containerNoLocation: {
alignItems: 'center',
height: device.height,
justifyContent: 'center',
position: 'absolute',
width: device.width
},
textLocationNeeded: {
fontFamily: fonts.uberMedium,
fontSize: 16,
marginBottom: 16
},
btnGoTo: {
backgroundColor: colors.black,
borderRadius: 3,
paddingHorizontal: 16,
paddingVertical: 8
},
btnGoToText: {
color: colors.white,
fontFamily: fonts.uberMedium,
fontSize: 16
},
header: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
paddingHorizontal: 20,
paddingTop: device.iPhoneX ? 58 : 34
},
help: {
textAlign: 'center',
width: 32
},
placeholder: {
height: 32,
width: 32
},
rightContainer: {
alignItems: 'center',
height: '100%',
justifyContent: 'center',
position: 'absolute',
right: 16,
width: 40
},
icon: {
borderRadius: 18,
height: 36,
shadowColor: colors.black,
shadowOffset: { height: 2, width: 0 },
shadowOpacity: 0.2,
shadowRadius: 8,
width: 36
},
iconQRCode: {
backgroundColor: colors.blue,
marginBottom: 16
},
iconShield: {
backgroundColor: colors.white
}
});
export default Home;
CodePudding user response：
This is a problem of one of your dependencies, and should be solved by the authors after they update it.
As a temporary solution, you can simply ignore the logs:
Create a file named ignoreWarns.js in the root directory of your project, it should contain:
import { LogBox } from "react-native";
if (__DEV__) {
const ignoreWarns = [
"EventEmitter.removeListener",
"[fuego-swr-keys-from-collection-path]",
"Setting a timer for a long period of time",
"ViewPropTypes will be removed from React Native",
"AsyncStorage has been extracted from react-native",
"exported from 'deprecated-react-native-prop-types'.",
"Non-serializable values were found in the navigation state.",
"VirtualizedLists should never be nested inside plain ScrollViews",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
}
Now import the file in at the top of every other file you have.
CodePudding user response：
You're missing the dependency array in useEffect that's why it's running infinite times and crashing the app. Please add the empty array in useEffect.
useEffect(() => {
load();
}, []);