react-native-touch-filler
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

React Native Touch Filler

A React-Native component that makes a view touchable

npm i react-native-touch-filler

Links:

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:

gif1

gif2

gif3

gif4

gif5

gif6

Props:

Prop Is Optional Type Functionality Default Value

...props

Optional

Props of Pressable

onPress

Optional

| 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 Optional number
`zIndex` of the TouchFiller
1
style Optional

StyleProp<ViewStyle>

The style undefined
color Optional string Color of the ripple (Android) "grey"
borderless Optional boolean
  • 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
true
withoutRipple Optional boolean
  • false (default): displas ripple for android
  • true: turns off the ripple
false

Package Sidebar

Install

npm i react-native-touch-filler

Weekly Downloads

1

Version

0.0.9

License

MIT

Unpacked Size

27.2 kB

Total Files

15

Last publish

Collaborators

  • omar_thinks