CODEWITHSUNDEEP
javascriptreactjsreact-nativeclass
user16350114
user16350114

Reputation:

I need to change that small component from class component to function component

I want to change that component to function component, not class, because I am not familiar with class components, I started to learn react native and in all my courses the code was written in function component, not class

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import {FOOD, MOVIE, LEGO} from './constants'; // Those are just dummy data for maps (lang and lat)
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 43.8012,
        longitude: -79.1902,
        latitudeDelta: 0.025,
        longitudeDelta: 0.025,
      },
    };
    _mapView = React.createRef();
    this._currentRegion = new MapView.AnimatedRegion(this.state.region);
  }

  _showFood = () => {
    this._currentRegion.timing({...FOOD, duration: 1500}).start();
  };

  _showMovie = () => {
    this._currentRegion.timing({...MOVIE, duration: 1500}).start();
  };

  _showLego = () => {
    this._currentRegion.timing({...LEGO, duration: 1500}).start();
  };

  onRegionChange(region) {
    this.setState({region});
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <MapView.Animated
          ref={this._mapView}
          provider={PROVIDER_GOOGLE}
          region={this._currentRegion}
          style={styles.map}>
          <Marker coordinate={FOOD} />
          <Marker coordinate={MOVIE} />
          <Marker coordinate={LEGO} />
        </MapView.Animated>

        <View style={styles.bottomContainer}>

          <TouchableOpacity onPress={this._showFood}>
            <Text style={styles.btnText}>FOOD</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={this._showMovie}>
            <Text style={styles.btnText}>MOVIE</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={this._showLego}>
            <Text style={styles.btnText}>LEGO</Text>
          </TouchableOpacity>

        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  ....styles
});

I would be grateful if someone help me,because I am not familiar with class components.

Upvotes: 0

Views: 57

Answers (1)

Amar Preet Singh
Amar Preet Singh

Reputation: 26

here is the functional component

import React from 'react';
import { StyleSheet, Text, View , TouchableOpacity, SafeAreaView} from 'react-native';
import {FOOD, MOVIE, LEGO} from './constants'; // Those are just dummy data for maps (lang and lat)
import MapView, {PROVIDER_GOOGLE, Marker} from "react-native-maps";

const App = () => {
    //useState hook save your state same as state in class component
    const[regionState, setRegionState] = React.useState({ 
         region:{
             latitude: 43.8012,
             longitude: -79.1902,
             latitudeDelta: 0.025,
             longitudeDelta: 0.025
        } 
    });
    _mapView = React.useRef();
    _currentRegion = new MapView.AnimatedRegion(regionState.region);

    const _showFood = () => {
        _currentRegion
       .timing({...FOOD, duration: 1500})
       .start();
     }
    const _showMovie = () => {
         _currentRegion
         .timing({...MOVIE, duration: 1500})
         .start();
    }
    
    const _showLego = () => {
         _currentRegion
         .timing({...LEGO, duration: 1500})
         .start();
    }

    const onRegionChange = (region) => {
       setRegionState({region});
     }

return (
  <SafeAreaView style={styles.container}>
    <MapView.Animated
    ref={_mapView}
    provider= {PROVIDER_GOOGLE}
    region={_currentRegion}
    style={styles.map}>
      <Marker coordinate={FOOD}/>
      <Marker coordinate={MOVIE}/>
      <Marker coordinate={LEGO}/>
    </MapView.Animated>
<View style= {styles.bottomContainer}>
  <View style={styles.btnContainer}>
    <View style={styles.btn}>
      <TouchableOpacity onPress={_showFood}>
        <Text style={styles.btnText}>FOOD</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.btn}>
      <TouchableOpacity onPress={_showMovie}>
        <Text style={styles.btnText}>MOVIE</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.btn}>
      <TouchableOpacity onPress={_showLego}>
        <Text style={styles.btnText}>LEGO</Text>
      </TouchableOpacity>
    </View>
  </View>
  <View style={styles.btnContainer}>
  </View>
</View>
  </SafeAreaView>
);
}

const styles = StyleSheet.create({
    ....styles
});

export default App;

Upvotes: 1

Related Questions