UNPKG

create-expo-cljs-app

Version:

Create a react native application with Expo and Shadow-CLJS!

318 lines (305 loc) 11.8 kB
/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @flow * @format */ import type { ViewProps } from '../../../exports/View'; import type { ViewabilityConfig, ViewToken, ViewabilityConfigCallbackPair } from '../ViewabilityHelper'; import deepDiffer from '../deepDiffer'; import * as React from 'react'; import StyleSheet from '../../../exports/StyleSheet'; import View from '../../../exports/View'; import ScrollView from '../../../exports/ScrollView'; import VirtualizedList, { type RenderItemType } from '../VirtualizedList'; type ViewStyleProp = $PropertyType<ViewProps, 'style'>; import invariant from 'fbjs/lib/invariant'; type RequiredProps<ItemT> = {| /** * For simplicity, data is just a plain array. If you want to use something else, like an * immutable list, use the underlying `VirtualizedList` directly. */ data: ?$ReadOnlyArray<ItemT> |}; type OptionalProps<ItemT> = {| /** * Takes an item from `data` and renders it into the list. Example usage: * * <FlatList * ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => ( * <View style={[style.separator, highlighted && {marginLeft: 0}]} /> * )} * data={[{title: 'Title Text', key: 'item1'}]} * renderItem={({item, separators}) => ( * <TouchableHighlight * onPress={() => this._onPress(item)} * onShowUnderlay={separators.highlight} * onHideUnderlay={separators.unhighlight}> * <View style={{backgroundColor: 'white'}}> * <Text>{item.title}</Text> * </View> * </TouchableHighlight> * )} * /> * * Provides additional metadata like `index` if you need it, as well as a more generic * `separators.updateProps` function which let's you set whatever props you want to change the * rendering of either the leading separator or trailing separator in case the more common * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for * your use-case. */ renderItem?: ?RenderItemType<ItemT>, /** * Optional custom style for multi-item rows generated when numColumns > 1. */ columnWrapperStyle?: ViewStyleProp, /** * A marker property for telling the list to re-render (since it implements `PureComponent`). If * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the * `data` prop, stick it here and treat it immutably. */ extraData?: any, /** * `getItemLayout` is an optional optimizations that let us skip measurement of dynamic content if * you know the height of items a priori. `getItemLayout` is the most efficient, and is easy to * use if you have fixed height items, for example: * * getItemLayout={(data, index) => ( * {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} * )} * * Adding `getItemLayout` can be a great performance boost for lists of several hundred items. * Remember to include separator length (height or width) in your offset calculation if you * specify `ItemSeparatorComponent`. */ getItemLayout?: (data: ?Array<ItemT>, index: number) => { length: number, offset: number, index: number, ... }, /** * If true, renders items next to each other horizontally instead of stacked vertically. */ horizontal?: ?boolean, /** * How many items to render in the initial batch. This should be enough to fill the screen but not * much more. Note these items will never be unmounted as part of the windowed rendering in order * to improve perceived performance of scroll-to-top actions. */ initialNumToRender: number, /** * Instead of starting at the top with the first item, start at `initialScrollIndex`. This * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items * always rendered and immediately renders the items starting at this initial index. Requires * `getItemLayout` to be implemented. */ initialScrollIndex?: ?number, /** * Reverses the direction of scroll. Uses scale transforms of -1. */ inverted?: ?boolean, /** * Used to extract a unique key for a given item at the specified index. Key is used for caching * and as the react key to track item re-ordering. The default extractor checks `item.key`, then * falls back to using the index, like React does. */ keyExtractor: (item: ItemT, index: number) => string, /** * Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a * `flexWrap` layout. Items should all be the same height - masonry layouts are not supported. */ numColumns: number, /** * See `ScrollView` for flow type and further documentation. */ fadingEdgeLength?: ?number, |}; type FlatListProps<ItemT> = {| ...RequiredProps<ItemT>, ...OptionalProps<ItemT>, |}; type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>; export type Props<ItemT> = { ...$Diff<VirtualizedListProps, { getItem: $PropertyType<VirtualizedListProps, 'getItem'>, getItemCount: $PropertyType<VirtualizedListProps, 'getItemCount'>, getItemLayout: $PropertyType<VirtualizedListProps, 'getItemLayout'>, renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>, keyExtractor: $PropertyType<VirtualizedListProps, 'keyExtractor'>, ... }>, ...FlatListProps<ItemT>, ... }; const defaultProps = { ...VirtualizedList.defaultProps, numColumns: 1 }; export type DefaultProps = typeof defaultProps; /** * A performant interface for rendering simple, flat lists, supporting the most handy features: * * - Fully cross-platform. * - Optional horizontal mode. * - Configurable viewability callbacks. * - Header support. * - Footer support. * - Separator support. * - Pull to Refresh. * - Scroll loading. * - ScrollToIndex support. * * If you need section support, use [`<SectionList>`](docs/sectionlist.html). * * Minimal Example: * * <FlatList * data={[{key: 'a'}, {key: 'b'}]} * renderItem={({item}) => <Text>{item.key}</Text>} * /> * * More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs. * * - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will * prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even * if the components rendered in `MyListItem` did not have such optimizations. * - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render * when the `state.selected` changes. Without setting this prop, `FlatList` would not know it * needs to re-render any items because it is also a `PureComponent` and the prop comparison will * not show any changes. * - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. * * * class MyListItem extends React.PureComponent { * _onPress = () => { * this.props.onPressItem(this.props.id); * }; * * render() { * const textColor = this.props.selected ? "red" : "black"; * return ( * <TouchableOpacity onPress={this._onPress}> * <View> * <Text style={{ color: textColor }}> * {this.props.title} * </Text> * </View> * </TouchableOpacity> * ); * } * } * * class MultiSelectList extends React.PureComponent { * state = {selected: (new Map(): Map<string, boolean>)}; * * _keyExtractor = (item, index) => item.id; * * _onPressItem = (id: string) => { * // updater functions are preferred for transactional updates * this.setState((state) => { * // copy the map rather than modifying state. * const selected = new Map(state.selected); * selected.set(id, !selected.get(id)); // toggle * return {selected}; * }); * }; * * _renderItem = ({item}) => ( * <MyListItem * id={item.id} * onPressItem={this._onPressItem} * selected={!!this.state.selected.get(item.id)} * title={item.title} * /> * ); * * render() { * return ( * <FlatList * data={this.props.data} * extraData={this.state} * keyExtractor={this._keyExtractor} * renderItem={this._renderItem} * /> * ); * } * } * * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html), * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed * here, along with the following caveats: * * - Internal state is not preserved when content scrolls out of the render window. Make sure all * your data is captured in the item data or external stores like Flux, Redux, or Relay. * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow- * equal. Make sure that everything your `renderItem` function depends on is passed as a prop * (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on * changes. This includes the `data` prop and parent component state. * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see * blank content. This is a tradeoff that can be adjusted to suit the needs of each application, * and we are working on improving it behind the scenes. * - By default, the list looks for a `key` prop on each item and uses that for the React key. * Alternatively, you can provide a custom `keyExtractor` prop. * * Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation. */ declare class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> { static defaultProps: DefaultProps, props: Props<ItemT>, scrollToEnd(params?: ?{ animated?: ?boolean, ... }): any, scrollToIndex(params: { animated?: ?boolean, index: number, viewOffset?: number, viewPosition?: number, ... }): any, scrollToItem(params: { animated?: ?boolean, item: ItemT, viewPosition?: number, ... }): any, scrollToOffset(params: { animated?: ?boolean, offset: number, ... }): any, recordInteraction(): any, flashScrollIndicators(): any, getScrollResponder(): ?typeof ScrollView, getNativeScrollRef(): ?React.ElementRef<typeof View> | ?React.ElementRef<typeof ScrollView>, getScrollableNode(): any, setNativeProps(props: { [string]: mixed, ... }): any, constructor(props: Props<ItemT>): any, componentDidUpdate(prevProps: Props<ItemT>): any, _listRef: ?React.ElementRef<typeof VirtualizedList>, _virtualizedListPairs: Array<ViewabilityConfigCallbackPair>, _captureRef: any, _checkProps(props: Props<ItemT>): any, _getItem: any, _getItemCount: any, _keyExtractor: any, _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void, _createOnViewableItemsChanged(onViewableItemsChanged: ?(info: { viewableItems: Array<ViewToken>, changed: Array<ViewToken>, ... }) => void): any, _renderer: any, render(): React.Node, } const styles = StyleSheet.create({ row: { flexDirection: 'row' } }); export default FlatList;