npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-material-touch

v1.0.0

Published

Touchable View with Material-style feedback. Uses TouchableNativeFeedback on Android ≥21 and an Animated-based implementation otherwise.

Downloads

2

Readme

react-native-material-touch

A simple touchable View with Material-style feedback for both Android and IOS. On Android ≥21 this Uses TouchableNativeFeedback to provide on Android >21 (Lollipop) to provide the full ripple effect, and on other platforms it animates the view's background color to provide as close a replacement as possible using the Animated API. Unlike the various Touchable components, this always introduces a single View into the layout hierarchy(which may be styled through the style and color props) and may contain any number of children.

Example

import TouchTile from 'react-native-material-touch';

...

render () {
    return <View>
        <TouchTile onPress={aPressed}>
            <Text>This is touchable with feedback,</Text>
            <Text>a transparent background,</Text>
            <Text>and multiple children</Text>
        </TouchTile>
        <TouchTile onPress={bPressed} color='#303f9f' pressColor='#5c6bc0' style={{elevation: 4}}>
            <Text>This is a colored button</Text>
        </TouchTile>
    </View>;
}

Rounded Corners

Due to the limitations of TouchableNativeFeedback (which does not respect the borderRadius style of the view it encloses) the default export should only be used for rectangular components otherwise corners will become square while pressed. There are two options to deal with these situations. The simplest is to force the use of the Animated based implementation even on Android by using the named export TouchTileAnimated instead of the default export.

Another named export RoundTouchTile keeps the use of native feedback by sandwiching TouchableNativeFeedback between two Views so that the outer one can provide bounding box clipping. This requires splitting the style into the props outerStyle, innerStyle, and radius, which control the styles of the outer and inner views and the border radius. In IOS these styles are merged and applied to a single view.