React Native Touch Filler

A React-Native component that makes a view touchable

npm i react-native-touch-filler

Links:

• npm: Package
• GitHub: Repo
• YouTube: Video

Basic Example:

import React from "react";
import { View, Text } from "react-native";
import TouchFiller from "react-native-touch-filler";

const App = () => {
  return (
    <View
      style={{
        alignSelf: "stretch",
        height: 100,
        backgroundColor: "lime",
        margin: 20,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <TouchFiller />

      <Text>Content</Text>
    </View>
  );
};

export default App;

Full Examples:

Full Example code: https://github.com/OmarThinks/react-native-touch-filler/blob/master/src/ExamplesTouchFiller.tsx

import { ExamplesTouchFiller } from "react-native-touch-filler";

const App = () => {
  return (
    <ExamplesTouchFiller
    // Full Example code: https://github.com/OmarThinks/react-native-touch-filler/blob/master/src/ExamplesTouchFiller.tsx
    />
  );
};

export default App;

3) Full Exports

import TouchFiller, { ExamplesTouchFiller } from "react-native-touch-filler";
import type { TouchFillerProps } from "react-native-touch-filler";

4) Examples GIFs:

Props:

...props

Props of Pressable

onPress

| null
| undefined
| ((event: GestureResponderEvent) => void)

• Default value: ()=>{}
• null: do not activate the press or the ripple
• a function: The function the be executed on press, example: ()=>{console.log("Hi")}

()=>{}

`zIndex` of the TouchFiller

StyleProp<ViewStyle>

• true (default): The TouchFiller shouldn't cross the borders of it's parent View
• false: The TouchFiller can cross the borders of it's parent View

• false (default): displas ripple for android
• true: turns off the ripple