NavigationView doesn't show all instructions and crash in React Native #3050
Comments
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
Hey @andfs thanks for reaching out and report your issue. Would you mind re-testing / confirming if OP is still an issue in |
|
@Guardiola31337 thanks for answering :) I'll try at the weekend and give you a feedbadk |
|
Hey @andfs I have this exact same issue with react native and I figured out a solution (although I wish it were more ideal). I am using the SDK version Originally I had to do what you were doing on init with programmatically showing the UI buttons like this - retrieveFeedbackButton().show();
retrieveSoundButton().show();I was able to get rid of that code after discovering that if you modify the height of a sibling component of import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapboxNavigation from 'react-native-mapbox-navigation';
export const SomeComponent = () => {
const [uiHeight, setUiHeight] = React.useState(123);
React.useEffect(() => {
setTimeout(() => {
setUiHeight(124);
});
}, []);
return (
<View style={styles.flexIt}>
<MapboxNavigation
origin={[-97.760288, 30.273566]}
destination={[-97.918842, 30.494466]}
shouldSimulateRoute={true}
onProgressChange={event => {}}
onNavigationStart={() => {
setTimeout(() => {
setUiHeight(125);
}, 7000);
}}
style={styles.flexIt}
/>
<View
style={{
height: uiHeight,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ fontSize: 26 }}>Some UI Here</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
flexIt: {
flex: 1,
},
});I added an I have written this wrapper for android in kotlin and I think we will be open sourcing it. I will post back here if we do and also if I can find a better solution. I'm sure that if you modify the height of the |
|
Ok here is a "better" solution that doesn't rely on the import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapboxNavigation from 'react-native-mapbox-navigation';
import { useInterval } from '../../hooks/useInterval'; // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
export const SomeComponent = () => {
const [footerUiHeight, setFooterUiHeight] = React.useState(123);
if (Platform.OS === 'android') {
useInterval(() => {
setFooterUiHeight(footerUiHeight === 123 ? 123.1 : 123);
}, 1000);
}
return (
<View style={styles.flexIt}>
<MapboxNavigation
origin={[-97.760288, 30.273566]}
destination={[-97.918842, 30.494466]}
shouldSimulateRoute={true}
onProgressChange={event => {}}
onError={event => {}}
style={styles.flexIt}
/>
<View
style={{
height: footerUiHeight,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ fontSize: 26 }}>Some UI Here</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
flexIt: {
flex: 1,
},
});Basically you can see here that I adjust the height of the sibling |
|
\o/ |
|
I think this stems from this root cause - facebook/react-native#17968 I tried some of those solutions mentioned inn the thread but without success. |
|
@rossmartin I tried yesterday but my project is outdated to use the 1.1.2 version of mapbox navigation. I'll have to change somethings to update it. But doing what you said, my project didn't crash \o/ I wasn't able to show the instructions view, but now I can continue to work in this. |
|
Hey @andfs we open sourced the wrapper that we made for react native. You can get it on npm and view it here on github - https://github.com/homeeondemand/react-native-mapbox-navigation |
|
For anyone that comes to this thread for this react native issue - here is how I solved the rendering issue with android on the native side: homeeondemand/react-native-mapbox-navigation@4fceba3 |
|
@rossmartin what great news man \o/ I`ll try it in next weekend |
|
Thanks for using the Mapbox Navigation SDK for Android and being a valued customer. Mapbox will be soon deprecating any support for We plan to launch this new drop-in UI component as a Developer Preview feature in April, as part of the If you’re interested in having early access to the upcoming drop-in UI for /cc @zugaldia @AhmerKhan1 |
I'm trying to build a navigation component to use in a React Native project. In this project, I need to show the navigation inside a View, so I can't use the NavigationLauncher because it wraps the navigation on the entire screen. I've been trying to create a View that extends the Mapbox's NavigationView and it almost worked well. The problem is that the text in summaryView does not appear. But if I change the orientation of the phone (and only if I change it) it appears. If I click in the instructionsView the app crashes. I'm using the last stable version on Navigation SDK 0.42.6.
Here is the code with some comments:
https://gist.github.com/andfs/dc833e70b6d9cfcb1fd3b85865c704c0
Here is a gif that shows the problem. As you can see the time remaining text doesn't appear:
When the app crashes, Android Studio show me this error:
The text was updated successfully, but these errors were encountered: