react-native-paper#List JavaScript Examples

export default function SectionList() {
  const [numberColumns, setNumberColumns] = useState(3);
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <View>
      <TextInput
        label="Number of columns (max 10)"
        value={String(numberColumns)}
        type="numeric"
        keyboardType="numeric"
        onChangeText={(value) => {
          const num = parseInt(value, 10) || "";
          setNumberColumns(num);
        }}
      />
    </View>
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={styles.container}
            data={data}
            numColumns={Math.min(
              Math.max(parseInt(numberColumns, 10) || 1, 1),
              10,
            )}
            // Item
            itemHeight={90}
            renderItem={renderItem}
            renderEmpty={renderEmpty}
            // Header
            headerHeight={90}
            renderHeader={renderHeader}
            // Footer
            footerHeight={100}
            renderFooter={renderFooter}
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function CompareList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.id + " - " + item.title}
        description={item.description}
        style={styles.item}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;

  const renderBigHeader = () => (
    <List.Item
      title="BigList"
      description="react-native-big-list"
      style={styles.header}
    />
  );
  const renderFlatHeader = () => (
    <List.Item
      title="FlatList"
      description="react-native"
      style={styles.header}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={[
              styles.container,
              Platform.select({ web: { maxHeight: "100vh" }, default: {} }),
            ]}
            data={data}
            renderItem={renderItem}
            getItemLayout={(data, index) => ({
              length: ITEM_HEIGHT,
              offset: ITEM_HEIGHT * index,
              index,
            })}
            ListHeaderComponent={renderBigHeader}
            ListFooterComponent={renderFooter}
            ListEmptyComponent={renderEmpty}
            headerHeight={100} // Default 0, need to specify the header height
            footerHeight={100} // Default 0, need to specify the footer  height
          />
          <FlatList
            style={[
              styles.container,
              Platform.select({ web: { maxHeight: "100vh" }, default: {} }),
            ]}
            data={data}
            renderItem={renderItem}
            getItemLayout={(data, index) => ({
              length: ITEM_HEIGHT,
              offset: ITEM_HEIGHT * index,
              index,
            })} // Replaceable with `itemHeight={ITEM_HEIGHT}`
            ListHeaderComponent={renderFlatHeader} // Replaceable with `renderHeader`
            ListFooterComponent={renderFooter} // Replaceable with `renderFooter`
            ListEmptyComponent={renderEmpty} // Replaceable with `renderEmpty`
            keyExtractor={(item) => String(item.id)} // Removable
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function SectionList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <List.Item
      title="Marco Cesarato"
      description="[email protected]"
      style={styles.container}
      left={(props) => <List.Icon {...props} icon="account" />}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={styles.container}
            data={data}
            // Item
            itemHeight={90}
            renderItem={renderItem}
            renderEmpty={renderEmpty}
            // Header
            headerHeight={90}
            renderHeader={renderHeader}
            // Footer
            footerHeight={100}
            renderFooter={renderFooter}
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function SectionList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <List.Item
      title="Marco Cesarato"
      description="[email protected]"
      style={styles.container}
      left={(props) => <List.Icon {...props} icon="account" />}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  const renderSectionHeader = (section) => (
    <Appbar style={styles.header}>
      <Appbar.Content
        style={styles.headerContent}
        title={"Section " + (section + 1)}
        subtitle="Below are listed all section items"
      />
    </Appbar>
  );
  const renderSectionFooter = (section) => (
    <Block>
      <Subheading>Footer Section {section}</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList
          style={styles.container}
          sections={sections}
          // Item
          itemHeight={90}
          renderItem={renderItem}
          renderEmpty={renderEmpty}
          // Header
          headerHeight={90}
          renderHeader={renderHeader}
          // Footer
          footerHeight={100}
          renderFooter={renderFooter}
          // Section
          sectionHeaderHeight={75}
          renderSectionHeader={renderSectionHeader}
          // Section footer
          sectionFooterHeight={60}
          renderSectionFooter={renderSectionFooter}
        />
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

function NdefTypeListScreen(props) {
  const {navigation} = props;

  return (
    <ScrollView style={{flex: 1, backgroundColor: 'white'}}>
      <List.Section>
        <List.Subheader>Well Known</List.Subheader>
        <List.Item
          title="TEXT"
          description="Write text into NFC tags"
          left={NfcIcons.TxtIcon}
          onPress={() => navigation.navigate('NdefWrite', {ndefType: 'TEXT'})}
        />
        <List.Item
          title="Link"
          description="Write web link or uri into NFC tags"
          left={NfcIcons.UriIcon}
          onPress={() => navigation.navigate('NdefWrite', {ndefType: 'URI'})}
        />

        <List.Item
          title="TEL"
          description="Write number into NFC tags to make phone call"
          left={NfcIcons.TelIcon}
          onPress={() =>
            navigation.navigate('NdefWrite', {ndefType: 'URI', scheme: 'tel:'})
          }
        />

        <List.Item
          title="SMS"
          description="Write number into NFC tags to send SMS"
          left={NfcIcons.SmsIcon}
          onPress={() =>
            navigation.navigate('NdefWrite', {ndefType: 'URI', scheme: 'sms:'})
          }
        />

        <List.Item
          title="EMAIL"
          description="Write email into NFC tags"
          left={NfcIcons.EmailIcon}
          onPress={() =>
            navigation.navigate('NdefWrite', {
              ndefType: 'URI',
              scheme: 'mailto:',
            })
          }
        />

        <List.Subheader>MIME</List.Subheader>
        <List.Item
          title="WiFi Simple Record"
          description="Connect to your WiFi AP"
          left={NfcIcons.WifiIcon}
          onPress={() =>
            navigation.navigate('NdefWrite', {ndefType: 'WIFI_SIMPLE'})
          }
        />

        <List.Item
          title="vCard"
          description="Write contact records. Please beaware vCard format is not supported by iOS natively"
          left={NfcIcons.ContactIcon}
          onPress={() => navigation.navigate('NdefWrite', {ndefType: 'VCARD'})}
        />
      </List.Section>
    </ScrollView>
  );
}

function RecordItem(props) {
  const {record, removeIdx, goToHandler, onCopy, idx} = props;
  return (
    <List.Item
      title={record.name}
      right={() => (
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            alignSelf: 'center',
          }}>
          <IconButton
            icon={() => (
              <Icon name="delete" size={22} style={{alignSelf: 'center'}} />
            )}
            onPress={() => removeIdx(idx)}
          />

          <IconButton
            icon={() => (
              <Image
                source={require('../../../images/save_as.png')}
                style={{width: 24, height: 24}}
                resizeMode="contain"
              />
            )}
            onPress={() => onCopy()}
          />

          <IconButton
            icon={() => (
              <Icon name="share" size={22} style={{alignSelf: 'center'}} />
            )}
            onPress={() => {
              Share.share({
                title: 'My NFC Record',
                url: `com.revteltech.nfcopenrewriter://share?data=${JSON.stringify(
                  record,
                )}`,
              });
            }}
          />

          <IconButton
            icon={() => (
              <Icon
                name="arrow-forward"
                size={22}
                style={{alignSelf: 'center'}}
              />
            )}
            onPress={() => goToHandler(record)}
          />
        </View>
      )}
    />
  );
}

function SavedRecordScreen(props) {
  const {navigation} = props;
  const app = React.useContext(AppContext.Context);
  const recordList = app.state.storageCache;
  const [recordToCopy, setRecordToCopy] = React.useState(null);

  async function clearAll() {
    Alert.alert('CONFIRM', 'Are you sure?', [
      {
        text: 'DO IT',
        onPress: async () => {
          await app.actions.setStorage([]);
        },
      },
      {
        text: 'CANCEL',
        onPress: () => 0,
      },
    ]);
  }

  async function removeIdx(idx) {
    Alert.alert('CONFIRM', 'Are you sure?', [
      {
        text: 'DO IT',
        onPress: async () => {
          const nextRecordList = [...recordList];
          nextRecordList.splice(idx, 1);
          await app.actions.setStorage(nextRecordList);
        },
      },
      {
        text: 'CANCEL',
        onPress: () => 0,
      },
    ]);
  }

  function goToHandler(savedRecordIdx, savedRecord) {
    if (savedRecord.payload?.tech === NfcTech.Ndef) {
      navigation.navigate('NdefWrite', {
        savedRecord,
        savedRecordIdx,
      });
    } else if (savedRecord.payload?.tech === NfcTech.NfcA) {
      navigation.navigate('CustomTransceive', {
        savedRecord,
        savedRecordIdx,
      });
    } else if (savedRecord.payload?.tech === NfcTech.NfcV) {
      navigation.navigate('CustomTransceive', {
        savedRecord,
        savedRecordIdx,
      });
    } else if (savedRecord.payload?.tech === NfcTech.IsoDep) {
      navigation.navigate('CustomTransceive', {
        savedRecord,
        savedRecordIdx,
      });
    }
  }

  const {ndefRecords, nfcARecords, nfcVRecords, isoDepRecords} =
    groupRecordByTech(recordList);

  return (
    <>
      <ScrollView style={{flex: 1, backgroundColor: 'white'}}>
        <List.Section>
          <List.Subheader>NDEF ({ndefRecords.length})</List.Subheader>
          {ndefRecords.map(({record, idx}) => (
            <RecordItem
              key={idx}
              record={record}
              idx={idx}
              removeIdx={removeIdx}
              goToHandler={goToHandler.bind(null, idx)}
              onCopy={() => {
                console.warn(record);
                setRecordToCopy(record);
              }}
            />
          ))}
        </List.Section>

        <List.Section>
          <List.Subheader>NfcA ({nfcARecords.length})</List.Subheader>
          {nfcARecords.map(({record, idx}) => (
            <RecordItem
              key={idx}
              record={record}
              idx={idx}
              removeIdx={removeIdx}
              goToHandler={goToHandler.bind(null, idx)}
              onCopy={() => setRecordToCopy(record)}
            />
          ))}
        </List.Section>

        <List.Section>
          <List.Subheader>NfcV ({nfcVRecords.length})</List.Subheader>
          {nfcVRecords.map(({record, idx}) => (
            <RecordItem
              key={idx}
              record={record}
              idx={idx}
              removeIdx={removeIdx}
              goToHandler={goToHandler.bind(null, idx)}
              onCopy={() => setRecordToCopy(record)}
            />
          ))}
        </List.Section>

        <List.Section>
          <List.Subheader>IsoDep ({isoDepRecords.length})</List.Subheader>
          {isoDepRecords.map(({record, idx}) => (
            <RecordItem
              key={idx}
              record={record}
              idx={idx}
              removeIdx={removeIdx}
              goToHandler={goToHandler.bind(null, idx)}
              onCopy={() => setRecordToCopy(record)}
            />
          ))}
        </List.Section>
      </ScrollView>
      <Button onPress={clearAll}>CLEAR ALL</Button>
      <SafeAreaView />

      <SaveRecordModal
        title={'COPY THIS RECORD AS'}
        visible={!!recordToCopy}
        onClose={() => setRecordToCopy(null)}
        onPersistRecord={async (name) => {
          if (!recordToCopy) {
            return false;
          }

          const nextList = AppContext.Actions.getStorage();
          nextList.push({
            name,
            payload: recordToCopy.payload,
          });

          await AppContext.Actions.setStorage(nextList);
          setRecordToCopy(null);
        }}
      />
    </>
  );
}

function SettingsScreen(props) {
  const [nfcStatus, setNfcStatus] = React.useState(null);
  const [feedback, setFeedback] = React.useState('');
  const [keyboardPadding, setKeyboardPadding] = React.useState(0);
  const scrollViewRef = React.useRef();
  const scrollPosRef = React.useRef(0);

  React.useEffect(() => {
    function onNfcStateChanged(evt = {}) {
      const {state} = evt;
      setNfcStatus(state === 'on');
    }

    async function checkNfcState() {
      setNfcStatus(await NfcManager.isEnabled());
      NfcManager.setEventListener(NfcEvents.StateChanged, onNfcStateChanged);
    }

    if (Platform.OS === 'android') {
      checkNfcState();
    }

    return () => {
      if (Platform.OS === 'android') {
        NfcManager.setEventListener(NfcEvents.StateChanged, null);
      }
    };
  }, []);

  React.useEffect(() => {
    async function onKbShow() {
      const estimatedKbHeight = Dimensions.get('window').width;
      setKeyboardPadding(estimatedKbHeight);
      setTimeout(() => {
        scrollViewRef.current.scrollTo({
          y: scrollPosRef.current + estimatedKbHeight,
        });
      }, 200);
    }

    function onKbHide() {
      setKeyboardPadding(0);
    }

    if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', onKbShow);
      Keyboard.addListener('keyboardWillHide', onKbHide);
    }

    return () => {
      if (Platform.OS === 'ios') {
        Keyboard.removeListener('keyboardWillShow', onKbShow);
        Keyboard.removeListener('keyboardWillHide', onKbHide);
      }
    };
  }, []);

  return (
    <ScrollView
      style={[styles.wrapper]}
      ref={scrollViewRef}
      onScroll={({nativeEvent}) => {
        scrollPosRef.current = nativeEvent.contentOffset.y;
      }}
      keyboardShouldPersistTaps="handled">
      <View style={styles.topBanner}>
        <Text style={{lineHeight: 16}}>{generalText}</Text>
      </View>
      <List.Section>
        {Platform.OS === 'android' && (
          <>
            <List.Item
              title="NFC Status"
              description={
                nfcStatus === null ? '---' : nfcStatus ? 'ON' : 'OFF'
              }
            />
            <List.Item
              title="NFC Settings"
              description="Jump to System NFC Settings"
              onPress={() => {
                NfcManager.goToNfcSetting();
              }}
            />
          </>
        )}
        <List.Item title="Version" description={version} />
        <List.Item
          title="Repository"
          description="https://github.com/revtel/react-native-nfc-rewriter"
          onPress={() => {
            Linking.openURL(
              'https://github.com/revtel/react-native-nfc-rewriter',
            );
          }}
        />
        <List.Subheader>Creators</List.Subheader>
        <List.Item
          title="Revteltech 忻旅科技"
          left={() => (
            <Image
              source={require('../../../images/revicon_512.png')}
              style={styles.maintainerIcon}
              resizeMode="contain"
            />
          )}
          description="https://www.revtel.tech/en"
          onPress={() => {
            Linking.openURL('https://www.revtel.tech/en');
          }}
        />
        <List.Item
          title="Washow 萬象創造"
          left={() => (
            <Image
              source={require('../../../images/washow_icon.png')}
              style={styles.maintainerIcon}
              resizeMode="contain"
            />
          )}
          description="http://www.washow.cc"
          onPress={() => {
            Linking.openURL('http://www.washow.cc');
          }}
        />
      </List.Section>

      <View style={{padding: 12}}>
        <Text style={{textAlign: 'center', fontSize: 16}}>Your Feedback</Text>
        <TextInput
          style={{marginTop: 8}}
          value={feedback}
          onChangeText={setFeedback}
        />
        <Button
          mode="contained"
          style={{marginTop: 8}}
          onPress={() => {
            if (feedback) {
              captureException(new Error('Feedback'), {
                section: 'feedback',
                extra: {feedback},
              });
              Alert.alert('Thanks for your feedback');
            }
            setFeedback('');
          }}>
          SEND
        </Button>
      </View>

      {keyboardPadding > 0 && <View style={{height: keyboardPadding}} />}
    </ScrollView>
  );
}

function TagKitScreen(props) {
  const {navigation} = props;

  return (
    <ScrollView style={{flex: 1, backgroundColor: 'white'}}>
      <List.Section>
        <List.Subheader>SIC 43NT</List.Subheader>
        <List.Item
          title="Verify rolling code"
          description="Verify rolling code"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify rolling code',
              readOnly: true,
              savedRecord: Sic43NT.verifyRollingCode,
            });
          }}
        />
        <List.Item
          title="Enable password"
          description="Enable password protection"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Enable password protection',
              readOnly: true,
              savedRecord: Sic43NT.enablePassword,
            });
          }}
        />
        <List.Item
          title="Verify password"
          description="Verify password"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify password',
              readOnly: true,
              savedRecord: Sic43NT.verifyPassword,
            });
          }}
        />

        <List.Subheader>NXP NTAG 424 DNA</List.Subheader>
        <List.Item
          title="Enable temper detection"
          description="Enable temper detection function"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Enable temper detection',
              readOnly: true,
              savedRecord: Ntag424.enableTemper,
            });
          }}
        />
        <List.Item
          title="Verify temper state"
          description="Verify temper state"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify temper state',
              readOnly: true,
              savedRecord: Ntag424.verifyTemperState,
            });
          }}
        />
        <List.Item
          title="Verify signature"
          description="Verify signature"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify signature',
              readOnly: true,
              savedRecord: Ntag424.readSignature,
            });
          }}
        />

        <List.Subheader>NXP NTAG 213</List.Subheader>
        <List.Item
          title="Enable password"
          description="Enable password protection"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Enable password protection',
              readOnly: true,
              savedRecord: Ntag213.enablePassword,
            });
          }}
        />
        <List.Item
          title="Verify password"
          description="Verify password"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify password',
              readOnly: true,
              savedRecord: Ntag213.verifyPassword,
            });
          }}
        />

        <List.Subheader>NXP NTAG 215</List.Subheader>
        <List.Item
          title="Enable password"
          description="Enable password protection"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Enable password protection',
              readOnly: true,
              savedRecord: Ntag215.enablePassword,
            });
          }}
        />
        <List.Item
          title="Verify password"
          description="Verify password"
          left={NfcIcons.TransceiveIcon}
          onPress={() => {
            navigation.navigate('CustomTransceive', {
              title: 'Verify password',
              readOnly: true,
              savedRecord: Ntag215.verifyPassword,
            });
          }}
        />
      </List.Section>
    </ScrollView>
  );
}

function ToolKitScreen(props) {
  const {navigation} = props;

  return (
    <ScrollView style={{flex: 1, backgroundColor: 'white'}}>
      <List.Section>
        <List.Subheader>Ndef</List.Subheader>
        <List.Item
          title="Make Read Only"
          description="Make the NFC tag readonly"
          left={NfcIcons.TransceiveIcon}
          onPress={async () => {
            await NfcProxy.makeReadOnly();
          }}
        />

        {Platform.OS === 'android' && (
          <List.Item
            title="NDEF Format"
            description="NDEF format"
            left={NfcIcons.EraseIcon}
            onPress={async () => {
              await NfcProxy.formatNdefAndroid();
            }}
          />
        )}
      </List.Section>

      <List.Section>
        <List.Subheader>NfcA</List.Subheader>
        <List.Item
          title="Custom Transceive"
          description="Send custom NfcA command into your tag"
          left={NfcIcons.TransceiveIcon}
          onPress={() =>
            navigation.navigate('CustomTransceive', {
              nfcTech: 'NfcA',
            })
          }
        />
        <List.Item
          title="Erase"
          description="Write all blocks to zero"
          left={NfcIcons.EraseIcon}
          onPress={async () => {
            await NfcProxy.eraseNfcA();
          }}
        />
        <List.Item
          title="NDEF Format"
          description="Erase and NDEF format"
          left={NfcIcons.EraseIcon}
          onPress={async () => {
            await NfcProxy.eraseNfcA({format: true});
          }}
        />
      </List.Section>

      <List.Section>
        <List.Subheader>NfcV</List.Subheader>
        <List.Item
          title="Custom Transceive"
          description="Send custom NfcV command into your tag"
          left={NfcIcons.TransceiveIcon}
          onPress={() =>
            navigation.navigate('CustomTransceive', {
              nfcTech: 'NfcV',
            })
          }
        />
      </List.Section>

      <List.Section>
        <List.Subheader>IsoDep</List.Subheader>
        <List.Item
          title="Custom Transceive"
          description="Send custom APDU command into your tag"
          left={NfcIcons.TransceiveIcon}
          onPress={() =>
            navigation.navigate('CustomTransceive', {
              nfcTech: 'IsoDep',
            })
          }
        />
      </List.Section>

      <List.Section>
        <List.Subheader>Misc</List.Subheader>
        <List.Item
          title="Test registerTagEvent API"
          description="registerTagEvent use NDEF-only scan for iOS"
          left={NfcIcons.NfcIcon}
          onPress={async () => {
            const ndefTag = await NfcProxy.readNdefOnce();
            if (ndefTag) {
              navigation.navigate('TagDetail', {tag: ndefTag});
            }
          }}
        />
      </List.Section>
    </ScrollView>
  );
}

CategoriesScreen = ({ navigation, dispatch, taxonomy, saving }) => {

  const [colorsList] = React.useState([
    '#ececec',
    '#fab7bf',
    '#fadabe',
    '#c6e3ec',
    "rgba(165, 168, 228, 0.58)",
    '#c6e3ec',
    "rgba(215, 171, 98, 0.5)",
    "rgba(145, 225, 212, 0.54)"
  ])

  const handleDisplayTaxon = ({ title, id }) => {
    navigation.navigate('ProductsList', {title: title, id: id})
  }

  React.useEffect(() => {
    dispatch(getTaxonsList())
  }, [])

  if(saving) {
    return (
      <ActivityIndicatorCard />
    )
  } else
  return (
    <ScrollView>
      <View style={styles.rowContainer}>
        <View style={[styles.accordionItem, {backgroundColor: '#d7e5cc'}]}>
          <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
            <Text style={styles.accordionLevel1Title}>NEW IN</Text>
            <ChevronDown size={24} style={{color: colors.black}}/>
          </View>
          <Text style={styles.accordionLevel1Description}>Upgrade Your Closet</Text>
        </View>
        <View style={[styles.accordionItem, {backgroundColor: '#d7e5cc'}]}>
          <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
            <Text style={styles.accordionLevel1Title}>ON SALE</Text>
            <ChevronDown size={24} style={{color: colors.black}}/>
          </View>
          <Text style={styles.accordionLevel1Description}>We Can’t Get Enough</Text>
        </View>
      </View>
      {
        taxonomy.children.map((taxonLevel1, index) => {
          return (
            <List.Accordion
              key={taxonLevel1.id}
              title={taxonLevel1.name}
              description="Spruce Up Your Look"
              titleStyle={styles.accordionLevel1Title}
              descriptionStyle={styles.accordionLevel1Description}
              style={[styles.accordionLevel1, {backgroundColor: colorsList[index]}]}
            >
              {
                taxonLevel1.children.map(taxonLevel2 => {
                  return (
                    <List.Item
                      key={taxonLevel2.id}
                      title={taxonLevel2.name}
                      titleStyle={styles.listItemTitle}
                      style={styles.listItem}
                      onPress={() => handleDisplayTaxon({ title: taxonLevel2.name, id: taxonLevel2.id})}
                    />
                  )
                })
              }
            </List.Accordion>
          )
        }
      )}
    </ScrollView>
  )
}