refactor(example): clean up folder structure (rnmapbox#1464)

* fix(example): fix Yo Yo Camera example * refactor(example): move examples into group dir * chore(example): adjust zoom for restrict bounds example * fix(example): remove timeout on YoYo example upon unmount * docs: update changelog
OneSoil-Platform · Sep 23, 2021 · 240b4d4 · 240b4d4
1 parent a3e0352
commit 240b4d4
Show file tree

Hide file tree

Showing 42 changed files with 226 additions and 318 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ PR Title ([#123](link to my pr))
 Fix TypeScript type for Callout's textStyle prop ([#1450](https://github.com/react-native-mapbox-gl/maps/pull/1450))  
 Fix crash with missing okhttp dependency ([#1452](https://github.com/react-native-mapbox-gl/maps/pull/1452))  
 Move from react-native-testing-library => @testing-library/react-native ([#1453](https://github.com/react-native-mapbox-gl/maps/pull/1453))  
+refactor(example): clean up folder structure ([#1464](https://github.com/react-native-mapbox-gl/maps/pull/1464))
 
 ---
 

diff --git a/example/src/examples/AnimatedLine.js → ...e/src/examples/Animations/AnimatedLine.js b/example/src/examples/AnimatedLine.js → ...e/src/examples/Animations/AnimatedLine.js
@@ -5,11 +5,11 @@ import along from '@turf/along';
 import length from '@turf/length';
 import {point, lineString} from '@turf/helpers';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const blon = -73.99155;
 const blat = 40.73481;

diff --git a/example/src/examples/DriveTheLine.js → ...e/src/examples/Animations/DriveTheLine.js b/example/src/examples/DriveTheLine.js → ...e/src/examples/Animations/DriveTheLine.js
@@ -5,14 +5,14 @@ import {Button} from 'react-native-elements';
 import {lineString as makeLineString} from '@turf/helpers';
 import {point} from '@turf/helpers';
 
-import RouteSimulator from '../utils/RouteSimulator';
-import {directionsClient} from '../MapboxClient';
-import sheet from '../styles/sheet';
-import {SF_OFFICE_COORDINATE} from '../utils';
-
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import PulseCircleLayer from './common/PulseCircleLayer';
+import RouteSimulator from '../../utils/RouteSimulator';
+import {directionsClient} from '../../MapboxClient';
+import sheet from '../../styles/sheet';
+import {SF_OFFICE_COORDINATE} from '../../utils';
+
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import PulseCircleLayer from '../common/PulseCircleLayer';
 
 const SF_ZOO_COORDINATE = [-122.505412, 37.737463];
 

diff --git a/example/src/examples/CompassView.js → example/src/examples/Camera/CompassView.js b/example/src/examples/CompassView.js → example/src/examples/Camera/CompassView.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import {MapView, Camera} from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 class CompassView extends React.Component {
   static propTypes = {

diff --git a/example/src/examples/FitBounds.js → example/src/examples/Camera/FitBounds.js b/example/src/examples/FitBounds.js → example/src/examples/Camera/FitBounds.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import TabBarPage from './common/TabBarPage';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import TabBarPage from '../common/TabBarPage';
 
 class FitBounds extends React.Component {
   static propTypes = {...BaseExamplePropTypes};

diff --git a/example/src/examples/FlyTo.js → example/src/examples/Camera/FlyTo.js b/example/src/examples/FlyTo.js → example/src/examples/Camera/FlyTo.js
@@ -2,10 +2,10 @@ import React from 'react';
 import {Alert} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import TabBarPage from './common/TabBarPage';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import TabBarPage from '../common/TabBarPage';
 
 const layerStyles = {
   building: {

diff --git a/example/src/examples/GetCenter.js → example/src/examples/Camera/GetCenter.js b/example/src/examples/GetCenter.js → example/src/examples/Camera/GetCenter.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {Text} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const styles = {
   mapView: {flex: 1},

diff --git a/example/src/examples/GetZoom.js → example/src/examples/Camera/GetZoom.js b/example/src/examples/GetZoom.js → example/src/examples/Camera/GetZoom.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {Text} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const styles = {
   mapView: {flex: 1},

diff --git a/example/src/examples/RestrictMapBounds.js → .../src/examples/Camera/RestrictMapBounds.js b/example/src/examples/RestrictMapBounds.js → .../src/examples/Camera/RestrictMapBounds.js
@@ -2,9 +2,9 @@ import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 import bboxPolygon from '@turf/bbox-polygon';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import Page from './common/Page';
+import Page from '../common/Page';
 
 const boundsStyle = {
   fillColor: 'rgba(255, 255, 255, 0.1)',
@@ -26,7 +26,7 @@ const RestrictMapBounds = (props) => (
       styleURL={MapboxGL.StyleURL.SatelliteStreet}>
       <MapboxGL.Camera
         maxBounds={bounds}
-        zoomLevel={15}
+        zoomLevel={7}
         centerCoordinate={[-4.744276, 50.361239]}
       />
       <MapboxGL.ShapeSource id="bounds" shape={polygon}>

diff --git a/example/src/examples/SetHeading.js → example/src/examples/Camera/SetHeading.js b/example/src/examples/SetHeading.js → example/src/examples/Camera/SetHeading.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import TabBarPage from './common/TabBarPage';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import TabBarPage from '../common/TabBarPage';
 
 class SetHeading extends React.Component {
   static propTypes = {

diff --git a/example/src/examples/SetPitch.js → example/src/examples/Camera/SetPitch.js b/example/src/examples/SetPitch.js → example/src/examples/Camera/SetPitch.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import TabBarPage from './common/TabBarPage';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import TabBarPage from '../common/TabBarPage';
 
 class SetPitch extends React.Component {
   static propTypes = {

diff --git a/example/src/examples/SetUserTrackingModes.js → ...c/examples/Camera/SetUserTrackingModes.js b/example/src/examples/SetUserTrackingModes.js → ...c/examples/Camera/SetUserTrackingModes.js
@@ -2,12 +2,12 @@ import React from 'react';
 import {Text} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import {onSortOptions} from '../utils';
+import sheet from '../../styles/sheet';
+import {onSortOptions} from '../../utils';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import TabBarPage from './common/TabBarPage';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import TabBarPage from '../common/TabBarPage';
+import Bubble from '../common/Bubble';
 
 const styles = {
   bubbleOne: {bottom: 80},

diff --git a/example/src/examples/TakeSnapshot.js → example/src/examples/Camera/TakeSnapshot.js b/example/src/examples/TakeSnapshot.js → example/src/examples/Camera/TakeSnapshot.js
@@ -9,8 +9,8 @@ import {
   ActivityIndicator,
 } from 'react-native';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 const styles = StyleSheet.create({
   container: {

diff --git a/example/src/examples/TakeSnapshotWithMap.js → ...rc/examples/Camera/TakeSnapshotWithMap.js b/example/src/examples/TakeSnapshotWithMap.js → ...rc/examples/Camera/TakeSnapshotWithMap.js
@@ -2,11 +2,11 @@ import React from 'react';
 import {StyleSheet, View, Text, TouchableOpacity, Image} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import colors from '../styles/colors';
+import sheet from '../../styles/sheet';
+import colors from '../../styles/colors';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 const styles = StyleSheet.create({
   button: {

diff --git a/example/src/examples/YoYo.js → example/src/examples/Camera/YoYo.js b/example/src/examples/YoYo.js → example/src/examples/Camera/YoYo.js
@@ -1,17 +1,14 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import colors from '../styles/colors';
-import {SF_OFFICE_COORDINATE} from '../utils';
+import sheet from '../../styles/sheet';
+import colors from '../../styles/colors';
+import {SF_OFFICE_COORDINATE} from '../../utils';
 
-import Page from './common/Page';
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
 
 const layerStyles = {
-  background: {
-    backgroundColor: colors.primary.blue,
-  },
   water: {
     fillColor: [
       'interpolate',
@@ -34,6 +31,8 @@ class YoYo extends React.Component {
     ...BaseExamplePropTypes,
   };
 
+  timeout = null;
+
   constructor(props) {
     super(props);
 
@@ -46,11 +45,15 @@ class YoYo extends React.Component {
     this.cameraLoop();
   }
 
+  componentWillUnmount() {
+    this.timeout && clearTimeout(this.timeout);
+  }
+
   cameraLoop() {
     requestAnimationFrame(async () => {
       const nextZoomLevel = this.state.zoomLevel === 12 ? 2 : 12;
       this.setState({zoomLevel: nextZoomLevel});
-      setTimeout(() => this.cameraLoop(), 2000);
+      this.timeout = setTimeout(() => this.cameraLoop(), 2000);
     });
   }
 
@@ -67,10 +70,6 @@ class YoYo extends React.Component {
           />
 
           <MapboxGL.VectorSource>
-            <MapboxGL.BackgroundLayer
-              id="background"
-              style={layerStyles.background}
-            />
             <MapboxGL.FillLayer id="water" style={layerStyles.water} />
           </MapboxGL.VectorSource>
         </MapboxGL.MapView>

diff --git a/...rc/examples/ChoroplethLayerByZoomLevel.js → ...RasterLayer/ChoroplethLayerByZoomLevel.js b/...rc/examples/ChoroplethLayerByZoomLevel.js → ...RasterLayer/ChoroplethLayerByZoomLevel.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 const styles = {
   statePopulation: {

diff --git a/example/src/examples/CustomVectorSource.js → ...les/FillRasterLayer/CustomVectorSource.js b/example/src/examples/CustomVectorSource.js → ...les/FillRasterLayer/CustomVectorSource.js
@@ -2,11 +2,11 @@ import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 import {Text} from 'react-native';
 
-import sheet from '../styles/sheet';
+import sheet from '../../styles/sheet';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const styles = {
   boxFill: {

diff --git a/example/src/examples/GeoJSONSource.js → ...examples/FillRasterLayer/GeoJSONSource.js b/example/src/examples/GeoJSONSource.js → ...examples/FillRasterLayer/GeoJSONSource.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import gridPattern from '../assets/grid_pattern.png';
-import smileyFaceGeoJSON from '../assets/smiley_face.json';
+import sheet from '../../styles/sheet';
+import gridPattern from '../../assets/grid_pattern.png';
+import smileyFaceGeoJSON from '../../assets/smiley_face.json';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 const layerStyles = {
   background: {

diff --git a/example/src/examples/ImageOverlay.js → .../examples/FillRasterLayer/ImageOverlay.js b/example/src/examples/ImageOverlay.js → .../examples/FillRasterLayer/ImageOverlay.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 import {Text} from 'react-native';
-import Bubble from './common/Bubble';
+import Bubble from '../common/Bubble';
 
-import sheet from '../styles/sheet';
-import radar0 from '../assets/radar.png';
-import radar1 from '../assets/radar1.png';
-import radar2 from '../assets/radar2.png';
+import sheet from '../../styles/sheet';
+import radar0 from '../../assets/radar.png';
+import radar1 from '../../assets/radar1.png';
+import radar2 from '../../assets/radar2.png';
 
-import Page from './common/Page';
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
 
 const styles = {
   rasterLayer: {rasterOpacity: 0.6},

diff --git a/example/src/examples/IndoorBuilding.js → ...xamples/FillRasterLayer/IndoorBuilding.js b/example/src/examples/IndoorBuilding.js → ...xamples/FillRasterLayer/IndoorBuilding.js
@@ -3,12 +3,12 @@ import {View, StyleSheet} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 import {Slider} from 'react-native-elements';
 
-import sheet from '../styles/sheet';
-import colors from '../styles/colors';
-import indoorMapGeoJSON from '../assets/indoor_3d_map.json';
+import sheet from '../../styles/sheet';
+import colors from '../../styles/colors';
+import indoorMapGeoJSON from '../../assets/indoor_3d_map.json';
 
-import Page from './common/Page';
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
 
 const styles = StyleSheet.create({
   slider: {

diff --git a/example/src/examples/QueryAtPoint.js → .../examples/FillRasterLayer/QueryAtPoint.js b/example/src/examples/QueryAtPoint.js → .../examples/FillRasterLayer/QueryAtPoint.js
@@ -2,12 +2,12 @@ import React from 'react';
 import {Text} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import nycJSON from '../assets/nyc_geojson.json';
+import sheet from '../../styles/sheet';
+import nycJSON from '../../assets/nyc_geojson.json';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const styles = {
   neighborhoods: {

diff --git a/example/src/examples/QueryWithRect.js → ...examples/FillRasterLayer/QueryWithRect.js b/example/src/examples/QueryWithRect.js → ...examples/FillRasterLayer/QueryWithRect.js
@@ -2,12 +2,12 @@ import React from 'react';
 import {Text} from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 
-import sheet from '../styles/sheet';
-import nycJSON from '../assets/nyc_geojson.json';
+import sheet from '../../styles/sheet';
+import nycJSON from '../../assets/nyc_geojson.json';
 
-import BaseExamplePropTypes from './common/BaseExamplePropTypes';
-import Page from './common/Page';
-import Bubble from './common/Bubble';
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+import Bubble from '../common/Bubble';
 
 const styles = {
   neighborhoods: {