TouchableHighlight e TouchableNativeFeedback

Veremos agora como criar links em componentes que não necessariamente são botões. Inicialmente, vamos copiar o código abaixo para utilizá-lo nesta aula.

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.button}>
        <Text style={styles.text}>Clique aqui!</Text>
      </View>
      <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
  }
})

No código acima, temos um componente clicável, o button, porém, também temos uma View que traz a aparência de um botão, mas não clicável.

TouchableHighlight component

O componente TouchableHighlight envolve algo que o desenvolvedor deseja que seja clicável e poderá executar ações quando clicado, através da propriedade onPress.

Ademais, o TouchableHighlight tem a propriedade underlayColor, que ajusta a cor subjacente ao botão, que por padrão é preto.

Veja abaixo um exemplo de uso do componente:

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

TouchableNativeFeedback component

Além do TouchableHighlight, temos o TouchableNativeFeedback. Esse, porém, deve ser utilizado apenas para dispositivos android que têm o comportamento nativo que o componente busca trazer.

Esse comportamento nativo é uma animação que altera de forma suave a cor do botão ao receber o clique. A cor da animação é definida através da propriedade background.

Acompanhando a aula, implemente essas funcionalidades conforme o código abaixo:

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red')} underlayColor='white' onPress={() => { alert('Clicou aqui!') }}>
        <View style={styles.button}>
          <Text style={styles.text}>Clique aqui!</Text>
        </View>
      </TouchableNativeFeedback>
      <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
  }
})