{"action":"opened","issue":{"url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/40","labels_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/40/comments","events_url":"https://api.github.com/repos/lelandrichardson/react-native-maps/issues/40/events","html_url":"https://github.com/lelandrichardson/react-native-maps/issues/40","id":128424632,"number":40,"title":"Create a `FeatureCollection` component that encourages composition","user":{"login":"lelandrichardson","id":1885623,"avatar_url":"https://avatars.githubusercontent.com/u/1885623?v=3","gravatar_id":"","url":"https://api.github.com/users/lelandrichardson","html_url":"https://github.com/lelandrichardson","followers_url":"https://api.github.com/users/lelandrichardson/followers","following_url":"https://api.github.com/users/lelandrichardson/following{/other_user}","gists_url":"https://api.github.com/users/lelandrichardson/gists{/gist_id}","starred_url":"https://api.github.com/users/lelandrichardson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lelandrichardson/subscriptions","organizations_url":"https://api.github.com/users/lelandrichardson/orgs","repos_url":"https://api.github.com/users/lelandrichardson/repos","events_url":"https://api.github.com/users/lelandrichardson/events{/privacy}","received_events_url":"https://api.github.com/users/lelandrichardson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-01-24T20:57:31Z","updated_at":"2016-01-24T20:57:31Z","closed_at":null,"body":"The API of this library, which works by having the children of the `<MapView />` component does a great job making maps and map features more \"React-like\", but it could go a bit further.\r\n\r\nRight now, it is possible to make composable react components that end up rendering a single feature (like marker), and passing them as children to the map view\r\n\r\n```jsx\r\nconst FooMarker = ({ foo }) => (\r\n  <MapView.Marker coordinate={foo.coordinate}>\r\n    <View styles={styles.fooContainer}>\r\n      {...}\r\n    </View>\r\n  </MapView.Marker>\r\n);\r\n\r\nconst MapScene = ({ foo }) => (\r\n  <MapView {...}>\r\n    <FooMarker foo={foo} />\r\n  </MapView>\r\n);\r\n```\r\n\r\n\r\nHowever, as soon as we want to render more than one feature and compose, it wont work...  because react requires every component to return a single node, and thus you would need to \"wrap\" the features in something, but still end up adding them to the mapview as direct children.\r\n\r\nThe API I'm envisioning could go something like this:\r\n\r\n\r\n```jsx\r\nconst Foo = ({ foo }) => (\r\n  <MapView.FeatureCollection>\r\n    {/* render a custom marker for the `foo` */}\r\n    <MapView.Marker coordinate={foo.coordinate}>\r\n      <View styles={styles.fooContainer}>\r\n        {...}\r\n      </View>\r\n    </MapView.Marker>\r\n    {/* also render a circle under the marker based on foo's properties */}\r\n    <MapView.Circle \r\n      center={foo.coordinate}\r\n      radius={foo.reach}\r\n      fillColor={fooColorFromType(foo.type)}\r\n    />\r\n  </MapView.FeatureCollection>\r\n);\r\n\r\nconst MapScene = ({ foo }) => (\r\n  <MapView {...}>\r\n    <Foo foo={foo} />\r\n  </MapView>\r\n);\r\n```\r\n\r\nThis could allow for limitless composition of map features, and much better separation of concerns\r\n\r\nThis might require some acrobatics on the native side, but I think it would be worth it."}}