react-native#ActionSheetIOS JavaScript Examples

The following examples show how to use react-native#ActionSheetIOS. 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: index.ios.jsx    From polaris with Apache License 2.0 6 votes vote down vote up 
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>
  )
}
Example #2
Source File: CatalogScreenActionIcon.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: Main.js    From covid-19-app with MIT License 4 votes vote down vote up 
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>
  )
}
Example #4
Source File: CollectionRowActionIcon.js    From discovery-mobile-ui with MIT License 4 votes vote down vote up 
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>
  );
}