10 examples of 'horizontal flatlist react native' in JavaScript

Every line of 'horizontal flatlist react native' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
6renderList() {
7 const {
8 slides,
9 userId,
10 changeSlide,
11 deleteSlide,
12 } = this.props;
13
14 return slides.map((slide, index) => (
15
16 { changeSlide(index); }}>
17 {index + 1}
18
19 {userId === Meteor.userId()
20 ? (
21 { deleteSlide(index); }}>
22 X
23
24 ) : null}
25
26 ));
27}
40renderList(props) {
41 return (
42 <ul>
43 {props.entities.map(entity =&gt; {
44 return this.renderEntity(entity);
45 })}
46 </ul>
47 );
48}
88constructor(props) {
89 super(props);
90
91 this.state = {
92 items: props.items,
93 };
94}
30render() {
31 const childrenToRender = React.Children.toArray(this.props.children).map(item =&gt; {
32 if (!item.props.value) {
33 return item;
34 }
35 const props = assign({}, item.props);
36 props.className = (props.className || '').replace('active', '');
37 if (item.props.value === this.state.defaultValue) {
38 props.className = `${props.className} active`.trim();
39 }
40 props.onClick = this.listOnClick.bind(this, item.props.value);
41 return React.cloneElement(item, props);
42 });
43 return React.createElement(
44 this.props.component,
45 this.props,
46 childrenToRender
47 );
48}
4constructor() {
5 super(...arguments);
6 this.listRef = React.createRef();
7 this.flatListHeight = 0;
8 this.contentHeight = 0;
9 this.enabledAutoScrollToEnd = true;
10 this.scrollToEnd = () =&gt; {
11 if (this.listRef.current &amp;&amp; this.enabledAutoScrollToEnd) {
12 this.listRef.current.scrollToOffset({ offset: this.contentHeight - this.flatListHeight });
13 }
14 };
15 this.onLayout = (event) =&gt; {
16 this.flatListHeight = event.nativeEvent.layout.height;
17 // User-defined onLayout event
18 const { onLayout } = this.props;
19 if (onLayout) {
20 onLayout(event);
21 }
22 };
23 this.onContentSizeChange = (width, height) =&gt; {
24 this.contentHeight = height;
25 this.scrollToEnd();
26 // User-defined onContentSizeChange event
27 const { onContentSizeChange } = this.props;
28 if (onContentSizeChange) {
29 onContentSizeChange(width, height);
30 }
31 };
32 this.onScroll = (event) =&gt; {
33 // if scrollTop is at end / user scroll to end, the FlatList will now enabledAutoScrollToEnd
34 if (this.listRef.current) {
35 this.enabledAutoScrollToEnd = event.nativeEvent.contentOffset.y &gt;= this.contentHeight - this.flatListHeight;
36 }
37 // User-defined onScroll event
38 const { onScroll } = this.props;
39 if (onScroll) {
40 onScroll(event);
41 }
42 };
43}
197render() {
198 return (
199
200 {this.renderFlatList()}
201
202 )
203}
111render() {
112 const {
113 ordered,
114 items,
115 children,
116 inline,
117 divided,
118 bullet,
119 theme,
120 } = this.props;
121
122 const listItems = children || items.map(Item.create);
123
124 return React.createElement(
125 this._listType(ordered),
126 {
127 inline,
128 divided,
129 bullet,
130 theme,
131 ...this.props,
132 },
133 listItems,
134 );
135}
78render() {
79 const { image, title, selected, ...rest } = this.props;
80 const iconStyles = [styles.tick];
81 if (selected) {
82 iconStyles.push(styles.tickVisible);
83 }
84
85 const styledImage = image
86 ? React.cloneElement(image, {
87 style: [image.props.style, styles.image],
88 })
89 : null;
90
91 return (
92
93
94 {styledImage}
95
96 {title}
97
98
99
100
101 );
102}
128render() {
129 return (
130
131 {this.state.height &gt; 0 ? this.renderItemsInViewport() : null}
132
133 );
134}
312value: function renderList() {
313 var data = this.state.data;
314 var children = this.props.children;
315
316 var len = data.length;
317 if (!children) {
318 return null;
319 }
320 var lastChild = !Array.isArray(children) ? children : children[children.length - 1];
321 var isLastChildFunc = typeof lastChild === 'function';
322 if (!isLastChildFunc) {
323 return data.map(function (item, i) {
324 return _react2.default.cloneElement(lastChild, _extends({
325 /* eslint-disable react/no-array-index-key */
326 key: 'child-' + i,
327 /* selint-enable react/no-array-index-key */
328 index: i,
329 first: i === 0,
330 last: i === len,
331 odd: odd(i),
332 data: item
333 }, item));
334 });
335 }
336 return data.map(function (item, i) {
337 return lastChild(item, i);
338 });
339}

Related snippets