Ufdjrw

I have set custom style url in map initialization. Like :

<Mapbox.MapView
 styleURL="asset://mystyle.json"
 logoEnabled=false
 attributionEnabled=false
 ref=(e) => this.oMap = e 
 animate=true
 zoomLevel=6
 centerCoordinate=[54.0, 24.0]
 style= flex: 1 
 showUserLocation=true>
</Mapbox.MapView>

In mystyle.json I have two base map as below :

 
 "id": "Satellite",
 "type": "raster",
 "source": "Satellite",
 "layout": 
 "visibility": "visible"
 ,
 "paint": 
 "raster-opacity": 1
 
 ,
 
 "id": "Satellite2",
 "type": "raster",
 "source": "Satellite",
 "layout": 
 "visibility": "none"
 ,
 "paint": 
 "raster-opacity": 1
 
 

Satellite is visible default.

How to set visibility of satellite property to none and satellite2 visibility to visible at run time?

Mapbox gl :

"@mapbox/react-native-mapbox-gl": "^6.1.3"

React native :

"react-native": "0.58.6",

let say we have one state isStateliteVisible:false,

now change this state to true when you want to visibility

and use mapbox like this,

<Mapbox.MapView
 styleURL=this.state.isStateliteVisible?...visiblityStyle:....noneStyle // use this as per your case
 logoEnabled=false
 attributionEnabled=false
 ref=(e) => this.oMap = e 
 animate=true
 zoomLevel=6
 centerCoordinate=[54.0, 24.0]
 style= flex: 1 
 showUserLocation=true>
</Mapbox.MapView>

I can see that you are using a older depreciated version of mapbox-gl.
This package is deprecated please use this instead.

Installation

Dependencies

node
npm
React Native recommended version 0.50 or greater

Git

git clone git@github.com:mapbox/react-native-mapbox-gl.git
cd react-native-mapbox-gl

Yarn

yarn add @mapbox/react-native-mapbox-gl

Npm

npm install @mapbox/react-native-mapbox-gl --save

You're good to go!

Finally I got solution :

constructor() 
 this.state = 
 lightMap: 'visible', 
 darkMap: 'none'
 ;
 

changeMap()
 this.setState(darkMap:'visible')


<MapboxGL.MapView
 styleURL="asset://mystyle.json"
 logoEnabled=false
 attributionEnabled=false
 ref=(e) => this.oMap = e 
 zoomLevel=6
 centerCoordinate=[54.0, 24.0]
 style= flex: 1 >

<MapboxGL.RasterSource
 id="idLightMap" 
 url="LAYERURL1"
 tileSize=256>
 <MapboxGL.RasterLayer 
 id="idLightMap"
 sourceID="idLightMap"
 style=visibility: this.state.lightMap>
 </MapboxGL.RasterLayer>
</MapboxGL.RasterSource>

<MapboxGL.RasterSource
 id="idDarkMap" 
 url="LAYERURL2"
 tileSize=256>
 <MapboxGL.RasterLayer
 id="idDarkMap"
 sourceID="idDarkMap"
 style=visibility: this.state.darkMap>
 </MapboxGL.RasterLayer>
</MapboxGL.RasterSource>

</MapboxGL.MapView>

I have added raster layer and programmatic toggling it.