react-native-elements#ListItem JavaScript Examples

ListItemComponent = props => {
  const colorScheme = useColorScheme();
  return (
    <ListItem
      {...props}
      onPress={() => {
        if (typeof props?.onPress === 'function') props?.onPress();
        if (typeof props?.switch?.onValueChange === 'function') props?.switch?.onValueChange();
      }}
    >
      {props.leftIcon && <View style={[styles.icon, colorScheme === 'light' ? null : styles.icon_dark]}>{props.leftIcon}</View>}
      <ListItem.Content style={colorScheme === 'light' ? null : styles.container_dark}>
        <ListItem.Title style={colorScheme === 'light' ? styles.title : styles.title_dark}>{props.title}</ListItem.Title>
        {props.subtitle && (
          <Text style={[styles.subtitle, colorScheme === 'light' ? null : styles.subtitle_dark]}>{props.subtitle}</Text>
        )}
      </ListItem.Content>
      {props.rightIcon && <View style={[styles.icon, colorScheme === 'light' ? null : styles.icon_dark]}>{props.rightIcon}</View>}
      {!isWeb() && props.switch && <Switch {...props.switch} />}
      {isWeb() && props.switch && <View><Text>{props?.switch?.value ? "On" : "Off"}</Text></View>}
      {props.picker && <RNPickerSelect style={pickerStyles} {...props.picker} />}
    </ListItem>
  )
}

ListItemPlayground = () => {
  const params = useView({
    componentName: "ListItem",
    props: {
      children: {
        type: PropTypes.ReactNode,
        value: `<Avatar source={{uri: "https://avatars0.githubusercontent.com/u/32242596?s=460&u=1ea285743fc4b083f95d6ee0be2e7bb8dcfc676e&v=4"}} /> 
          <ListItem.Content>
            <ListItem.Title><Text>Pranshu Chittora</Text></ListItem.Title>
            <ListItem.Subtitle><Text>React Native Elements</Text></ListItem.Subtitle>
          </ListItem.Content>`,
      },
      bottomDivider: {
        type: PropTypes.Boolean,
        value: false,
      },
      Component: {
        type: PropTypes.Object,
        value: `TouchableHighlight`,
        description:
          "View or TouchableHighlight (default) if onPress method is added as prop",
      },
      containerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      disabled: {
        type: PropTypes.Boolean,
        value: false,
      },
      disabledStyle: {
        type: PropTypes.Object,
        value: `{opacity:0.5}`,
      },
      onLongPress: {
        type: PropTypes.Function,
        value: `() => console.log("onLongPress()")`,
      },
      onPress: {
        type: PropTypes.Function,
        value: `() => console.log("onLongPress()")`,
      },
      pad: {
        type: PropTypes.Number,
        value: 20,
      },
      topDivider: {
        type: PropTypes.Boolean,
        value: false,
      },
      ViewComponent: {
        type: PropTypes.Object,
        value: ``,
        description: "ontainer for linear gradient (for non-expo user)",
      },
    },
    scope: {
      ListItem,
      Avatar,
      Text,
      TouchableHighlight,
    },
    imports: {
      "react-native-elements": {
        named: ["ListItem", "Avatar"],
      },
      "react-native": {
        named: ["TouchableHighlight"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}

Result = (props) => {
    const [downloadTask, setDownloadTask] = useState(null);
    const [isDownloading, setIsDownloading] = useState(false);
    const [downloadDestinationPath, setDownloadDestinationPath] = useState(null);
    const [downloadDetails, setDownloadDetails] = useState({
        total: 0,
        received: 0,
    });

    // Get var from navigator
    const {type, content} = props.route.params;

    // list different items to display
    let mediaDetails = null, newMediaDetails = null;
    if (content.mediaDetails)
        mediaDetails = getDetailsFromMedia(content.mediaDetails, content.mediaType);
    if (content.newMediaDetails)
        newMediaDetails = getDetailsFromMedia(content.newMediaDetails, content.newMediaType);

    /**
     * Handle download whether remote or local file
     * @returns {Promise<void>}
     */
    const handleDownload = async () => {
        // Get proper source media
        const sourceMediaDetails = content.newMediaDetails
            ? content.newMediaDetails
            : content.mediaDetails;

        // Get source media type
        const mediaType = content.newMediaDetails ? content.newMediaType : content.mediaType;

        // Set android base path
        const androidBasepath = mediaType === 'audio' ? FS.dirs.MusicDir : FS.dirs.MovieDir;

        // Get basepath according to platform
        const basepath = Platform.OS === 'android'
            ? androidBasepath : FS.dirs.LibraryDir;

        // Create destination filename
        let destinationFileFullPath = `${basepath}/${sourceMediaDetails.filename}.${sourceMediaDetails.extension}`;

        // Check if the file already exits
        const isDestinationFileExist = await FS.exists(destinationFileFullPath).catch(() => true);

        if (isDestinationFileExist) {
            // Give random name in case original name already exits
            destinationFileFullPath = `${basepath}/${Date.now()}.${sourceMediaDetails.extension}`;
        }

        // Save resources to state in order to be able to stop remote downloading
        setDownloadDestinationPath(destinationFileFullPath);

        // Ask permission to access file
        const _isFilePermissionGranted = await isFilePermissionGranted();

        // The following line is NOT a mistake
        if (_isFilePermissionGranted === false) {
            toast.error("You need to grant permission in order to continue");
            return;
        } else if (_isFilePermissionGranted === null) {
            toast.error("An error occur asking permission. Please try again later");
            return;
        }

        try {
            // Check if the media's source is a remote one
            if (sourceMediaDetails.isRemoteMedia) {
                setIsDownloading(true);
                // Initiate downloading
                const task = RNFetchBlob.config({path : destinationFileFullPath})
                    .fetch('GET', sourceMediaDetails.path);

                // Save in order to be able to cancel later
                setDownloadTask(task);

                // Download the file
                await task.progress((received, total) => {
                        setDownloadDetails({
                            total,
                            received,
                        });
                    });
            } else {
                // Copy the file instead
                await FS.cp(sourceMediaDetails.path, destinationFileFullPath);
            }

            // Hide download box
            setIsDownloading(false);
            setDownloadDetails({
                bytesWritten: 0,
                contentLength: 0,
            });

            if (Platform.OS === 'android') {
                toast.success(`File downloaded successfully. You can get it into ${mediaType === 'audio' ? 'Music' : 'Movies'} folder`);
            } else {
                toast.success(`File downloaded successfully. You can get it into library folder`);
            }
        } catch (e) {}
    };

    /**
     * Handle stop download action
     * @returns {Promise<void>}
     */
    const stopDownload = async () => {
        try {
            if (downloadTask && downloadDestinationPath) {
                downloadTask.cancel(() => {
                    toast.success("The download was stopped.");
                    setIsDownloading(false);
                    setDownloadDetails({
                        bytesWritten: 0,
                        contentLength: 0,
                    });
                });
            }
        } catch (e) {
            toast.error("An error occur while stopping download");
        }
    };

    /**
     * Left component on header
     * @returns {*}
     */
    const renderLeftComponent = () => {
        return (
            <TouchableOpacity
                onPress={() => props.navigation.goBack()}
                hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}
            >
                <Icon
                    name='arrowleft'
                    type="antdesign"
                    color={COLORS.White}
                />
            </TouchableOpacity>
        );
    };

    /**
     * Right component on header
     * @returns {*}
     */
    const renderRightComponent = () => {
        // Hide download button while downloading or when result is a text instead
        if (isDownloading || type === 'text') {
            return <View />
        }

        return (
            <Button
                icon={
                    <Icon
                        name="download"
                        type="antdesign"
                        size={15}
                        color="white"
                        style={{
                            marginLeft: 5
                        }}
                    />
                }
                iconRight
                title="Download"
                onPress={handleDownload}
            />
        );
    };

    return (
        <View style={{flex: 1}}>
            <Header
                placement="left"
                leftComponent={renderLeftComponent()}
                centerComponent={{ text: 'Result', style: { color: COLORS.White, fontSize: 20 } }}
                rightComponent={renderRightComponent()}
            />
            {isDownloading && (
                <SimpleProgressBar
                    onCancelPress={stopDownload}
                    completed={getPercentage(downloadDetails.received, downloadDetails.total)}
                />
            )}
            {type === 'text' ? (
                <ScrollView style={styles.container}>
                    {
                        mediaDetails && mediaDetails.map((detail, i) => (
                            <ListItem key={i} bottomDivider>
                                <ListItem.Content>
                                    <ListItem.Title>{detail[0]}</ListItem.Title>
                                    <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                </ListItem.Content>
                            </ListItem>
                        ))
                    }
                </ScrollView>
            ) : (
                <View style={styles.container}>
                    <MediaPlayer
                        style={styles.video}
                        resizeMode={'contain'}
                        source={{uri: content.url}}
                    />
                    <ScrollView style={styles.scrollView}>
                        <View style={styles.scrollViewWrapper}>
                            <View style={styles.sideView}>
                                <Text style={styles.introText}>Media details <Text style={{fontWeight: 'bold'}}>before</Text> action</Text>
                                {
                                    mediaDetails && mediaDetails.map((detail, i) => {
                                        return (
                                            <ListItem key={i} bottomDivider>
                                                <ListItem.Content>
                                                    <ListItem.Title>{detail[0]}</ListItem.Title>
                                                    <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                                </ListItem.Content>
                                            </ListItem>
                                        );
                                    })
                                }
                            </View>
                            <View style={styles.centerView}>
                                <View style={styles.dividerBar} />
                            </View>
                            <View style={styles.sideView}>
                                <Text style={styles.introText}>Media details <Text style={{fontWeight: 'bold'}}>after</Text> action</Text>
                                {
                                    newMediaDetails && newMediaDetails.map((detail, i) => (
                                        <ListItem key={i} bottomDivider>
                                            <ListItem.Content>
                                                <ListItem.Title>{detail[0]}</ListItem.Title>
                                                <ListItem.Subtitle>{detail[1]}</ListItem.Subtitle>
                                            </ListItem.Content>
                                        </ListItem>
                                    ))
                                }
                            </View>
                        </View>
                    </ScrollView>
                </View>
            )}
        </View>
    );
}

ProductListScreen = ({ navigation, route, dispatch, productsList, saving, minimumPriceRange, maximumPriceRange, meta, pageIndex }) => {
  const [isSortOverlayVisible, setIsSortOverlayVisible] = React.useState(false)

  const productsSortList = [
    { 
      title: 'Price: lowest to high',
      onPress: () => setProductListLowToHigh()
    },
    {
      title: 'Price: highest to low',
      onPress: () => setProductListHighToLow()
    },
    {
      title: 'Cancel',
      containerStyle: { backgroundColor: colors.error },
      titleStyle: { color: 'white' },
      onPress: () => setIsSortOverlayVisible(false),
    },
  ];

  const setProductListHighToLow = () => {
    productsList.sort((a, b) => a.price < b.price ? 1 : -1)
    setIsSortOverlayVisible(false)
  }

  const setProductListLowToHigh = () => {
    productsList.sort((a, b) => a.price > b.price ? 1 : -1)
    setIsSortOverlayVisible(false)
  }
  
  const handleEndReached = () => {
    const response = dispatch(setPageIndex(pageIndex + 1))
    handleProductsLoad(response.payload)
  }

  const handleProductsLoad = (pageIndexAfterDispatch = null) => {
    dispatch(getProductsList(null, {
      pageIndex: pageIndexAfterDispatch || pageIndex,
      filter: {
        name: route.params?.searchQuery || '',
        price: `${minimumPriceRange},${maximumPriceRange}`,
        taxons: route.params.id
      }
    }))
  }

  React.useEffect(() => {
    handleProductsLoad()
    return () => {
      dispatch(resetProductsList())
      dispatch(setPageIndex(1))
    }
  }, [route.params])

  React.useEffect(() => {         //Reset products filter only upon component unmount
    return () => {
      dispatch(resetProductsFilter())
    }
  }, [])

  const handleProductLoad = async (id) => {
    await dispatch(getProduct(id))
    navigation.navigate('ProductDetail')
  }

  const newJustInRenderItem = ({ item }) => {
    return (
      <FlatListImageItem
        key={item.id}
        item={item}
        onPress={() => handleProductLoad(item.id)}
        imageStyle={styles.newJustInImage}
        itemContainerStyle={styles.newJustInItemContainer}
      />
    )
  }

  if(saving) {
    return (
      <ActivityIndicatorCard />
    )
  } else
  return (
    <>
      <View style={styles.filterContainer}>
        <TouchableOpacity style={styles.filterBlock} onPress={() => setIsSortOverlayVisible(true)} >
          <SortAZ size={22} style={{ color: colors.black }}/>
          <Text style={globalStyles.latoRegular14}>Sort</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.filterBlock, { borderWidth: 2 }]} onPress={() => navigation.navigate('FiltersTabNavigator', {titie: route.params.title})}>
          <Filters size={22} style={{ color: colors.black,
            transform: [{ rotate: "90deg" }]
          }} />
          <Text style={globalStyles.latoRegular14}> Filter</Text>
        </TouchableOpacity>
      </View>
      <View style={[globalStyles.containerFluid, globalStyles.mt24]}>
        <FlatList
          data={productsList}
          keyExtractor={item => item.id}
          renderItem={newJustInRenderItem}
          numColumns={2}
          onEndReachedThreshold={0.3}
          onEndReached={() => {
            meta.total_count !== productsList.length && handleEndReached()
          }}
          ListFooterComponent={() => meta.total_count !== productsList.length && <ActivityIndicator size="large" /> }
        />
      </View>
      <BottomSheet isVisible={isSortOverlayVisible}>
        {productsSortList.map((l, i) => (
          <ListItem key={i} containerStyle={l.containerStyle} onPress={l.onPress}>
            <ListItem.Content>
              <ListItem.Title style={l.titleStyle}>{l.title}</ListItem.Title>
            </ListItem.Content>
          </ListItem>
        ))}
      </BottomSheet>
    </>
  )
}