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
this disclaimer
6renderList() {
7 const {
8 slides,
9 userId,
10 changeSlide,
11 deleteSlide,
12 } = this.props;
13
14 return slides.map((slide, index) => (
15 <Menu.Item
16 className="slidescontrols"
17 // eslint-disable-next-line react/no-array-index-key
18 key={index}
19 style={{
20 height: '100%',
21 display: 'flex',
22 flexDirection: 'column',
23 justifyContent: userId === Meteor.userId() ? 'space-around' : 'center',
24 }}
25 >
26 <Button onClick={() => { changeSlide(index); }}>
27 {index + 1}
28 </Button>
29 {userId === Meteor.userId()
30 ? (
31 <Button onClick={() => { deleteSlide(index); }}>
32 X
33 </Button>
34 ) : null}
35 </Menu.Item>
36 ));
37}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

40renderList(props) {
41 return (
42 <ul>
43 {props.entities.map(entity => {
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 => {
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 = () => {
11 if (this.listRef.current && this.enabledAutoScrollToEnd) {
12 this.listRef.current.scrollToOffset({ offset: this.contentHeight - this.flatListHeight });
13 }
14 };
15 this.onLayout = (event) => {
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) => {
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) => {
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 >= 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 <View style={{ ...styles.container }} onLayout={this.onLayout}>
200 {this.renderFlatList()}
201 </View>
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 <BpkTouchableOverlay
93 accessibilityComponentType="button"
94 accessibilityLabel={title}
95 accessibilityTraits={['button']}
96 style={styles.outer}
97 {...rest}
98 >
99 <View style={styles.content}>
100 {styledImage}
101 <BpkText
102 textStyle="base"
103 style={[styles.text, selected ? styles.textSelected : null]}
104 >
105 {title}
106 </BpkText>
107 </View>
108 <BpkIcon small icon={icons.tick} style={iconStyles} />
109 </BpkTouchableOverlay>
110 );
111}
128render() {
129 return (
130 <View
131 onLayout={this.onLayout}
132 height="100%"
133 width="100%"
134 onWheel={this.onWheel}
135 >
136 {this.state.height > 0 ? this.renderItemsInViewport() : null}
137 </View>
138 );
139}
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