Comments (6)
hussainahmad
commented on June 3, 2024
For Reference
SVID_20201230_151644_1.1.mp4
from hms-react-native-plugin.
utarit
commented on June 3, 2024
Hi,
Can you send me your code where you use tab navigation with map and your package.json file for further investigation?
from hms-react-native-plugin.
hussainahmad
commented on June 3, 2024
Hi @utarit
Package.Json
"dependencies": {
"@hmscore/react-native-hms-map": "^5.0.3-302-01",
"@hmscore/react-native-hms-push": "^5.0.2-301",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-community/cookies": "^5.0.1",
"@react-native-community/datetimepicker": "^3.0.8",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.9.9",
"@react-navigation/material-bottom-tabs": "^5.3.10",
"@react-navigation/material-top-tabs": "^5.3.10",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"accordion-collapse-react-native": "^0.4.0",
"i18next": "^19.8.2",
"moment": "^2.29.1",
"moment-timezone": "^0.5.31",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-fast-compare": "^3.2.0",
"react-native": "^0.63.4",
"react-native-bootsplash": "^3.1.2",
"react-native-flash-message": "^0.1.17",
"react-native-gesture-handler": "^1.9.0",
"react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-localize": "^2.0.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-menu": "^1.2.0",
"react-native-modal-datetime-picker": "^9.1.0",
"react-native-modals": "^0.19.10",
"react-native-paper": "^4.5.0",
"react-native-reanimated": "^1.13.2",
"react-native-restart": "0.0.19",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-share": "^4.1.0",
"react-native-tab-view": "^2.15.2",
"react-native-timeago": "^0.5.0",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^11.0.2",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
And For Map:
<HMSMap
ref={ref => this.map = ref}
style={{width:Layout.window.width, height:Layout.window.height}}
camera={this.state.camera}
compassEnabled={true}
zoomControlsEnabled={true}
mapType={MapTypes.NORMAL}
mapStyle={
'[{"mapFeature":"all","options":"labels.icon","paint":{"icon-type":"night"}}]'
}
myLocationEnabled={true}
myLocationButtonEnabled={true}
markerClustering={true}
>
{this.state.markers.length>0 && this
.state
.markers
.map((marker, index) => {
let title = this.props.label?marker.title:null
return <HMSMarker
key={index}
clusterable={true}
ref={ref => { this.marker = ref; }}
coordinate={marker.latlng}
onClick={()=>this.goToDetailScreen(marker.item)}
markerAnchor={[ 0.5, 0.5 ]}
infoWindowAnchor ={[ 0.5, 0.5 ]}
title={title}
rotation={marker.heading}
/>
})}
</HMSMap>
from hms-react-native-plugin.
utarit
commented on June 3, 2024
Hi,
I am able to see the map with bottom navigation by using adding this style prop to map
Can you try this and inform me if it worked? If it doesnt work can you share your navigation codes that you navigate to/from map so i can try your codes and find out the source of the problem.
from hms-react-native-plugin.
hussainahmad
commented on June 3, 2024
Hi , Sorry for the late response. I tried with above workaround it is not working , My navigation code is
const MonitorStack = createStackNavigator();
const MonitorStckScreen = () => (
<MonitorStack.Navigator>
<MonitorStack.Screen
name="MapScreen"
component={MapScreen}
/>
</MonitorStack.Navigator>
)
const SettingStack = createStackNavigator();
const SettingStackScreen = ()=>(
<SettingStack.Navigator screenOptions={{
headerShown: false
}}>
<SettingStack.Screen name={'Setting Screen'} component={SettingScreen}/>
<SettingStack.Screen name = {'FeedBack'} component={FeedBackScreen}/>
<SettingStack.Screen name={'User Manual'} component={UserManual}/>
</SettingStack.Navigator>
)
const BottomTab = createMaterialBottomTabNavigator();
const BottomTabScreen = () => (
<BottomTab.Navigator
barStyle={{
backgroundColor: Theme.primary
}}
backBehavior={'initialRoute'}
initialRouteName={'Unit Stack'}
labeled={false}>
<BottomTab.Screen
name={'Map creen'}
component={MonitorStckScreen}/>
<BottomTab.Screen
name={"Setting Screen"}
component={SettingStackScreen}
/>
</BottomTab.Navigator>
);
from hms-react-native-plugin.
utarit
commented on June 3, 2024
Hi, We have tried your code and simulate your environment as far as I can. We used the code below
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import HMSMap, {MapTypes} from '@hmscore/react-native-hms-map';
import {createStackNavigator} from '@react-navigation/stack';
function SettingsScreen() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Settings!</Text>
</View>
);
}
function HomeScreen() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<HMSMap
style={{
...StyleSheet.absoluteFillObject,
height: '100%',
}}
compassEnabled={true}
zoomControlsEnabled={true}
mapType={MapTypes.NORMAL}
mapStyle={
'[{"mapFeature":"all","options":"labels.icon","paint":{"icon-type":"night"}}]'
}
myLocationEnabled={true}
myLocationButtonEnabled={true}
markerClustering={true}
/>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<BottomTabScreen />
</NavigationContainer>
);
}
const MonitorStack = createStackNavigator();
const MonitorStckScreen = () => (
<MonitorStack.Navigator>
<MonitorStack.Screen name="MapScreen" component={HomeScreen} />
</MonitorStack.Navigator>
);
const SettingStack = createStackNavigator();
const SettingStackScreen = () => (
<SettingStack.Navigator
screenOptions={{
headerShown: false,
}}>
<SettingStack.Screen name={'Setting Screen'} component={SettingsScreen} />
</SettingStack.Navigator>
);
const BottomTab = createMaterialBottomTabNavigator();
const BottomTabScreen = () => (
<BottomTab.Navigator
backBehavior={'initialRoute'}
initialRouteName={'Unit Stack'}
labeled={false}>
<BottomTab.Screen name={'Map creen'} component={MonitorStckScreen} />
<BottomTab.Screen name={'Setting Screen'} component={SettingStackScreen} />
</BottomTab.Navigator>
);with these dependencies:
"dependencies": {
"@hmscore/react-native-hms-map": "^5.0.3-302-01",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/material-bottom-tabs": "^5.3.10",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-paper": "^4.5.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.16.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "16.13.1"
},
We couldn't achieve to reproduce same error. You can see the result video.
If you can send the all project, We can check the configuration files and other differences and spot the problem.
from hms-react-native-plugin.
Related Issues (20)
- [@hmscore/react-native-hms-push] Can't access notification data, when user tap notification HOT 4
- [react-native-hms-push] build fails with new react-native version HOT 3
- [react-native-hms-push] HmsPushInstanceId.getToken error HOT 2
- Hitting error TS1110 when importing @hmscore/react-native-hms-analytics
- gradle-wrapper.jar! where is gradle-wrapper.jar ?? HOT 1
- Ads kit: VAST player needs permission on Android 31 HOT 2
- HMS map can not work inside ScrollView HOT 1
- Can the latest tag be created for the current open source repository? HOT 1
- fails to build Android with React Native 0.72.0 HOT 9
- Unhelpful Typescript type definitions HOT 1
- MapInitializer is not initialized HOT 5
- Android build error v0.72.6 [HMS-PUSH] HOT 7
- Map not showing in React Native Expo HOT 2
- HMSMap Not Displaying on Device HOT 2
- Cannot use @TaskAction annotation on method IncrementalTransformTask.transform()
- HMS push not working in expo HOT 1
- HMSReward.adRewardedListenerAdd is not functioning properly
- AGC Check Fail on HMS Location
- HMS-Account Integration Error on React Native 0.73.1
- -
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hms-react-native-plugin.