chore: remove react native elements from examples

javascript/types/png.d.ts

@@ -1 +1,4 @@
-declare module "*.png";
+declare module "*.png" {
+  const content: number;
+  export default content;
+}

packages/examples/package.json

@@ -14,37 +14,31 @@
     "@mapbox/geo-viewport": "^0.5.0",
     "@maplibre/maplibre-react-native": "workspace:*",
     "@react-native-masked-view/masked-view": "^0.3.1",
-    "@react-navigation/native": "^6.1.8",
-    "@react-navigation/stack": "^6.3.25",
-    "@rneui/base": "^4.0.0-rc.8",
-    "@rneui/themed": "^4.0.0-rc.8",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/stack": "^6.4.1",
     "@turf/along": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
     "@turf/distance": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/length": "^6.5.0",
-    "@turf/nearest-point-on-line": "6.5.0",
-    "@types/geojson": "7946.0.14",
+    "@turf/nearest-point-on-line": "^6.5.0",
     "debounce": "^2.0.0",
     "fbjs": "^3.0.5",
     "moment": "^2.30.1",
     "react": "18.2.0",
     "react-native": "0.74.6",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
-    "react-native-vector-icons": "10.0.0"
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-safe-area-context": "^4.11.1",
+    "react-native-screens": "^3.34.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/plugin-transform-private-methods": "^7.25.4",
     "@babel/preset-typescript": "7.22.5",
     "@babel/runtime": "^7.23.1",
     "@react-native/metro-config": "^0.75.2",
+    "@types/geojson": "7946.0.14",
     "@types/react": "^18.2.61",
-    "@types/react-native": "^0.72.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "detox": "^20.17.0",
     "glob-to-regexp": "^0.4.0",

packages/examples/src/assets/index.d.ts

@@ -7,8 +7,3 @@ declare module "*.png" {
   const content: number;
   export default content;
 }
-
-declare module "*.json" {
-  const content: string;
-  export default content;
-}

packages/examples/src/components/ButtonGroup.tsx

@@ -0,0 +1,95 @@
+import React, { Fragment } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import colors from "../styles/colors";
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    borderTopWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: colors.grey,
+  },
+
+  touchable: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  touchableActive: {
+    backgroundColor: colors.blue,
+  },
+  touchableText: {
+    textAlign: "center",
+    fontWeight: "bold",
+  },
+  touchableTextActive: {
+    color: "#ffffff",
+  },
+
+  divider: {
+    width: 2,
+    backgroundColor: "#dedede",
+  },
+});
+
+type ButtonGroupProps = {
+  value?: number;
+  options: string[];
+  onPress: (index: number) => void;
+  disabled?: boolean;
+  scrollable?: boolean;
+};
+
+export function ButtonGroup({
+  value,
+  options,
+  onPress,
+  disabled,
+  scrollable,
+}: ButtonGroupProps) {
+  const buttonGroup = (
+    <View style={styles.root}>
+      {options.map((option, index) => (
+        <Fragment key={option}>
+          {index > 0 && <View style={styles.divider} />}
+          <TouchableOpacity
+            style={[
+              styles.touchable,
+              value === index && styles.touchableActive,
+            ]}
+            onPress={() => {
+              onPress(index);
+            }}
+            disabled={disabled}
+          >
+            <Text
+              style={[
+                styles.touchableText,
+                value === index && styles.touchableTextActive,
+              ]}
+            >
+              {option}
+            </Text>
+          </TouchableOpacity>
+        </Fragment>
+      ))}
+    </View>
+  );
+
+  return scrollable ? (
+    <ScrollView horizontal style={{ flexGrow: 0 }}>
+      {buttonGroup}
+    </ScrollView>
+  ) : (
+    buttonGroup
+  );
+}

packages/examples/src/examples/Camera/Fit.js

@@ -1,8 +1,7 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
 import { isEqual } from "lodash";
 import React from "react";
-import { View, Text } from "react-native";
-import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
+import { ScrollView, TouchableOpacity, View, Text } from "react-native";
 
 import sheet from "../../styles/sheet";
 import Page from "../common/Page";

packages/examples/src/examples/Camera/SetUserTrackingModes.js

@@ -87,7 +87,7 @@ class SetUserTrackingModes extends React.Component {
       <TabBarPage
         {...this.props}
         scrollable
-        initialIndex={3}
+        defaultValue={3}
         options={this._trackingOptions}
         onOptionPress={this.onTrackingChange}
       >

packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx

@@ -0,0 +1,56 @@
+import MapLibreGL from "@maplibre/maplibre-react-native";
+import React, { useState } from "react";
+
+import { FillExtrusionLayerStyle } from "../../../../../javascript";
+import indoorMapGeoJSON from "../../assets/indoor_3d_map.json";
+import sheet from "../../styles/sheet";
+import TabBarPage from "../common/TabBarPage";
+
+const OPTIONS = [-180, -90, 0, 90, 180];
+
+const layerStyles: { building: FillExtrusionLayerStyle } = {
+  building: {
+    fillExtrusionOpacity: 0.5,
+    fillExtrusionHeight: ["get", "height"],
+    fillExtrusionBase: ["get", "base_height"],
+    fillExtrusionColor: ["get", "color"],
+    fillExtrusionColorTransition: { duration: 2000, delay: 0 },
+  },
+};
+
+export default function IndoorBuilding() {
+  const [value, setValue] = useState(-90);
+
+  return (
+    <TabBarPage
+      defaultValue={1}
+      options={OPTIONS.map((option) => ({
+        label: option.toString(),
+        data: option,
+      }))}
+      onOptionPress={(index, data) => setValue(data)}
+    >
+      <MapLibreGL.MapView style={sheet.matchParent}>
+        <MapLibreGL.Camera
+          zoomLevel={16}
+          pitch={40}
+          heading={20}
+          centerCoordinate={[-87.61694, 41.86625]}
+        />
+
+        <MapLibreGL.Light id="light" style={{ position: [5, 90, value] }} />
+
+        <MapLibreGL.ShapeSource
+          id="indoorBuildingSource"
+          // @ts-ignore
+          shape={indoorMapGeoJSON}
+        >
+          <MapLibreGL.FillExtrusionLayer
+            id="building3d"
+            style={layerStyles.building}
+          />
+        </MapLibreGL.ShapeSource>
+      </MapLibreGL.MapView>
+    </TabBarPage>
+  );
+}