ScrollableScreenComponent. Create a scrollable screen using a FlatList component.

ExampleScreen.component.jsx

// How to use ScrollableScreen (Screen Component)

//@flow

import React from 'react';
import { View } from 'react-native';
import { Styles } from './Example.screen.style';
import { ScrollableScreen } from '../Components';

type ScreenProps = {}

export default (props: ScreenProps) => {

  const renderHeader = () => {
    return (
      <View />
    );
  };
  
  const renderContent = () => {
    return (
      <View />
    );
  };
  
  const renderFooter = () => {
    return (
      <View />
    )
  }

  const renderData = [
    renderHeader,
    renderContent,
    renderFooter
  ];

  return (
    <View style={Styles.container}>
      <ScrollableScreen components={renderData} />
    </View>
  );
};

index.js

// indexing components

import ScrollableScreen from './ScrollableScreen/ScrollableScreen.component';
// ... [more components]

export {
  ScrollableScreen,
  //... [more components]
}

ScrollableScreen.component.jsx

//@flow

import React from 'react';
import { FlatList } from 'react-native';

type Props = {
  components: Array<Function>,
  showsScrollIndicator?: boolean
}

const keyExtractor = (_, index: number) => index.toString();

const renderScreen = ({ item }) => item();

export default ({ components, showsScrollIndicator = false }: Props) => (
  <FlatList
    data={components}
    renderItem={renderScreen}
    keyExtractor={keyExtractor}
    showsVerticalScrollIndicator={showsScrollIndicator}
  />
);