.babelrc

{
  "presets": ["react-native", "flow", "react-native-dotenv"],
  "plugins": [
    "react-hot-loader/babel",
    [
      "module-resolver",
      {
        "root": ["../../"],
        "alias": {
          "src": "./src"
        }
      }
    ]
  ],
  "sourceMaps": true,
  "retainLines": true,
  "env": {
    "production": {
      "plugins": [
        "transform-remove-console",
        [
          "babel-plugin-inline-import",
          {
            "extensions": [".json", ".svg"]
          }
        ]
      ]
    }
  }
}

App.js

// @flow

import React from "react";
import { AppRegistry, SectionList, View, Text } from "react-native";

const Section = () => (
  <View style={{ backgroundColor: "yellow", height: 30, width: 300 }}>
    <Text>Section New</Text>
  </View>
);

const Item = () => (
  <View style={{ backgroundColor: "blue", height: 30, width: 300 }}>
    <Text>Item new</Text>
  </View>
);

const sectionize = (adventures): Object[] => {
  return [
    { key: 1, data: _.slice(adventures, 0, 2), header: "5km" },
    { key: 2, data: _.slice(adventures, 2, 4), header: "10km" }
  ];
};

const dummyData = [
  {
    key: "abc",
    data: new Array(20).fill({})
  },
  {
    key: "def",
    data: new Array(20).fill({})
  },
  {
    key: "ghijkl",
    data: new Array(20).fill({})
  }
];
const AppWithState = () => (
  <View style={{ flex: 1 }}>
    <Item />
    <SectionList
      sections={dummyData}
      initialNumToRender={5}
      renderItem={() => <Item />}
      renderSectionHeader={() => <Section />}
    />
  </View>
);

AppRegistry.registerComponent("fatMapRN", () => AppWithState);