react-native-gesture-handler#BorderlessButton TypeScript Examples

The following examples show how to use react-native-gesture-handler#BorderlessButton. 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: Header.tsx    From happy with MIT License 6 votes vote down vote up 
export default function Header({ title, showCancel = true }: HeaderProps) {
  const navigation = useNavigation();

  function handleGoBackToAppHomePage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15b6d6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      {showCancel ? (
        <BorderlessButton onPress={handleGoBackToAppHomePage}>
          <Feather name="x" size={24} color="#ff669d" />
        </BorderlessButton>
      ) : (
        <View />
      )}
    </View>
  );
}
Example #2
Source File: index.tsx    From nlw2-proffy with MIT License 6 votes vote down vote up 
PageHeader: React.FC<PageHeaderProps> = ({title}) => {

    const {navigate} = useNavigation();

    function handleGoBack() {
        navigate('Landing');
    }

  return <View style={styles.container}>
      <View style={styles.topBar}>
          <BorderlessButton onPress={handleGoBack}>
          <Image source={backIcon} resizeMode="contain" />
          </BorderlessButton>

          <Image source={logoImg} resizeMode="contain" />
      </View>
      <Text style={styles.title}>
          {title}
      </Text>
  </View>
}
Example #3
Source File: index.tsx    From nlw-02-omnistack with MIT License 6 votes vote down vote up 
PageHeader: React.FC<PageHeaderProps> = ({ title, headerRight, children }) => {
  const { navigate } = useNavigation();

  function handleGoBack() {
    navigate('Landing');
  }

  return (
    <View style={styles.container}>
      <View style={styles.topBar}>
        <BorderlessButton onPress={handleGoBack}>
          <Image source={backIcon} resizeMode="contain" />
        </BorderlessButton>

        <Image source={logoImg} resizeMode="contain" />
      </View>

      <View style={styles.header}>
        <Text style={styles.title}>{title}</Text>
        {headerRight}
      </View>

      {children}
    </View>
  )
}
Example #4
Source File: Header.tsx    From nlw-03-omnistack with MIT License 6 votes vote down vote up 
export default function Header({ showCancel = true, title, navigation }: HeaderProps) {
  function handleCancelCreateOrphanage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15B6D6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      { showCancel
        ? (
          <BorderlessButton onPress={handleCancelCreateOrphanage}>
            <Feather name="x" size={24} color="#FF669D" />
          </BorderlessButton>
        )
        : (
          <View />
        ) }
    </View>
  );
}
Example #5
Source File: styles.ts    From NextLevelWeek with MIT License 5 votes vote down vote up 
BackButton = styled(BorderlessButton)``
Example #6
Source File: styles.ts    From NextLevelWeek with MIT License 5 votes vote down vote up 
CloseButton = styled(BorderlessButton)``
Example #7
Source File: ActionComplete.tsx    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up 
SlideAction = styled(BorderlessButton)`
  flex-direction: row;
  align-items: center;
`
Example #8
Source File: HabitCard.tsx    From nyxo-app with GNU General Public License v3.0 4 votes vote down vote up 
HabitCard: FC<Props> = (props) => {
  const ref = useRef<Swipeable>(null)
  const dispatch = useAppDispatch()
  const { habit } = props
  const {
    habit: { period, dayStreak = 0 }
  } = props
  const { color } = getIcon(period)

  const completed = isCompletedToday(habit)

  const toggleCompleted = () => {
    dispatch(markTodayHabitAsCompleted(habit))
    close()
  }

  const editHabit = () => {
    dispatch(draftEditHabit(habit))
    dispatch(toggleEditHabitModal())
  }

  const deleteHabit = () => {
    dispatch(deleteHabitById(habit))
    close()
  }
  const archiveHabit = () => {
    dispatch(archiveHabitThunk(habit))
    close()
  }

  const close = () => {
    // eslint-disable-next-line no-unused-expressions
    ref?.current?.close()
  }

  const renderLeftActions = (
    progress: Animated.Value<number>,
    dragX: Animated.Value<number>
  ) => {
    const animation = interpolate(dragX, {
      inputRange: [0, 100],
      outputRange: [0, 1]
    })
    return (
      <>
        <ActionComplete
          animation={animation}
          direction="LEFT"
          icon="archive"
          buttonText="HABIT.ARCHIVE"
          action={archiveHabit}
        />
        <ActionComplete
          animation={animation}
          direction="LEFT"
          icon="bin"
          buttonText="HABIT.DELETE"
          action={deleteHabit}
        />
      </>
    )
  }

  const renderRightActions = (
    progress: Animated.Value<number>,
    dragX: Animated.Value<number>
  ) => {
    const animation = interpolate(dragX, {
      inputRange: [-150, 0],
      outputRange: [1, 0]
    })

    return (
      <>
        <ActionComplete
          animation={animation}
          direction="RIGHT"
          icon="checkMark"
          buttonText="HABIT.COMPLETE"
          action={toggleCompleted}
        />
      </>
    )
  }

  return (
    <Swipeable
      ref={ref}
      renderLeftActions={renderLeftActions}
      renderRightActions={renderRightActions}>
      <BorderlessButton onPress={editHabit}>
        <Card>
          <PeriodBarIndicator backgroundColor={color} />

          <MiddleSector>
            <PeriodIndicator accent={color}>
              {`HABIT.EVERY_${period.toUpperCase()}`}
            </PeriodIndicator>
            <Separator />
            <TitleHolder completedToday={completed}>{habit.title}</TitleHolder>
            <Separator />
            <DayStreakContainer>
              <IconBold width={12} height={12} name="flame" fill="#adadad" />
              <DayStreak>{dayStreak}</DayStreak>
            </DayStreakContainer>
          </MiddleSector>

          <CheckIconHolder>
            {completed && (
              <IconBold
                width={15}
                height={15}
                name="checkMark"
                fill={colors.darkBlue}
              />
            )}
          </CheckIconHolder>
        </Card>
      </BorderlessButton>
    </Swipeable>
  )
}
Example #9
Source File: index.tsx    From nlw-02-omnistack with MIT License 4 votes vote down vote up 
function TeacherList() {
  const [teachers, setTeachers] = useState([]);
  const [favorites, setFavorites] = useState<number[]>([]);
  const [isFiltersVisible, setIsFiltersVisible] = useState(false);

  const [subject, setSubject] = useState('');
  const [week_day, setWeekDay] = useState('');
  const [time, setTime] = useState('');

  function loadFavorites() {
    AsyncStorage.getItem('favorites').then(response => {
      if (response) {
        const favoritedTeachers = JSON.parse(response);
        const favoritedTeachersIds = favoritedTeachers.map((teacher: Teacher) => {
          return teacher.id;
        })

        setFavorites(favoritedTeachersIds);
      }
    });
  }

  useFocusEffect(() => {
    loadFavorites();
  });

  function handleToggleFiltersVisible() {
    setIsFiltersVisible(!isFiltersVisible);
  }

  async function handleFiltersSubmit() {
    loadFavorites();

    const response = await api.get('classes', {
      params: {
        subject,
        week_day,
        time,
      }
    });

    setIsFiltersVisible(false);
    setTeachers(response.data);
  }

  return (
    <View style={styles.container}>
      <PageHeader 
        title="Proffys disponíveis" 
        headerRight={(
          <BorderlessButton onPress={handleToggleFiltersVisible}>
            <Feather name="filter" size={20} color="#FFF" />
          </BorderlessButton>
        )}
      >
        { isFiltersVisible && (
          <View style={styles.searchForm}>
            <Text style={styles.label}>Matéria</Text>
            <TextInput
              style={styles.input}
              value={subject}
              onChangeText={text => setSubject(text)}
              placeholder="Qual a matéria?"
              placeholderTextColor="#c1bccc"
            />

            <View style={styles.inputGroup}>
              <View style={styles.inputBlock}>
                <Text style={styles.label}>Dia da semana</Text>
                <TextInput
                  style={styles.input}
                  value={week_day}
                  onChangeText={text => setWeekDay(text)}
                  placeholder="Qual o dia?"
                  placeholderTextColor="#c1bccc"
                />
              </View>

              <View style={styles.inputBlock}>
                <Text style={styles.label}>Horário</Text>
                <TextInput
                  style={styles.input}
                  value={time}
                  onChangeText={text => setTime(text)}
                  placeholder="Qual horário?"
                  placeholderTextColor="#c1bccc"
                />
              </View>
            </View>

            <RectButton onPress={handleFiltersSubmit} style={styles.submitButton}>
              <Text style={styles.submitButtonText}>Filtrar</Text>
            </RectButton>
          </View>
        )}          
      </PageHeader>

      <ScrollView
        style={styles.teacherList}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingBottom: 16,
        }}
      >
        {teachers.map((teacher: Teacher) => {
          return (
            <TeacherItem 
              key={teacher.id} 
              teacher={teacher}
              favorited={favorites.includes(teacher.id)}
            />
          )
        })}
      </ScrollView>
    </View>
  );
}