@snskar125/rn-ripple

Ripple Effect Component for React Native

Usage

import { StyleSheet, Text, View } from "react-native";
import TouchableRipple from "@snskar125/rn-ripple";

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableRipple
        rippleColor={"rgba(255,255,255,0.5)"}
        style={styles.button}
      >
        <Text style={styles.text}>Button</Text>
      </TouchableRipple>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    backgroundColor: "#6fd5fc",
    paddingVertical: 15,
    paddingHorizontal: 50,
    borderRadius: 30,
  },
  text: {
    color: "#252525",
    fontWeight: "600",
    fontSize: 20,
  },
});

Props

| Prop | Type | | ----------- | ---------------------------------- | | rippleColor | String (Use RGBA for Transparency) | | background | Boolean (Ripple Position) |

All TouchableWithoutFeedback Props