[iOS] Cannot create property 'create' of undefined (MapboxGL.StyleSheet.create)

[HPieters]

Describe the bug
I am trying to create a simple map with custom styling on FillLayer, however I am unable to declare styling. Trying MapboxGL.StyleSheet.create results in Cannot create property 'create' of undefined. Only tested on iOS so far. On actual device the error is undefined is not an object (evaluating _maps.default.StyleSheet.create).

To Reproduce

1. Create a new react native app
2. Install @react-native-mapbox/maps
3. Replace App.js into the following code

import React, { Component } from "react";
import { StyleSheet, View, Dimensions } from "react-native";
import MapboxGL from "@react-native-mapbox/maps";

const { height: screenHeight, width: screenWidth } = Dimensions.get("window");

MapboxGL.setAccessToken("<your token>");

const mapStyle = MapboxGL.StyleSheet.create({
  buildings: {
    fillColor: "blue"
  },
  street: {
    lineColor: "green"
  }
});

export default class App extends Component {
  render() {
    const height = screenHeight;
    const width = screenWidth;

    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          style={{ height, width }}
          onDidFailLoadingMap={error => {
            console.log(error);
          }}
          zoomLevel={17}
          zoomEnabled
        >
          <MapboxGL.Camera followZoomLevel={12} />
          <MapboxGL.FillLayer style={mapStyle.buildings} />
        </MapboxGL.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

Expected behavior
A map is rendered with the styles applied to the fill layer.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• Platfrom: iOS
• Device: Simulator
• OS: iOS 12.2
• SDK Version: Latest
• React Native Version: 0.59.8

Additional context
Without MapboxGL.StyleSheet.create the example above works.

[HPieters]

I might have created this issue to soon as I see that MapboxGL.StyleSheet.create has been removed? If I check #4 it seems I can just use objects?

[mfazekas]

@HPieters yes thanks for the issue i hope i've clarified it in migrations notes in changelog

[HPieters]

@mfazekas Thanks! Perhaps a bit offtopic but how to I rewrite

iconOpacity: MapboxGL.StyleSheet.source([[0, 0.5], [1, 1]], 'active', MapboxGL.InterpolationMode.Categorical),
iconSize: MapboxGL.StyleSheet.source([[0, 0], [1, 1]], 'iconSize', MapboxGL.InterpolationMode.linear),

[HPieters]

And maybe we should remove / update https://github.com/react-native-mapbox/maps/blob/3bbd813020f935ec3cb36f6348e13082a3ac6422/docs/StyleSheet.md

[mfazekas]

Something like this might work (not tested), let me know if works so we can add to docs as samples

iconOpacity: [
    'step',
    ['get', 'active'],
    0.5,
    1, 1.0,
],
iconSize: [
   'interpolate',
   ['linear'],
   ['get','iconSize'],
   0, 0,
   1, 1,
],

see also https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-interpolate and https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step

[HPieters]

Seems to work great, thanks once again!