Mapwize / mapwize-sdk-react-native

Integrate Mapwize Indoor Maps & Wayfinding in your React Native apps
MIT License
4 stars 0 forks source link

Map component not loaded #5

Closed rajahuda closed 3 years ago

rajahuda commented 3 years ago

I'm developing an app using SDK for React Native. I have followed every step for Android integration and Mapwize component still not loaded and there's no error appear in my log and console.

build.gradle: // Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript { ext { buildToolsVersion = "29.0.2" minSdkVersion = 21 compileSdkVersion = 29 targetSdkVersion = 29 } repositories { google() jcenter() } dependencies { classpath("com.android.tools.build:gradle:3.5.3")

    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

}

allprojects { repositories { mavenLocal() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url("$rootDir/../node_modules/react-native/android") } maven { // Android JSC is installed from npm url("$rootDir/../node_modules/jsc-android/dist") } maven { url 'https://www.jitpack.io' } maven { url 'https://maven.mapwize.io'} google() jcenter()

}

}

map.js: import React from 'react'; import { View, Text, StyleSheet, Button } from 'react-native'; import MapwizeMap, { MapwizeConfiguration, MapwizeViewRef } from 'mapwize-sdk-react-native';

export default class Search extends React.Component {

render() {
    const mapConfig = new MapwizeConfiguration('e4ad5096d0b5640404d28688094f8094');
    return (

        <View style={styles.container}>
            <Text>Map Test</Text>
            <MapwizeMap
                mapwizeConfiguration={mapConfig}
            // onMapLoaded={(mapwizeMap: MapwizeViewRef) => mapwizeMap.setFloor(3)} 
            />

        </View>
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 0, backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center', },

}); image

m3ftah commented 3 years ago

Hello, Can you tell me what version of React Native / React are you using. We have tested our sdk with these versions so far :

    "react": "16.11.0",
    "react-native": "0.62.2"

Also, can you try if the example app is working on your side?

rajahuda commented 3 years ago

I havent tried the example yet "react": "16.13.1", "react-native": "0.63.3"

m3ftah commented 3 years ago

I will give the new versions a try, then, I will come back to you.

m3ftah commented 3 years ago

I have tried the sdk with the new react and react-native versions :

"react": "16.13.1",
"react-native": "0.63.3"

The sdk is working fine, I think you should probably just add style={{flex: 1}} this way :

    <MapwizeMap
      style={{flex: 1}}
      mapwizeConfiguration={mapwizeConfiguration}
    />
rajahuda commented 3 years ago

Thanks, it's working now but i still need to add width value to style

m3ftah commented 3 years ago

You are welcome. You can manage the width/height the same way you would do for any other react native component:

style={{width: 200, height: 200}}