react-native-gesture-handler#TouchableOpacity TypeScript Examples

EmptyStates = ({ navigation }: any) => {
  const emptyScreenComponentScreens = [
    'EmptyStateGeneric',
    'EmptyStateMFWatchlist',
    'EmptyStateStocksWatchlist',
    'EmptyStateOrders',
    'EmptyStateMFDashboard',
    'EmptyStateStocksDashboard',
    'EmptyStateCart',
  ];
  const Colors = useColors();
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        {emptyScreenComponentScreens.map((item) => (
          <TouchableOpacity
            onPress={() => navigation.navigate(item)}
            style={[
              styles.navButtonContainer,
              { borderBottomColor: Colors.font_3 },
            ]}
            key={item}
          >
            <Text style={{ color: Colors.font_1 }}>{item}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

export function RadioButton(props: Props) {
  const styles = useStyles();

  const { children, selected, disabled, onPress } = props;

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={0.8}
    >
      {selected ? (
        <Icon name="CheckCircle" size="m" />
      ) : (
        <View style={styles.circle} />
      )}
      <View style={[styles.labelContainer, disabled && { opacity: 0.5 }]}>
        {children}
      </View>
    </TouchableOpacity>
  );
}

function Options() {
  const navigation = useNavigation<NavigationProperty>();
  const envs = useEnv();

  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 20,
        marginTop: 10,
      }}>
      <TouchableOpacity
        style={{flexDirection: 'row', alignItems: 'center'}}
        onPress={() => {
          navigation.navigate(Screens.DEVICES_SCREEN);
          // Custom title can be set in this way. However, this will not be reverted when going back
          navigation.setParams({title: 'Devices'});
        }}>
        <IconButton icon="bluetooth" size={30} style={{marginRight: -5}} />
        <CPMText>PAIR DEVICE</CPMText>
      </TouchableOpacity>
      {(Platform.OS === 'android' && envs['GoogleFit']) ||
      (Platform.OS === 'ios' && envs['AppleHealth']) ? (
        <TouchableOpacity
          style={{flexDirection: 'row', alignItems: 'center'}}
          onPress={() => {
            navigation.navigate(Screens.PROVIDERS_SCREEN);
          }}>
          <IconButton icon="sync" size={30} style={{marginRight: -5}} />
          <CPMText>{sync}</CPMText>
        </TouchableOpacity>
      ) : (
        <></>
      )}
    </View>
  );
}

function Device(props: {
  device: IHealthDevice;
  connect: (deviceId: string) => Promise<void>;
}) {
  const {connect, device} = props;
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        height: 65,
        marginHorizontal: 16,
        marginVertical: 5,
        padding: 20,
        ...DefaultStyles.elevated,
        backgroundColor: 'white',
      }}>
      <TouchableOpacity
        style={{flexDirection: 'column', justifyContent: 'center'}}
        onPress={() => connect(device.id)}>
        <Name style={DefaultStyles.itemName}>
          {device.name.length > MAX_NAME_LENGTH
            ? device.name.substring(0, MAX_NAME_LENGTH - 3) + '...'
            : device.name}
        </Name>
        <Detail>{device.type === 'simulated' ? SIMULATED : REAL}</Detail>
      </TouchableOpacity>
      <View
        style={{
          flex: 1,
          alignItems: 'flex-end',
        }}>
        {device.paired ? null : (
          <Action style={{fontWeight: 'bold'}}>PAIR</Action>
        )}
      </View>
    </View>
  );
}

ChannelTag = ({
	channel,
	selected,
	onPress,
}: {
	channel: SourceTag | undefined;
	selected: boolean;
	onPress: () => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);

	return (
		<TouchableOpacity
			style={{alignItems: "center", marginHorizontal: 6}}
			onPress={onPress}
			disabled={selected}>
			<Text
				style={{
					fontSize: 15,
					color: selected ? colors.primaryLight : colors.text,
				}}>
				{getStr(channel ?? "all")}
			</Text>
			<View
				style={{
					height: 2,
					width: 12,
					borderRadius: 1,
					margin: 2,
					backgroundColor: selected ? colors.primaryLight : undefined,
				}}
			/>
		</TouchableOpacity>
	);
}

Button: React.FC<Props> = ({ label, onPress, style, children }) => {
  return (
    <TouchableOpacity activeOpacity={0.8} {...{ style, onPress }}>
      {!children && (
        <Box flex={1} justifyContent="center" alignItems="center">
          <Text>{label}</Text>
        </Box>
      )}
      {children && children}
    </TouchableOpacity>
  );
}

CustomButton = ({ text, onPress }: CustomButtonProps) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.container}>
        <Text style={styles.text}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
}

CloseButton = ({ onClose }) => (
  <TouchableOpacity
    activeOpacity={0.8}
    onPress={() => {
      onClose()
    }}
  >
    <EvilIcons name="close" color="white" size={48} />
  </TouchableOpacity>
)

Cell: React.FC<CellProps> = ({ children, onPress }) => {
  const { editorForeground } = useTheme();
  return (
    <TouchableOpacity
      style={{
        borderBottomColor: editorForeground,
        borderBottomWidth: 1,
        padding: 16,
      }}
      onPress={onPress}
    >
      <MyText style={{ fontSize: 18 }}>{children}</MyText>
    </TouchableOpacity>
  );
}

PrimaryButton: FC<Props> = ({
  loading,
  white,
  disabled,
  title,
  onPress
}) => {
  return (
    <TouchableOpacity
      activeOpacity={0.9}
      disabled={loading || disabled}
      onPress={onPress}>
      <Button white={white} disabled={loading || disabled}>
        <ButtonText white={white} disabled={loading || disabled}>
          {title}
        </ButtonText>
        {loading ? <Loading /> : null}
      </Button>
    </TouchableOpacity>
  )
}

RefreshButton : React.FC<Props> = (props) => {

    let rotation = new Animated.Value(0)
    const animation = Animated.loop(Animated.timing(rotation, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true,
      })).start()

    const spin = rotation.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    })

    return (
    <View>
        <TouchableOpacity onPress={props.pressed} style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Animated.Image style={[styles.icon, {transform: props.refeshing ? [{rotate: spin}] : []}]} source={require('../assets/images/refresh.png')} />
        </TouchableOpacity>
    </View>
    );
}

BasicRTL = () => {
  // styles
  const containerStyle = {
    paddingVertical: SEPARATOR_SIZE * 2,
    backgroundColor: '#111',
  };

  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#dfdfdf'}
      />
    </TouchableOpacity>
  );
  return (
    <View style={styles.root}>
      <View style={containerStyle}>
        <StickyItemFlatList
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          isRTL={true}
          stickyItemBackgroundColors={['#222', '#2d88ff']}
          stickyItemContent={BasicSticky}
          onStickyItemPress={handleStickyItemPress}
          data={data}
          renderItem={renderItem}
        />
      </View>
    </View>
  );
}

AnimatedTouchableOpacity: React.FC<
  Animated.AnimateProps<ViewStyle, TouchableOpacityProps>
> = Animated.createAnimatedComponent(TouchableOpacity) as any

FacebookStories = () => {
  // styles
  const containerStyle = {
    paddingVertical: SEPARATOR_SIZE,
    backgroundColor: 'white',
  };

  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#dfdfdf'}
      />
    </TouchableOpacity>
  );
  return (
    <View style={styles.root}>
      <View style={containerStyle}>
        <StickyItemFlatList
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          stickyItemBackgroundColors={['#F8F8FA', '#fff']}
          stickyItemContent={FacebookStickyStory}
          onStickyItemPress={handleStickyItemPress}
          data={data}
          renderItem={renderItem}
        />
      </View>
    </View>
  );
}

FacebookStoriesRTL = () => {
  // styles
  const containerStyle = {
    paddingVertical: SEPARATOR_SIZE * 2,
    backgroundColor: '#111',
  };

  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#333'}
      />
    </TouchableOpacity>
  );
  return (
    <View style={styles.root}>
      <View style={containerStyle}>
        <StickyItemFlatList
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          stickyItemBackgroundColors={['#222', '#000']}
          stickyItemContent={props => (
            <FacebookStickyStory {...props} theme="dark" />
          )}
          onStickyItemPress={handleStickyItemPress}
          isRTL={true}
          data={data}
          renderItem={renderItem}
        />
      </View>
    </View>
  );
}

FacebookStoriesStyled = () => {
  // styles
  const containerStyle = {
    paddingVertical: SEPARATOR_SIZE * 2,
    backgroundColor: '#111',
  };

  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#333'}
      />
    </TouchableOpacity>
  );
  return (
    <View style={styles.root}>
      <View style={containerStyle}>
        <StickyItemFlatList
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          stickyItemBackgroundColors={['#222', '#000']}
          stickyItemContent={props => (
            <FacebookStickyStory {...props} theme="dark" />
          )}
          onStickyItemPress={handleStickyItemPress}
          data={data}
          renderItem={renderItem}
        />
      </View>
    </View>
  );
}

HabitList: FC<Props> = ({ refreshControl, footer, header }) => {
  const dispatch = useAppDispatch()
  const navigation = useNavigation()
  const sections = useAppSelector(getHabitSections)

  const renderItem: SectionListRenderItem<Habit, unknown> = ({
    item,
    index
  }) => <HabitCard key={index} habit={item} />

  const goToHabits = () => {
    navigation.navigate('Habits')
  }

  const toggleModal = () => {
    dispatch(toggleNewHabitModal(true))
  }

  return (
    <List
      refreshControl={refreshControl}
      ListHeaderComponent={() => (
        <Fill>
          {header}
          <TitleRow>
            <TitleContainer>
              <H3>HABIT.HABIT_TITLE</H3>
            </TitleContainer>
            <NewHabitButton onPress={toggleModal}>
              <IconBold
                width={20}
                height={20}
                name="circleAdd"
                fill={colors.darkBlue}
              />
            </NewHabitButton>
          </TitleRow>
        </Fill>
      )}
      keyExtractor={(item) => item.title}
      sections={sections}
      renderItem={renderItem}
      ListFooterComponent={() => (
        <FooterRow>
          <TouchableOpacity onPress={goToHabits}>
            <ShowAllText>SEE_ALL</ShowAllText>
          </TouchableOpacity>
          {footer}
        </FooterRow>
      )}
    />
  )
}

NewHabitButton = styled.TouchableOpacity`
  padding: 3px;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
`

StatusIndicator = ({has}: PropsFromRedux) => {
  let status = ConnectionStatus.VOID;
  if (has.instances.length) {
    const connected = has.instances.filter((e) => e.init && e.connected).length;
    if (connected === 0) {
      status = ConnectionStatus.DISCONNECTED;
    } else if (connected === has.instances.length) {
      status = ConnectionStatus.CONNECTED;
    } else {
      status = ConnectionStatus.PARTIALLY_CONNECTED;
    }
  }

  const styles = getStyles(status);
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.hasContainer}
        onPress={() => {
          navigate('ModalScreen', {
            name: ModalComponent.HAS_INFO,
          });
        }}>
        <Image source={LOGO_DARK} style={{height: 30, width: 30}} />
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => {
          if (status === ConnectionStatus.DISCONNECTED) {
            restartHASSockets();
          }
        }}
        onLongPress={() => {
          clearHAS();
        }}
        style={styles.indicatorView}>
        <Indicator status={status} />
      </TouchableOpacity>
    </View>
  );
}

Balance = ({
  currency,
  account,
  pd,
  globalProperties,
  engine,
  tokenBalance,
  tokenLogo,
  setMax,
}: Props) => {
  let {color, value, logo} = getCurrencyProperties(currency, account);
  let parsedValue = parseFloat(value as string);

  if (pd && value) {
    parsedValue =
      parseFloat(value as string) -
      parseFloat(account.delegated_vesting_shares as string);
    parsedValue = toHP(value as string, globalProperties);
  }
  if (engine) {
    parsedValue = +tokenBalance!;
    logo = tokenLogo!;
  }
  const styles = getDimensionedStyles({
    color,
    ...useWindowDimensions(),
  });
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => {
        setMax(parsedValue.toFixed(3) + '');
      }}>
      <View style={styles.main}>
        <View style={styles.left}>
          <View style={styles.logo}>{logo}</View>
          <Text style={styles.name}>
            {(pd
              ? translate('common.available')
              : translate('common.balance')
            ).toUpperCase()}
          </Text>
        </View>
        <Text style={styles.amount}>
          {formatBalance(parsedValue)}
          <Text style={styles.currency}>{` ${currency}`}</Text>
        </Text>
      </View>
    </TouchableOpacity>
  );
}

ClaimRewards = ({active, props, loadAccount}: PropsFromRedux) => {
  const {account, keys, name} = active;
  if (
    parseFloat(account.reward_hbd_balance + '') ||
    parseFloat(account.reward_hive_balance + '') ||
    parseFloat(account.reward_vesting_balance + '')
  )
    return (
      <TouchableOpacity
        style={styles.touchable}
        onPress={async () => {
          if (!keys.posting) {
            SimpleToast.show(
              translate('wallet.claim.error_posting'),
              SimpleToast.LONG,
            );
            return;
          }
          try {
            const res = await claimRewards(keys.posting, {
              account: name,
              reward_hbd: account.reward_hbd_balance,
              reward_hive: account.reward_hive_balance,
              reward_vests: account.reward_vesting_balance,
            });
            console.log(res);
            if (res) {
              const rewards = [
                account.reward_hbd_balance,
                account.reward_hive_balance,
                `${toHP(
                  account.reward_vesting_balance + '',
                  props.globals,
                ).toFixed(3)} HP`,
              ].filter((e) => parseFloat(e + ''));
              let str;
              if (rewards.length > 1)
                str =
                  rewards.slice(0, -1).join(',') + ' and ' + rewards.slice(-1);
              else str = rewards[0];
              SimpleToast.show(
                translate('wallet.claim.success', {rewards: str}),
                SimpleToast.LONG,
              );
              loadAccount(name);
            }
          } catch (e) {
            SimpleToast.show(
              translate('common.error', {msg: e}),
              SimpleToast.LONG,
            );
          }
        }}>
        <ClaimIcon width={25} height={25} />
      </TouchableOpacity>
    );
  else return null;
}

ColorPicker = ({
  colors,
  style,
  onColorSelect,
  defaultColorIndex,
}: Props) => {
  const [activeColor, setColor] = useState(colors[defaultColorIndex]);

  return (
    <View style={[styles.container, style]}>
      <Text
        style={{
          fontSize: 16,
          fontWeight: 'bold',
          color: 'black',
          width: '30%',
        }}>
        Color
      </Text>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
        }}>
        {colors.map((color: string, index: number) => (
          <TouchableOpacity
            onPress={() => {
              setColor(color);
              animate();
              onColorSelect(color);
            }}
            key={index}
            style={[
              styles.colorBtn,
              {
                padding: activeColor === color ? 4 : 0,
                width: activeColor === color ? 30 : 24,
                height: activeColor === color ? 30 : 24,
                borderRadius: activeColor === color ? 30 / 2 : 24 / 2,
              },
            ]}>
            <View
              style={{
                width: activeColor === color ? 22 : 24,
                height: activeColor === color ? 22 : 24,
                borderRadius: activeColor === color ? 11 : 12,
                backgroundColor: color,
              }}></View>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

ConfigurableOptionValues = ({
  values,
  optionCode,
  selectedIndex,
  handleSelectedConfigurableOptions,
}: Props): React.ReactElement => {
  const { theme } = useContext(ThemeContext);

  const renderValue = (value: ConfigurableProductOptionValueType) => {
    const selected = selectedIndex === value.valueIndex;
    switch (value.swatchData.__typename) {
      case 'ColorSwatchData': {
        return (
          <>
            <View
              style={{
                width:
                  DIMENS.productDetailScreen.configurableOptionValueBoxSize,
                height:
                  DIMENS.productDetailScreen.configurableOptionValueBoxSize,
                backgroundColor: value.swatchData.value,
              }}
            />
            {selected ? (
              <View style={styles.selectedColor}>
                <Icon type="ionicon" name="checkmark" size={24} />
              </View>
            ) : null}
          </>
        );
      }
      case 'TextSwatchData': {
        return (
          <View
            style={[
              styles.selectedText,
              {
                backgroundColor: selected
                  ? theme.colors?.black
                  : theme.colors?.white,
              },
            ]}
          >
            <Text
              style={{
                color: selected ? theme.colors?.white : theme.colors?.black,
              }}
            >
              {value.swatchData.value}
            </Text>
          </View>
        );
      }
      default: {
        return null;
      }
    }
  };

  return (
    <View style={styles.container}>
      {values.map(value => (
        <TouchableOpacity
          key={String(value.valueIndex)}
          onPress={() =>
            handleSelectedConfigurableOptions(optionCode, value.valueIndex)
          }
        >
          <View style={styles.valueContainer}>{renderValue(value)}</View>
        </TouchableOpacity>
      ))}
    </View>
  );
}

Basic = () => {
  const flatListRef = useRef<FlatList>(null);

  // styles
  const containerStyle = {
    paddingVertical: SEPARATOR_SIZE * 2,
    backgroundColor: 'white',
  };

  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
  const handleScrollToEnd = () => {
    const flatlist = flatListRef.current;
    if (flatlist) {
      flatlist.scrollToEnd({ animated: true });
    }
  };
  const handleScrollToStart = () => {
    const flatlist = flatListRef.current;
    if (flatlist) {
      flatlist.scrollToOffset({ animated: true, offset: 0 });
    }
  };
  const handleScrollToIndex = useCallback(index => {
    const flatlist = flatListRef.current;
    if (flatlist) {
      flatlist.scrollToIndex({ index });
    }
  }, []);

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#dfdfdf'}
      />
    </TouchableOpacity>
  );
  return (
    <SafeAreaView style={styles.root}>
      <View style={containerStyle}>
        <StickyItemFlatList
          ref={flatListRef}
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          stickyItemBackgroundColors={['#F8F8FA', '#2d88ff']}
          stickyItemContent={BasicSticky}
          onStickyItemPress={handleStickyItemPress}
          data={data}
          renderItem={renderItem}
        />
      </View>
      <View style={styles.buttons}>
        <Button label="< Scroll To Start" onPress={handleScrollToStart} />
        <Button label="Scroll To End >" onPress={handleScrollToEnd} />
      </View>
      <View style={styles.buttons}>
        <Button label="Scroll To 4" onPress={() => handleScrollToIndex(4)} />
        <Button label="Scroll To 9" onPress={() => handleScrollToIndex(9)} />
        <Button label="Scroll To 14" onPress={() => handleScrollToIndex(14)} />
      </View>
    </SafeAreaView>
  );
}

BasicCustomSeparator = () => {
  // methods
  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');

  // render
  const renderItem = ({ index }: ListRenderItemInfo<{}>) => (
    <TouchableOpacity onPress={() => Alert.alert(`Item ${index} Pressed`)}>
      <DummyItem
        index={index}
        borderRadius={BORDER_RADIUS}
        width={STORY_WIDTH}
        height={STORY_HEIGHT}
        backgroundColor={'#dfdfdf'}
      />
    </TouchableOpacity>
  );

  const renderSeparator = ({ size }: { size: number }) => {
    return (
      <View style={{ width: size }}>
        <View style={styles.separatorLine} />
      </View>
    );
  };
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <StickyItemFlatList
          itemWidth={STORY_WIDTH}
          itemHeight={STORY_HEIGHT}
          separatorSize={SEPARATOR_SIZE}
          borderRadius={BORDER_RADIUS}
          stickyItemWidth={STICKY_ITEM_WIDTH}
          stickyItemHeight={STICKY_ITEM_HEIGHT}
          stickyItemBackgroundColors={['#F8F8FA', '#2d88ff']}
          stickyItemContent={BasicSticky}
          onStickyItemPress={handleStickyItemPress}
          data={data}
          renderItem={renderItem}
          ItemSeparatorComponent={renderSeparator}
        />
      </View>
    </View>
  );
}

SettingsItem: React.FC<Props> = (props) => {


    const multiDeviceSupportSelector = (state: WalletState) => state.multiDeviceSupport
    const multiDeviceSupport = useSelector(multiDeviceSupportSelector)
    const dispatch = useDispatch()

    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    var correctImage = require("../../assets/images/forward.png")

    if (props.label == getTranslated(language).currency) {
        correctImage = require("../../assets/images/currency.png")
    }

    if (props.label == getTranslated(language).language) {
        correctImage = require("../../assets/images/language.png")
    }

    if (props.label == getTranslated(language).seed_phrase) {
        correctImage = require("../../assets/images/eye.png")
    }

    if (props.label == getTranslated(language).exit_wallet) {
        correctImage = require("../../assets/images/exit.png")
    }

    if (props.label == "Support multiple devices") {
        correctImage = require("../../assets/images/laptop.png")
    }

    const updateMultiDeviceSupport = (enable: boolean) => {
        dispatch(setMultiDeviceSupport(enable))
    }

    var labelColor = props.label == getTranslated(language).exit_wallet ? styles.redLabelColor : styles.normalLabelColor


    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => { props.label == "Support multiple devices" ? updateMultiDeviceSupport(!multiDeviceSupport) : props.onClick() }} style={{ flex: 1 }}>
                <View style={styles.labelsContainer}>

                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                        <Image style={styles.icon} source={correctImage} />
                        <Text style={[styles.label, labelColor]}>{props.label}</Text>
                    </View>

                    {(props.label == getTranslated(language).language || props.label == getTranslated(language).currency) &&
                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={styles.subLabel}>{props.subLabel}</Text>
                            <Image style={styles.arrow} source={require("../../assets/images/forward.png")} />
                        </View>
                    }
                    {props.label == "Support multiple devices" &&
                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={styles.subLabel}>{multiDeviceSupport ? "Yes" : 'No'}</Text>
                            {multiDeviceSupport &&
                                <Image style={styles.tick} source={require("../../assets/images/tick.png")} />
                            }
                        </View>
                    }
                </View>
            </TouchableOpacity>
        </View>
    );
}

Receive: React.FC = () => {


    const externalIndexSelector = (state: WalletState) => state.externalIndex
    const externalIndex = useSelector(externalIndexSelector)

    const externalAddressesSelector = (state: WalletState) => state.externalAddresses
    const externalAddresses = useSelector(externalAddressesSelector)

    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    const [address, setAddress] = useState("Address")

    const getExternalAddress = () => {
        for (var i = 0; i < externalAddresses.length; i++) {
            if (externalAddresses[i].index == externalIndex) {
                setAddress(externalAddresses[i].address)
            }
        }
    }

    const copyAddressToClipboard = () => {
        Clipboard.setString(address);
    }

    useEffect(() => {
        getExternalAddress()
    }, [externalIndex])

    return (
        <View style={styles.container}>
            <Header screen={getTranslated(language).receive} />
            <Screen>
                <ScrollView>
                <View>
                    <Text style={styles.subHeadingText}>{getTranslated(language).receive_only + " " + getTranslated(language).address_below}</Text>
                    <View style={styles.textArea}>
                        <Text style={styles.textAreaText}>{address}</Text>
                    </View>
                    <TouchableOpacity onPress={copyAddressToClipboard}>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginVertical: 20, }}>
                            <Image source={require('../assets/images/copy.png')} style={styles.icon} />
                            <Text style={styles.copyText}>{getTranslated(language).copy_button}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.qrContainer}>
                    <LinearGradient style={{ flex: 1 }} useAngle={true} angle={180} angleCenter={{ x: 0.5, y: 0.5 }} colors={['#1f232e', '#13161f']}>
                        <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 15 }}>
                            <QRCode backgroundColor="#1F232E" color="#fff" size={160} value={address} />
                        </View>
                    </LinearGradient>
                </View>
                </ScrollView>
            </Screen>
        </View>
    );
}

CrCaptchaScreen = ({navigation}: {navigation: RootNav}) => {
	const [captcha, setCaptcha] = React.useState("");
	const [processing, setProcessing] = React.useState(false);
	const [imageBase64, setImageBase64] = useState<string>();

	React.useEffect(() => {
		helper.getCrCaptchaUrl().then(uFetch).then(setImageBase64);
	}, []);

	const themeName = useColorScheme();
	const theme = themes(themeName);
	const style = styles(themeName);

	return (
		<View style={style.container}>
			<IconCr width={80} height={80} />
			<View style={{height: 20}} />
			<View style={{flexDirection: "row", alignItems: "center"}}>
				<Icon name="user" size={18} color={theme.colors.primary} />
				<TextInput
					style={style.textInputStyle}
					placeholderTextColor={theme.colors.primary}
					selectionColor={theme.colors.accent}
					value={helper.userId}
					editable={false}
				/>
			</View>
			<View style={{flexDirection: "row", alignItems: "center"}}>
				<Icon name="key" size={18} color={theme.colors.primary} />
				<TextInput
					style={style.textInputStyle}
					placeholder={getStr("captcha")}
					placeholderTextColor={theme.colors.primary}
					selectionColor={theme.colors.accent}
					value={captcha}
					onChangeText={(text) => setCaptcha(text.toUpperCase())}
				/>
			</View>
			<TouchableOpacity
				onPress={() =>
					helper.getCrCaptchaUrl().then(uFetch).then(setImageBase64)
				}>
				<Image
					source={{uri: `data:image/jpg;base64,${imageBase64}`}}
					style={{height: 50, width: 200}}
				/>
			</TouchableOpacity>
			<TouchableOpacity
				style={style.loginButtonStyle}
				disabled={processing}
				onPress={() => {
					setProcessing(true);
					Snackbar.show({
						text: getStr("processing"),
						duration: Snackbar.LENGTH_SHORT,
					});
					helper
						.loginCr(captcha.toUpperCase())
						.then(() => navigation.pop())
						.catch((e) => {
							if (e instanceof CrError) {
								Snackbar.show({
									text: e.message,
									duration: Snackbar.LENGTH_LONG,
								});
							} else {
								NetworkRetry();
							}
							helper.getCrCaptchaUrl().then(uFetch).then(setImageBase64);
						})
						.then(() => setProcessing(false));
				}}>
				<Text style={style.loginButtonTextStyle}>{getStr("confirm")}</Text>
			</TouchableOpacity>
		</View>
	);
}

MatchesStack: React.FC = () => {
  return (
    <Stack.Navigator
      screenOptions={useHeaderOptions()}
      initialRouteName="matchy"
    >
      <Stack.Screen
        options={{ headerShown: false }}
        name="matchy"
        component={MatchesScreen}
      />
      <Stack.Screen
        options={{ title: "Card" }}
        name="viewCard"
        component={ViewCardScreen}
      />
      <Stack.Screen
        options={({ route, navigation }) => ({
          headerTitle: (props) => (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("viewCard", { id: route.params.id })
              }
            >
              <HeaderTitle {...props}>{route.params.displayName}</HeaderTitle>
            </TouchableOpacity>
          ),
          headerRight: ReportUnMatchButton,
        })}
        name="messages"
        component={MessagesScreen}
      />
    </Stack.Navigator>
  );
}