0

Im new to React Native. I use react native router. But the links items have this "highlight" when they are pressed. This should be fixed using TouchableWithoutFeedback I cant not get TouchableWithoutFeedback to work with Link items.

How can I make it work?

import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";
import { Link } from "react-router-native";


const Test = () => {
  const [count, setCount] = useState(0);


  const onPress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
             
            <View>
      <TouchableWithoutFeedback onPress={onPress} >
      <Link to={"/cart"}>
     
        <View style={styles.button}>
        
          <Text>Touch Here</Text>
         
        </View>
        </Link>
        </TouchableWithoutFeedback>
        </View>
      
      
    
    </View>
  );
}

export default Test;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});
Nam
  • 11

1 Answers1

0

I was having the same problem I fixed by using the underlayColor prop of the Link component

Here is an example

<Link to={to} underlayColor={"transparent"}>
  <StyledText fontWeight='bold' style={styles.text}>{children}</StyledText>
</Link>
Matiseisdedos
  • 1