@ingissa/navcore-react-native 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +3 -3
- package/README.md +135 -0
- package/package.json +46 -46
package/LICENSE
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
Copyright (c) 2026 Abdelnasser Aitabi. All rights reserved.
|
|
2
|
-
|
|
3
|
-
No license is granted except by separate written agreement.
|
|
1
|
+
Copyright (c) 2026 Abdelnasser Aitabi. All rights reserved.
|
|
2
|
+
|
|
3
|
+
No license is granted except by separate written agreement.
|
package/README.md
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# @ingissa/navcore-react-native
|
|
2
|
+
|
|
3
|
+
[Official Website](https://navcore-web.vercel.app/)
|
|
4
|
+
|
|
5
|
+
> React Native bindings and state selectors for the NavCore navigation engine.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@ingissa/navcore-react-native)
|
|
8
|
+
|
|
9
|
+
[](https://www.typescriptlang.org/)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Overview
|
|
14
|
+
|
|
15
|
+
`@ingissa/navcore-react-native` provides lightweight, tearing-free React bindings for NavCore. Built on React 18's `useSyncExternalStore`, components subscribe to granular slices of navigation state and only re-render when their specific slice changes.
|
|
16
|
+
|
|
17
|
+
### Key Features
|
|
18
|
+
- **Zero native binary modules**: Pure JavaScript/TypeScript layer that works seamlessly with Expo Go, Expo Prebuild, and bare React Native.
|
|
19
|
+
- **Granular selector hooks**: Prevent full-screen re-renders on high-frequency (1–10 Hz) GPS ticks.
|
|
20
|
+
- **Shared engine context**: Easily share a single `NavCore` engine instance across maps, HUD banners, speedometers, and debug overlays using `NavCoreProvider`.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @ingissa/navcore-react-native @ingissa/navcore-core
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Peer Dependencies
|
|
31
|
+
- `@ingissa/navcore-core`: `^1.0.9` (required)
|
|
32
|
+
- `react`: `>=18.0.0` (required)
|
|
33
|
+
- `react-native`: `>=0.72.0` (required)
|
|
34
|
+
- `react-native-maps`: `>=1.0.0` (optional, for applications using React Native Maps)
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Quickstart
|
|
39
|
+
|
|
40
|
+
### 1. Wrap your navigation screens in `NavCoreProvider`
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import React from 'react';
|
|
44
|
+
import { NavCoreProvider } from '@ingissa/navcore-react-native';
|
|
45
|
+
import { NavigationScreen } from './NavigationScreen';
|
|
46
|
+
|
|
47
|
+
export function App() {
|
|
48
|
+
return (
|
|
49
|
+
<NavCoreProvider options={{ isDev: true }}>
|
|
50
|
+
<NavigationScreen />
|
|
51
|
+
</NavCoreProvider>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 2. Consume granular state in child components
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import React from 'react';
|
|
60
|
+
import { View, Text } from 'react-native';
|
|
61
|
+
import {
|
|
62
|
+
useNavInstruction,
|
|
63
|
+
useNavProgress,
|
|
64
|
+
useNavSpeed,
|
|
65
|
+
useNavIsOffRoute,
|
|
66
|
+
} from '@ingissa/navcore-react-native';
|
|
67
|
+
|
|
68
|
+
export function NavigationHud() {
|
|
69
|
+
const instruction = useNavInstruction();
|
|
70
|
+
const { distanceToDestination, distanceToNextInstruction } = useNavProgress();
|
|
71
|
+
const speed = useNavSpeed();
|
|
72
|
+
const isOffRoute = useNavIsOffRoute();
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<View style={{ padding: 16, backgroundColor: '#111', borderRadius: 8 }}>
|
|
76
|
+
{isOffRoute && <Text style={{ color: 'red' }}>⚠️ Off Route - Recalculating</Text>}
|
|
77
|
+
<Text style={{ color: 'white', fontSize: 18 }}>
|
|
78
|
+
{instruction?.text ?? 'Continue on route'}
|
|
79
|
+
</Text>
|
|
80
|
+
<Text style={{ color: '#aaa' }}>
|
|
81
|
+
In {distanceToNextInstruction != null ? `${Math.round(distanceToNextInstruction)}m` : '—'}
|
|
82
|
+
</Text>
|
|
83
|
+
<Text style={{ color: '#aaa' }}>
|
|
84
|
+
Destination: {distanceToDestination != null ? `${(distanceToDestination / 1000).toFixed(1)}km` : '—'}
|
|
85
|
+
</Text>
|
|
86
|
+
<Text style={{ color: '#4ade80' }}>
|
|
87
|
+
Speed: {Math.round(speed * 3.6)} km/h
|
|
88
|
+
</Text>
|
|
89
|
+
</View>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 3. Custom Selective Re-renders with `useNavSelector`
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { useNavSelector } from '@ingissa/navcore-react-native';
|
|
98
|
+
|
|
99
|
+
// Only re-renders when alertState ('NONE' | 'DEVIATING' | 'RECALCULATING' | 'REJOINING' | 'REJOINED') changes
|
|
100
|
+
export function AlertBadge() {
|
|
101
|
+
const alertState = useNavSelector((state) => state.alertState);
|
|
102
|
+
if (alertState === 'NONE') return null;
|
|
103
|
+
|
|
104
|
+
return <Text>Status: {alertState}</Text>;
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Available Hooks
|
|
111
|
+
|
|
112
|
+
| Hook | Returns | Re-render Trigger |
|
|
113
|
+
|---|---|---|
|
|
114
|
+
| `useNavCoreContext()` | `{ engine: NavCore }` | Context mount |
|
|
115
|
+
| `useNavSelector(selector, customEngine?, isEqual?)` | Selected slice `T` | When `isEqual(prev, next)` returns `false` |
|
|
116
|
+
| `useNavInstruction(customEngine?)` | `NavInstruction \| null` | When upcoming turn text or geometryIndex changes |
|
|
117
|
+
| `useNavAlert(customEngine?)` | `NavCoreState['alertState']` | On deviation or rejoin state transition |
|
|
118
|
+
| `useNavProgress(customEngine?)` | `NavProgressInfo` | On progress index, arrival, or distance change |
|
|
119
|
+
| `useNavIsOffRoute(customEngine?)` | `boolean` | When off-route flag changes |
|
|
120
|
+
| `useNavSpeed(customEngine?)` | `number` (m/s) | On speed update |
|
|
121
|
+
| `useNavCore(props)` | `UseNavCoreReturn` | Complete hook managing full engine lifecycle |
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Documentation
|
|
126
|
+
|
|
127
|
+
- [React Native Integration Guide](../../docs/react-native.md)
|
|
128
|
+
- [API Reference](../../docs/api-reference/navcore-react-native.md)
|
|
129
|
+
- [Official Website](https://navcore-web.vercel.app/)
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Licensing
|
|
134
|
+
|
|
135
|
+
Proprietary software. Copyright (c) 2026 Abdelnasser Aitabi. All rights reserved. No license is granted except by separate written agreement.
|
package/package.json
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@ingissa/navcore-react-native",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "React Native bindings for the NavCore navigation engine.",
|
|
5
|
-
"author": "Ingissa <8abnav@gmail.com>",
|
|
6
|
-
"license": "SEE LICENSE IN LICENSE",
|
|
7
|
-
"homepage": "https://navcore-web.vercel.app/",
|
|
8
|
-
"main": "dist/index.js",
|
|
9
|
-
"module": "dist/index.mjs",
|
|
10
|
-
"types": "dist/index.d.ts",
|
|
11
|
-
"exports": {
|
|
12
|
-
".": {
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"import": "./dist/index.mjs",
|
|
15
|
-
"require": "./dist/index.js"
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
"files": [
|
|
19
|
-
"dist",
|
|
20
|
-
"LICENSE"
|
|
21
|
-
],
|
|
22
|
-
"sideEffects": false,
|
|
23
|
-
"publishConfig": {
|
|
24
|
-
"access": "public"
|
|
25
|
-
},
|
|
26
|
-
"engines": {
|
|
27
|
-
"node": ">=16"
|
|
28
|
-
},
|
|
29
|
-
"scripts": {
|
|
30
|
-
"build": "tsup",
|
|
31
|
-
"lint": "tsc --noEmit",
|
|
32
|
-
"prepublishOnly": "npm run build --prefix ../.. && node ../../scripts/check-release.mjs"
|
|
33
|
-
},
|
|
34
|
-
"peerDependencies": {
|
|
35
|
-
"@ingissa/navcore-core": "^1.0.
|
|
36
|
-
"react": ">=18.0.0",
|
|
37
|
-
"react-native": ">=0.72.0",
|
|
38
|
-
"react-native-maps": ">=1.0.0"
|
|
39
|
-
},
|
|
40
|
-
"peerDependenciesMeta": {
|
|
41
|
-
"react-native-maps": {
|
|
42
|
-
"optional": true
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
"dependencies": {}
|
|
46
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@ingissa/navcore-react-native",
|
|
3
|
+
"version": "1.0.10",
|
|
4
|
+
"description": "React Native bindings for the NavCore navigation engine.",
|
|
5
|
+
"author": "Ingissa <8abnav@gmail.com>",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
7
|
+
"homepage": "https://navcore-web.vercel.app/",
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"module": "dist/index.mjs",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.mjs",
|
|
15
|
+
"require": "./dist/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"LICENSE"
|
|
21
|
+
],
|
|
22
|
+
"sideEffects": false,
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"engines": {
|
|
27
|
+
"node": ">=16"
|
|
28
|
+
},
|
|
29
|
+
"scripts": {
|
|
30
|
+
"build": "tsup",
|
|
31
|
+
"lint": "tsc --noEmit",
|
|
32
|
+
"prepublishOnly": "npm run build --prefix ../.. && node ../../scripts/check-release.mjs"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@ingissa/navcore-core": "^1.0.10",
|
|
36
|
+
"react": ">=18.0.0",
|
|
37
|
+
"react-native": ">=0.72.0",
|
|
38
|
+
"react-native-maps": ">=1.0.0"
|
|
39
|
+
},
|
|
40
|
+
"peerDependenciesMeta": {
|
|
41
|
+
"react-native-maps": {
|
|
42
|
+
"optional": true
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"dependencies": {}
|
|
46
|
+
}
|