react-native-mapbox-gl/example/src/components/IndoorBuilding.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapboxGL from 'react-native-mapbox-gl';
import { Slider } from 'react-native-elements';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';

import sheet from '../styles/sheet';
import colors from '../styles/colors';
import indoorMapGeoJSON from '../assets/indoor_3d_map.json';

const styles = StyleSheet.create({
  slider: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    maxHeight: 60,
    paddingHorizontal: 24,
  }
});

const layerStyles = MapboxGL.StyleSheet.create({
  light: {

  },
  building: {
    fillExtrusionOpacity: 0.5,
    fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
    fillExtrusionBase: MapboxGL.StyleSheet.identity('base_height'),
    fillExtrusionColor: MapboxGL.StyleSheet.identity('color'),
    fillExtrusionColorTransition: { duration: 2000, delay: 0 },
  },
});

class IndoorBuilding extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  constructor (props) {
    super(props);

    this.state = {
      sliderValue: -80,
    };

    this.onSliderChange = this.onSliderChange.bind(this);
  }

  onSliderChange (value) {
    this.setState({ sliderValue: value });
  }

  render () {
    return (
      <Page {...this.props}>
        <MapboxGL.MapView
            zoomLevel={16}
            pitch={40}
            heading={20}
            centerCoordinate={[-87.61694, 41.86625]}
            ref={(ref) => this.map = ref}
            style={sheet.matchParent}>

            <MapboxGL.Light style={{ position: [5, 90, this.state.sliderValue] }} />

            <MapboxGL.ShapeSource id='indoorBuildingSource' shape={indoorMapGeoJSON}>
              <MapboxGL.FillExtrusionLayer
                id='building3d'
                style={layerStyles.building} />
            </MapboxGL.ShapeSource>

        </MapboxGL.MapView>

        <View style={styles.slider}>
          <Slider
            value={this.state.sliderValue}
            onValueChange={this.onSliderChange}
            thumbTintColor={colors.primary.blue}
            minimumValue={-180}
            maximumValue={180}
            thumbTouchSize={{ width: 44, height: 44 }}
            maximumTrackTintColor={colors.secondary.purpleLight}
            minimumTrackTintColor={colors.secondary.purpleDark} />
        </View>
      </Page>
    );
  }
}

export default IndoorBuilding;