logo
down
shadow

Custom flat list items in react native


Custom flat list items in react native

By : kevin lofty
Date : October 18 2020, 01:08 AM
Hope this helps The easiest way to achieve it is to have a Row component and based on props you determine how to render it. Example:
code :
class Row extends React.PureComponent {

   render(){
      const { item } = this.props
      if(item.break){
         return <Text>Break</Text>
      }
      return (
         <View><Text>Normal item goes here</Text></View>
      )
   }
}


Share : facebook icon twitter icon
Efficiently update all items in large flat list in react native

Efficiently update all items in large flat list in react native


By : Haroon Rasheed
Date : March 29 2020, 07:55 AM
it fixes the issue Found the solution, thanks to Pir Shukarullah Shah and RaphaMex. First of all, let's look at the updated image picker:
code :
<FlatList
    ...
    ...
    keyExtractor={(item) => item}    // This is important!!!
    onViewableItemsChanged={this.onViewablePhotosChanged}
    initialNumberToRender={Math.ceil(SCREEN_HEIGHT / IMAGE_SIZE) * 3}
    ...
/>
onViewablePhotosChanged({ viewableItems }) {
    let viewablePhotos = [];
    viewableItems.forEach((item) => viewablePhotos.push(item.key));
    this.setState({ viewablePhotos });

    // Here, every object in 'viewableItems' has a key, which
    // is the key you provided in 'keyExtractor={(item) => ...}',
    // I used the 'uri' of each photo as the key, that's why
    // I am pushing viewable photos' uri's to 'viewablePhotos' array
}
renderPhoto({ item }) {
    ...
    ...

    return (
        <CameraRollImage
            ...
            ...
            viewable={_.include(this.state.viewablePhotos, item)}
        />
    );
}
componentWillReceiveProps(nextProps) {
    const { ..., ..., viewable } = nextProps;

    if (!viewable) {
        this.setState({ viewable: false });
        return;
    }

    ...
    ...
}
render() {
    if (!this.state.viewable) {
        return (
            <View
                style={{
                    width={IMAGE_SIZE}
                    height={IMAGE_SIZE}
                }}
            />
        );
    }

    return (
        <Image
            ...
            ...
        />
    );
}
How to handle state on Flat List Items in React-Native

How to handle state on Flat List Items in React-Native


By : user2830254
Date : March 29 2020, 07:55 AM
I hope this helps you . I am setting a counter on the items of the FlatList component of React-Native. How can I update the list item every time the user press the "+" or "-" button? , You need to update the data state instead of returning an item.
code :
handleIncrement = i => {

  const item = this.state.data[i];

  this.setState({
    data: [
      ...this.state.data.slice(0, i),
      Object.assign({}, this.state.data[i], { quantity: item.quantity + 1 }),
      ...this.state.data.slice(i + 1)
    ]
  });
};
// pass array index and quantity 1 for + and -1 for -
handleIncrement = (i, qty) => {
  const item = this.state.data[i];

  if (item && item.quantity === 0 && qty === -1) {
    return;
  }

  this.setState({
    data: [
      ...this.state.data.slice(0, i),
      Object.assign({}, this.state.data[i], { quantity: item.quantity + qty, }),
      ...this.state.data.slice(i + 1),
    ],
  });
};
h1, p {
  font-family: Lato;
}

.container {
  display: flex;
  flex-direction: row;
  border-bottom-style: solid;
  margin-bottom: 5px;
}

.image-container {
  flex-grow: 0;
}

.info-container {
  display: flex;
  margin-left: 10px;
  flex-direction: row;
}

.title {
  margin-top: 0;
}

.titleContainer {
  width: 100px;
}

.cover {
  width: 30px;
}

.buttons {
  flex-grow: 1;
  display: flex;
  margin-left: 10px;
}

.incrementButtons {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class Item extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="image-container">
          <img className="cover" src={this.props.image} />
        </div>
        <div className="info-container">
          <div className="titleContainer">
            <p className="title">{this.props.title}</p>
          </div>
          <div className="buttons">
            <p className="title">{this.props.qty}</p>
            <img onClick={() => this.props.increment(this.props.index, -1)} className="incrementButtons" src="https://img.icons8.com/metro/26/000000/minus-math.png" />
            <img onClick={() => this.props.increment(this.props.index, 1)} className="incrementButtons" src="https://img.icons8.com/metro/26/000000/plus-math.png" />
          </div>
        </div>
      </div>
    )
  }
}

class App extends React.Component {

  state = {
    data: [
      {
        id: 1,
        name: 'Avocado',
        price: '400',
        imageS: 'https://img.icons8.com/metro/26/000000/avocado.png',
        quantity: 0,
      },
      {
        id: 6,
        name: 'Bread',
        price: '300',
        imageS: 'https://img.icons8.com/metro/26/000000/bread.png',
        quantity: 0,
      },
      {
        id: 2,
        name: 'Milk',
        price: '300',
        imageS: 'https://img.icons8.com/metro/26/000000/milk-bottle.png',
        quantity: 0,
      },
    ],
  };

  handleIncrement = (i, qty) => {
    const item = this.state.data[i];

    if (item && item.quantity === 0 && qty === -1) {
      return;
    }

    this.setState({
      data: [
        ...this.state.data.slice(0, i),
        Object.assign({}, this.state.data[i], { quantity: item.quantity + qty, }),
        ...this.state.data.slice(i + 1),
      ],
    });
  };

  render() {

    const items = this.state.data.map((item, index) => (
      <Item qty={item.quantity} index={index} key={index} increment={this.handleIncrement} title={item.name} image={item.imageS} />
    ))
    return (
      <div>
        {items}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>
React Native Flat List

React Native Flat List


By : ameguid12
Date : March 29 2020, 07:55 AM
I wish did fix the issue. In your Modal, you are using
{item.title}
clickable Flat list items in React Native

clickable Flat list items in React Native


By : Moose LT
Date : March 29 2020, 07:55 AM
Does that help You can do like this :
renderItem with TouchableOpacity. Make sure to import it from react native.
code :
import { TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome5';
...
...

render() {
  return (
    <FlatList
      data={formatData(data, numColumns)}
      style={styles.container}
      renderItem={({item ,index}) => (
        <TouchableOpacity 
          key={index.toString()} 
          onPress={() => console.log("clicked")}
        >
          <Icon name={item} color="red"/>
        </TouchableOpacity>
      )}
      numColumns={numColumns}
      key={numColumns.toString()} // if you want to use dynamic numColumns then you have to use key props
    />
  );
}
How to update rendered flat/section list items immediately React Native

How to update rendered flat/section list items immediately React Native


By : user3656360
Date : March 29 2020, 07:55 AM
hope this fix your issue I'm not 100% certain about this, but I have a feeling that the problem is that the SectionList component isn't triggering its update because the supplied sections={this.state.data} property never changes.
The easiest way to handle this is to add the selectedItems as an extraData property to section list:
code :
 <SectionList
     sections={this.state.data}
     extraData={this.state.selectedItems}
     //...
shadow
Privacy Policy - Terms - Contact Us © soohba.com