react-native#ActionSheetIOS JavaScript Examples

PickerSheet = ({
  onValueChange,
  currentOption,
  testID,
  cancelLabel = 'cancel',
  options
}) => {
  const { t } = useTranslation()
  const translatedCancelLabel = t(cancelLabel)

  const changeOption = useCallback(() => {
    const optionLabels = options.map(option => option.label)

    return ActionSheetIOS.showActionSheetWithOptions(
      {
        options: [translatedCancelLabel, ...optionLabels],
        cancelButtonIndex: 0
      },
      buttonIndex => {
        if (buttonIndex > 0) {
          onValueChange(options[buttonIndex - 1].value)
        }
      }
    )
  }, [translatedCancelLabel, options, onValueChange])

  return (
    <View>
      <Button
        onPress={changeOption}
        title={currentOption.label || currentOption.value}
        testID={testID}
      />
    </View>
  )
}

CatalogScreenActionIcon = () => {
  const handlePress = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Placeholder Action', 'Placeholder Action', 'Placeholder Action'],
        destructiveButtonIndex: 3,
        cancelButtonIndex: 0,
        userInterfaceStyle: 'dark',
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          // cancel action
        } else if (buttonIndex === 1) {
          // renameAlert();
        } else if (buttonIndex === 2) {
          // duplicateAlert();
        } else if (buttonIndex === 3) {
          // if (collectionsCount <= 1) {
          //   deleteErrorAlert();
          // } else {
          //   deleteCollectionAlert();
          // }
        }
      },
    );
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <Entypo name="dots-three-vertical" size={24} color={Colors.darkgrey} />
    </TouchableOpacity>
  );
}

Main = props => {

  const
    [loading, setLoading] = useState(true),
    [dataList, setDataList] = useState([]),
    { state, dispatch } = useContext(Context),
    [originalList, setOriginalList] = useState([])

  const fetchData = async () => {
    setLoading(true)

    let statusList = await createList()

    dispatch({ type: "SET_DATA", mapData: statusList[0] })

    setOriginalList(statusList)
    setDataList(statusList[0])
    setLoading(false)
  }

  useEffect(() => { fetchData() }, [])

  searchByName = text => {
    let filteredList = originalList[0].filter(item => {
      const itemData = item.country.toUpperCase()
      const textData = text.toUpperCase()

      return itemData.indexOf(textData) > -1
    })

    setDataList(filteredList)
  }

  renderListHeader = () => {
    return (
      <View style={styles.main.header}>
        <Text style={styles.main.sortTitle}>{state.language.sort.label}: </Text>

        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => setDataList([...originalList[1].reverse()])}>
          <Image source={require('../assets/sort.png')} style={[styles.main.sort.image, { tintColor: 'orange' }]} />
          <Text style={[styles.main.sort.title, { color: 'orange' }]}>{state.language.sort.sort[0]}</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => setDataList([...originalList[2].reverse()])}>
          <Image source={require('../assets/sort.png')} style={[styles.main.sort.image, { tintColor: 'red' }]} />
          <Text style={[styles.main.sort.title, { color: 'red' }]}>{state.language.sort.sort[1]}</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => setDataList([...originalList[3].reverse()])}>
          <Image source={require('../assets/sort.png')} style={[styles.main.sort.image, { tintColor: 'green' }]} />
          <Text style={[styles.main.sort.title, { color: 'green' }]}>{state.language.sort.sort[2]}</Text>
        </TouchableOpacity>
      </View>
    )
  }

  renderCountries = ({ item }) => <DataItem item={item} onPress={() => props.navigation.navigate('Detail', { data: JSON.stringify(item) })} />

  renderSeperator = () => <View style={styles.main.seperator} />

  renderEmpty = () => {
    return (
      loading ?
        <View style={{ flex: 1 }} />
        :
        <View style={styles.center}>
          <Image source={require('../assets/search.png')} style={styles.main.noResult.image} />
          <Text style={styles.main.noResult.title}>{`Aramanıza uygun sonuç yok\nYa da ne mutlu ki o ülkede vaka yok.`}</Text>
        </View>
    )
  }

  changeLanguage = () => {
    // It will work only for iOS. Can be converted for Android as modal.
    ActionSheetIOS.showActionSheetWithOptions({
      options: ['Vazgeç', 'Türkçe', 'English'],
      cancelButtonIndex: 0,
      // tintColor: 'rgb(242, 63, 52)',

    },
      (index) => {
        if (index === 1)
          dispatch({ type: "CHANGE_LANG", selectedLang: 'tr' })

        else if (index === 2)
          dispatch({ type: "CHANGE_LANG", selectedLang: 'en' })

      }
    )
  }

  return (
    <SafeAreaView style={styles.mainContainer}>

      <SearchBar label={state.language.search} onSearch={searchByName} changeLang={changeLanguage} />

      {
        loading && !dataList.length ?
          <MainLoader />
          :
          <FlatList
            data={dataList}
            refreshing={loading}
            initialNumToRender={10}
            onRefresh={fetchData}
            renderItem={renderCountries}
            ListEmptyComponent={renderEmpty}
            ListHeaderComponent={renderListHeader}
            contentContainerStyle={{ flexGrow: 1 }}
            ItemSeparatorComponent={renderSeperator}
            keyExtractor={(_, index) => index.toString()}
          />
      }
    </SafeAreaView>
  )
}

CollectionRowActionIcon = ({
  collections,
  collectionId,
  collectionLabel,
  collectionsCount,
  updateIsAddingNewCollectionAction,
  selectCollectionAction,

}) => {
  const [collectionsDialogText, setCollectionsDialogText] = useState(null);
  const navigation = useNavigation();

  const handlePress = () => {
    if (collections[collectionId].preBuilt) {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: [
            'Cancel',
            CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DUPLICATE].title,
          ],
          cancelButtonIndex: 0,
          userInterfaceStyle: 'dark',
        },
        (buttonIndex) => {
          if (buttonIndex === 0) {
          // cancel action
          } else if (buttonIndex === 1) {
            setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DUPLICATE]);
          }
        },
      );
    } else {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: [
            'Cancel',
            'Edit Collection',

            CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.RENAME].title,
            CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DUPLICATE].title,
            CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DELETE].title,
          ],
          destructiveButtonIndex: 4,
          cancelButtonIndex: 0,
          userInterfaceStyle: 'dark',
        },
        (buttonIndex) => {
          if (buttonIndex === 0) {
          // cancel action
          } else if (buttonIndex === 1) {
            selectCollectionAction(collectionId);
            updateIsAddingNewCollectionAction(false);
            navigation.navigate('CollectionInput');
          } else if (buttonIndex === 2) {
            setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.RENAME]);
          } else if (buttonIndex === 3) {
            setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DUPLICATE]);
          } else if (buttonIndex === 4) {
            if (collectionsCount <= 1) {
              setCollectionsDialogText(
                CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DELETE_ERROR],
              );
            } else {
              setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DELETE]);
            }
          }
        },
      );
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handlePress}>
        <Entypo name="dots-three-vertical" size={20} color={Colors.headerIcon} />
      </TouchableOpacity>
      {collectionsDialogText && (
        <CollectionsDialog
          collectionId={collectionId}
          collectionLabel={collectionLabel}
          collectionsDialogText={collectionsDialogText}
          setCollectionsDialogText={setCollectionsDialogText}
        />
      )}
    </View>
  );
}