feat(list-item): started to use Pressable component for press inter…

…actions This new feature require the 0.63.0 version of React Native. BREAKING CHANGE: In order to use de new component `Pressable` of React Native, is mandatory to update de React Native version to 0.63.0.
darleikroth · Oct 23, 2020 · ea8358b · ea8358b
1 parent 992c136
commit ea8358b
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 72 deletions.
diff --git a/ListItem/Item.js b/ListItem/Item.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
+  Pressable,
   StyleSheet,
   Text,
   TextStyle,
@@ -9,7 +9,11 @@ import {
 } from 'react-native';
 import { TouchableView } from 'react-native-zbase';
 
-interface Props {
+type Props = {
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.3`.
+   */
+  activeOpacity: Number;
   /**
    * Item's primary text. It is `isRequired`.
    */
@@ -66,11 +70,6 @@ interface Props {
    * Styles of the `divider` property.
    */
   dividerStyle?: ViewStyle;
-  /**
-   * Expects a color. Determines the color of background that's going to be used to display feedback.
-   * It works just on Android devices. For iOS devices the `TouchableOpacity` feedback is used.
-   */
-  selectableBackground?: string;
   /**
    * If `true` a line element (divider) will be rendered at the bottom of the item.
    * The default is `false`.
@@ -92,14 +91,14 @@ interface Props {
 
 const Item = React.memo((props: Props) => {
   const {
+    activeOpacity,
     containerStyle,
     contentStyle,
     disabled,
     divider,
     dividerStyle,
     iconLeft,
     iconRight,
-    selectableBackground,
     subtitle,
     subtitleNumberOfLines,
     subtitleStyle,
@@ -112,68 +111,75 @@ const Item = React.memo((props: Props) => {
   } = props;
 
   return (
-    <View>
+    <>
       <View style={[styles.container, containerStyle]} >
-        <TouchableView
-          onPress={disabled ? undefined : onPress}
-          background={selectableBackground}
+        <Pressable
+          android_disableSound
+          onPress={onPress}
           disabled={props.touchDisabled}
-          onLongPress={disabled ? undefined : onLongPress} >
-          <View style={[styles.content, contentStyle]} >
-
-            <View style={[styles.icon, {left: 0}]} >
-              {iconLeft}
+          onLongPress={onLongPress}
+          style={({ pressed }) => [
+            styles.content,
+            contentStyle,
+            { opacity: pressed ? activeOpacity : 1 }
+          ]}
+        >
+          <View style={[styles.icon, {left: 0}]} >
+            {iconLeft}
+          </View>
+          {!!iconRight && (
+            <View style={[styles.icon, {right: 0, width: 48}]} >
+              {iconRight}
             </View>
-            {!!iconRight && (
-              <View style={[styles.icon, {right: 0, width: 48}]} >
-                {iconRight}
-              </View>
-            )}
+          )}
 
-            <View style={[styles.titleContainer, {marginRight: !iconRight ? 16 : 54}]} >
+          <View style={[styles.titleContainer, {marginRight: !iconRight ? 16 : 54}]} >
+            <Text
+              style={[
+                styles.title,
+                titleStyle,
+                disabled ? {color: 'rgba(0, 0, 0, .38)'} : undefined,
+              ]}
+              numberOfLines={titleNumberOfLines} >
+              {title}
+            </Text>
+            {!!subtitle && (
               <Text
                 style={[
-                  styles.title,
-                  titleStyle,
+                  styles.subtitle,
+                  subtitleStyle,
                   disabled ? {color: 'rgba(0, 0, 0, .38)'} : undefined,
                 ]}
-                numberOfLines={titleNumberOfLines} >
-                {title}
+                numberOfLines={subtitleNumberOfLines} >
+                {subtitle}
               </Text>
-              {!!subtitle && (
-                <Text
-                  style={[
-                    styles.subtitle,
-                    subtitleStyle,
-                    disabled ? {color: 'rgba(0, 0, 0, .38)'} : undefined,
-                  ]}
-                  numberOfLines={subtitleNumberOfLines} >
-                  {subtitle}
-                </Text>
-              )}
-              {!!text && (
-                <Text
-                  style={[
-                    styles.subtitle,
-                    subtitleStyle,
-                    disabled ? {color: 'rgba(0, 0, 0, .38)'} : undefined,
-                  ]}
-                  numberOfLines={1} >
-                  {text}
-                </Text>
-              )}
-            </View>
+            )}
+            {!!text && (
+              <Text
+                style={[
+                  styles.subtitle,
+                  subtitleStyle,
+                  disabled ? {color: 'rgba(0, 0, 0, .38)'} : undefined,
+                ]}
+                numberOfLines={1} >
+                {text}
+              </Text>
+            )}
           </View>
-        </TouchableView>
+        </Pressable>
       </View>
       {!!divider && (<View style={[styles.divider, dividerStyle]} />)}
-    </View>
+    </>
   );
 });
 
 Item.defaultProps = {
+  activeOpacity: 0.4,
+  divider: false,
+  subtitleNumberOfLines: 1,
+  titleNumberOfLines: 1,
   touchDisabled: false,
-}
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -212,15 +218,4 @@ const styles = StyleSheet.create({
   },
 });
 
-Item.propTypes = {
-  title: PropTypes.string.isRequired,
-  iconLeft: PropTypes.any.isRequired,
-};
-
-Item.defaultProps = {
-  titleNumberOfLines: 1,
-  subtitleNumberOfLines: 1,
-  divider: false,
-};
-
 export default Item;
diff --git a/ListItem/SimpleItem.js b/ListItem/SimpleItem.js
@@ -1,15 +1,19 @@
 import React from 'react';
 import {
+  Pressable,
   StyleSheet,
   ViewStyle,
   TextStyle,
   Platform,
   View,
   Text,
 } from 'react-native';
-import { TouchableView } from 'react-native-zbase';
 
 type Props = {
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.3`.
+   */
+  activeOpacity: Number;
   title: string;
   subtitle?: string;
   titleNumberOfLines?: Number;
@@ -52,21 +56,27 @@ const SimpleItem = React.memo((props: Props) => {
 
   return (
     <View style={[styles.container, props.containerStyle]} >
-      <TouchableView
+      <Pressable
+        android_disableSound
         disabled={props.touchDisabled}
         onPress={props.onPress}
-        onLongPress={props.onLongPress} >
-        <View style={[styles.content, props.contentStyle]} >
-          {renderContent()}
-        </View>
-      </TouchableView>
+        onLongPress={props.onLongPress}
+        style={({ pressed }) => [
+          styles.content,
+          props.contentStyle,
+          { opacity: pressed ? props.activeOpacity : 1 }
+        ]}
+      >
+        {renderContent()}
+      </Pressable>
     </View>
   );
 });
 
 SimpleItem.defaultProps = {
-  touchDisabled: false,
+  activeOpacity: 0.4,
   titleNumberOfLines: 1,
+  touchDisabled: false,
 }
 
 const styles = StyleSheet.create({