react-native-elements#BottomSheet JavaScript Examples

The following examples show how to use react-native-elements#BottomSheet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: bottomsheet.playground.jsx    From playground with MIT License 6 votes vote down vote up 
BottomSheetPlayground = () => {
  const params = useView({
    componentName: "BottomSheet",
    props: {
      children: {
        type: PropTypes.ReactNode,
        value: `<Text>Some Content</Text>`,
      },
      isVisible: {
        type: PropTypes.Boolean,
        value: false,
      },
      modalProps: {
        type: PropTypes.Object,
        value: `{ presentationStyle: "fullScreen" , visible:true}`,
        description: "Modal Props -> https://reactnative.dev/docs/modal",
      },
      containerStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
    },
    scope: {
      BottomSheet,
      Text,
    },
    imports: {
      "react-native-elements": {
        named: ["BottomSheet", "Text"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}
Example #2
Source File: index.js    From spree-react-native with MIT License 4 votes vote down vote up 
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>
    </>
  )
}