Skip to content

Instantly share code, notes, and snippets.

@teramuza
Last active November 14, 2020 10:10
Show Gist options
  • Save teramuza/d5f78230f4fc93b649b77d0f628d6bee to your computer and use it in GitHub Desktop.
Save teramuza/d5f78230f4fc93b649b77d0f628d6bee to your computer and use it in GitHub Desktop.
ScrollableScreenComponent. Create a scrollable screen using a FlatList component.
// 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>
);
};
// indexing components
import ScrollableScreen from './ScrollableScreen/ScrollableScreen.component';
// ... [more components]
export {
ScrollableScreen,
//... [more components]
}
//@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}
/>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment