title: React Native FlatList : Select all Items and run 'OnPress'
body: <p>I am using <code>react-native-bouncy-checkbox</code> and <code>Flatlist</code>.</p>
  <blockquote>
  <p>I have created an array object which has <code>id</code>, <code>name</code>, <code>amount</code>.</p>
  <p>So far I have achieved:</p>
  <ul>
  <li><p>User can select individual items from the <code>Flatlist</code>, and it will add the <code>amount</code> and display it
  as total amount.</p>
  </li>
  <li><p>User can also edit the <code>amount</code> they have selected using TextInput.</p>
  </li>
  </ul>
  </blockquote>
  <hr />
  <p>However, I am trying to create a '<em>Select All</em>' feature.</p>
  <p>So, when user presses 'Select All' or taps on the 'checkbox' it should:</p>
  <ol>
  <li>select all the items from the FlatList</li>
  <li>add the total amount</li>
  <li>allow user to edit all the selected amount individually</li>
  <li>update the checkbox to show that it is selected.</li>
  </ol>
  <hr />
  <p>So far I have tried getting all the 'checkbox' to show that it is selected when 'Select All' text is pressed or when 'checkbox' is pressed (beside select all text).</p>
  <p><em>I have been trying to get this to work for the last couple of hours but couldn't manage to do it. So any help regarding this issue are most welcome.</em></p>
  <hr />
  <p><strong>CODE SNIPPETS AND APP SCREENSHOTS PROVIDED BELOW:</strong></p>
  <p><em><strong>Code Sample:</strong></em></p>
  <pre><code>import 'react-native-gesture-handler';
  import React, { useState, useEffect, Component } from 'react';
  import { StyleSheet, View, Text, TouchableOpacity, FlatList } from 'react-native';
  import { Button, Divider, TextInput } from 'react-native-paper';
  import BouncyCheckbox from 'react-native-bouncy-checkbox';
  import TextInputMask from 'react-native-text-input-mask';
  
  function AccountMultiplePayment({ navigation }) {
      const [apiData, setApiData] = useState([
          {
              id: 1,
              name: 'John',
              address: 'address 1',
              amount: '79.90',
          },
          {
              id: 2,
              name: 'Simon',
              address: 'address 2',
              amount: '35.50',
          },
          {
              id: 3,
              name: 'Tim',
              address: 'address 3',
              amount: '15.50',
          },
          {
              id: 4,
              name: 'Rob',
              address: 'address 4',
              amount: '33.33',
          },
          {
              id: 5,
              name: 'Sarah',
              address: 'address 5',
              amount: '77.77',
          },
      ])
  
      const [billPaymentAmount, setBillPaymentAmount] = useState({})
      const [selectedBill, setSelectedBill] = useState([]);
      const [totalPaymentAmount, setTotalPaymentAmount] = useState(0);
  
      const computeBillPaymentAmount = () =&gt; {
          let newBillPaymentAmount = {}
  
          apiData.forEach(({ id, amount }) =&gt; {
              newBillPaymentAmount[id] = amount
          })
  
          return newBillPaymentAmount
      }
  
      const computeTotalPaymentAmount = () =&gt; {
          let total = 0
  
          selectedBill.forEach(id =&gt; {
              total += parseFloat(billPaymentAmount[id])
          })
  
          // Prevent NaN issue, because once user delete amount will become empty string
          return total ? total : 0
      }
  
      useEffect(() =&gt; {
          setBillPaymentAmount(computeBillPaymentAmount())
      }, [apiData])
  
      useEffect(() =&gt; {
          setTotalPaymentAmount(computeTotalPaymentAmount())
      }, [selectedBill, billPaymentAmount])
  
      const [checked, setChecked] = useState(false);
  
      return (
          &lt;&gt;
              &lt;View style={{flexDirection: 'row'}}&gt;
                  &lt;TouchableOpacity 
                      style={{ alignItems: 'center', paddingVertical: 10 }}
                      onPress={() =&gt; setChecked(!checked)}
                  &gt;
                      &lt;Text style={{ color: 'black', fontSize: 25 }}&gt;Select All&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;BouncyCheckbox
                          isChecked={checked}
                          fillColor={'green'}
                          unfillColor={'#FFFFFF'}
                          onPress={() =&gt; {
                              setChecked(!checked)
                          }}
                      /&gt;
              &lt;/View&gt;
              &lt;FlatList
                  data={apiData}
                  renderItem={({ item }) =&gt; {
                      return (
                          &lt;View style={{ flexDirection: 'row' }}&gt;
                              &lt;View style={[styles.subHeaderContainer, { flex: 1 }]}&gt;
                                  &lt;Text
                                      style={[
                                          styles.defaultText,
                                          { fontWeight: 'bold', fontSize: 16 },
                                      ]}&gt;
                                      {item.name}
                                  &lt;/Text&gt;
                                  &lt;Divider style={{ marginVertical: 5 }} /&gt;
                                  &lt;View style={{ flexDirection: 'row' }}&gt;
                                      &lt;Text
                                          style={[styles.defaultText, { fontWeight: 'bold', flex: 2 }]}&gt;
                                          Total Payable Amount:
                                      &lt;/Text&gt;
                                      &lt;View style={{ flex: 1 }}&gt;
                                          &lt;TextInput
                                              value={billPaymentAmount[item.id]}
                                              onChangeText={value =&gt; setBillPaymentAmount({ ...billPaymentAmount, [item.id]: value })}
                                              keyboardType={'numeric'}
                                              mode={'outlined'}
                                              label={'RM'}
                                              dense={true}
                                              render={props =&gt;
                                                  &lt;TextInputMask
                                                      {...props}
                                                      mask='[9990].[99]'
                                                  /&gt;
                                              }
                                          /&gt;
                                      &lt;/View&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                              &lt;BouncyCheckbox
                                  isChecked={checked}
                                  fillColor={'green'}
                                  unfillColor={'#FFFFFF'}
                                  onPress={() =&gt; {
                                      if (selectedBill.includes(item.id)) {
                                          setSelectedBill(selectedBill.filter(value =&gt; value !== item.id))
                                      } else {
                                          setSelectedBill([...selectedBill, item.id])
                                      }
                                  }}
                              /&gt;
                          &lt;/View&gt;
                      );
                  }}
                  keyExtractor={item =&gt; item.id}
                  removeClippedSubviews={false}
              /&gt;
              {
                      &lt;&gt;
                          &lt;View
                              style={{
                                  paddingVertical: 10,
                                  paddingHorizontal: 20,
                                  flexDirection: 'row',
                                  backgroundColor:'blue'
                              }}&gt;
                              &lt;Text
                                  style={{ color: 'white', flex: 1, fontWeight: 'bold', fontSize: 18 }}&gt;
                                  Total Amount:{' '}
                              &lt;/Text&gt;
                              &lt;View&gt;
                                  &lt;Text style={{ color: 'white', fontWeight: 'bold', fontSize: 24 }}&gt;
                                      RM {totalPaymentAmount.toFixed(2)}
                                  &lt;/Text&gt;
                                  {totalPaymentAmount &lt;= 0 ? null : (
                                      &lt;TouchableOpacity
                                          onPress={() =&gt; {
                                              //navigation.goBack();
                                              navigation.goBack();
                                              navigation.navigate('Account');
                                          }}&gt;
                                          &lt;Text&gt;Reset&lt;/Text&gt;
                                      &lt;/TouchableOpacity&gt;
                                  )}
                              &lt;/View&gt;
                          &lt;/View&gt;
  
                          &lt;Button
                              mode={'contained'}
                              color={'limegreen'}
                              style={{
                                  borderRadius: 5,
                                  marginHorizontal: 20,
                                  marginVertical: 10,
                                  justifyContent: 'center',
                              }}
                              labelStyle={{ color: 'white', padding: 10 }}
                              uppercase={false}
                              onPress={() =&gt; { }}
                              disabled={totalPaymentAmount &lt;= 0 ? true : false}&gt;
                              &lt;Text&gt;Pay Bill&lt;/Text&gt;
                          &lt;/Button&gt;
                      &lt;/&gt;
              }
          &lt;/&gt;
      );
  }
  class Account extends Component {
      constructor(props) {
          super(props);
          this._isMounted = false;
          this.state = {
  
          };
      }
  
      render() {
          return (
              &lt;&gt;
                  {&lt;AccountMultiplePayment {...this.props} {...this.navigation} /&gt;}
              &lt;/&gt;
          );
      }
  }
  
  export default Account;
  
  const styles = StyleSheet.create({
      flex: {
          flex: 1,
      },
      headerTitle: {
          alignItems: 'center',
          borderBottomLeftRadius: 25,
          borderBottomRightRadius: 25,
          paddingHorizontal: 20,
          paddingVertical: 20,
      },
      subHeaderContainer: {
          paddingVertical: 10,
          paddingHorizontal: 20,
          backgroundColor: 'white',
          borderRadius: 10,
          elevation: 5,
          marginVertical: 5,
          marginHorizontal: 10,
      },
      subHeaderTitle: {
          color: 'white',
          fontWeight: 'bold',
          fontSize: 16,
          backgroundColor: '#2c1855',
          padding: 10,
          borderRadius: 10,
      },
      defaultText: {
          color: 'black',
      },
  });
  </code></pre>
  <hr />
  <p><em><strong>This is what it looks like currently. All checked items are individually selected:</strong></em></p>
  <p><a href="https://i.stack.imgur.com/vTizw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vTizw.jpg" alt="current app screenshot" /></a></p>
  <hr />
  <p><em><strong>This is what I am trying to achieve:</strong></em></p>
  <p><a href="https://i.stack.imgur.com/KAkED.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KAkED.jpg" alt="goal for this app" /></a></p>