TouchableOpacity e TouchableWithoutFeedback

Nesta aula vamos abordar outras formas de criar áreas clicáveis sem utilizar necessariamente o componente button.

TouchableOpacity

Esse componente envolve o elemento que pode ser clicado e ao ser pressionado diminui a opacidade, dando um feedback ao usuário.

Veja um exemplo de uso abaixo:

<TouchableOpacity onPress={() => { alert('Clicou aqui!') }}>
        <View style={styles.button}>
          <Text style={styles.text}>Clique aqui!</Text>
        </View>
</TouchableOpacity>

TouchableWithoutFeedback

Quando estamos desenvolvendo um aplicativo que possui botões, na maioria das vezes, queremos que o usuário tenha um feedback ao clicar naquele objeto. Porém, eventualmente, por alguns motivos pontuais, o desenvolvedor pode não querer que o botão tenha esse feedback, daí surge a necessidade de uso do TouchableWithoutFeedback.

Pratique o uso desses componentes desenvolvendo o código abaixo:

import React from 'react';
import { SafeAreaView, Text, StyleSheet, View, Button, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableWithoutFeedback onPress={() => { alert('Clicou aqui!') }}>
        <View style={styles.button}>
          <Text style={styles.text}>Clique aqui!</Text>
        </View>
      </TouchableWithoutFeedback>
      <Button title="Clique aqui!" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: 'powderblue',
    color: 'white',
    margin: 20
  },
  text: {
    color: '#000',
    padding: 15
  }
})