react-native-zero-components

After tons of iterations, copy-pastes, projects etc. We’ve decided to end the Touchable hell™ once and for all! As you already know, there is (or at least there was) no simple way to use one touchable throughout the app. React native provides 3-4 different touchable components and each of them has their own API. But not this one!

Usage

import React from 'react';
import { Text, View } from 'react-native';
import { Touchable } from 'react-native-zero-components';
import styles from './styles';

const TouchableShowcase = () => (
  <View style={styles.root}>
    <Touchable>
      <Text>I am clickable!</Text>
    </Touchable>
    <Touchable style={styles.card}>
      <Text style={styles.header}>This is header</Text>
      <Text style={styles.content}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua
      </Text>
    </Touchable>
  </View>
);

Props

• TouchableWithoutFeedback props
• foreground
• background
• fallback
• hapticDuration
• mode

Reference

fallback

If TouchableNativeFeedback is not available (on iOS and on Android API <= 20 / Android < 5.0), the component specified in this prop is used instead. Defaults to TouchableOpacity.

hapticDuration

If set, sends the vibration to the device for specified duration on each press

mode

Determines which underlaying touchable component will be used. These modes are available:

• native: TouchableNativeFeedback if Android API 21+. If not, uses TouchableOpacity
• opacity: TouchableOpacity
• highlight: TouchableHighlight
• none: TouchableWithoutFeedback