Merge pull request #4 from Propo41/feature-3

implemented touch feedback with ripple for views with a border radius
Propo41 · Jan 7, 2024 · 01af7fe · 01af7fe
2 parents e72002f + e7061a2
commit 01af7fe
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 64 deletions.
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
@@ -1,5 +1,5 @@
 import { makeStyles, Text } from '@rneui/themed';
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableNativeFeedback, View } from 'react-native';
 import React from 'react';
 import { LinearProgress } from '@rneui/themed';
 import { margins } from '../config';
@@ -20,40 +20,41 @@ const Deck = ({ name, progress, containerBgColor, pbColor, pbBackgroundColor, te
   const styles = useStyles();
 
   return (
-    <TouchableHighlight
-      onPress={onDeckPress}
-      underlayColor={'red'}
-      style={{ ...styles.container, backgroundColor: containerBgColor, marginTop: mt || 0, marginBottom: mb || 0 }}
-    >
-      <>
-        <Text style={{ color: textColor || styles.text.color }} head2>
-          {name}
-        </Text>
-        <LinearProgress
-          style={{ ...styles.progressBar, backgroundColor: pbBackgroundColor }}
-          color={pbColor}
-          value={progress}
-          variant="determinate"
-        />
-        <View style={styles.progressStatusContainer}>
-          <Text body2 style={[styles.flex, { color: textColor || styles.text.color }]}>
-            Completion
-          </Text>
-          <Text style={{ color: textColor || styles.text.color }} body2>
-            {progress * 100}%
+    <View style={{ ...styles.container, backgroundColor: containerBgColor, marginTop: mt || 0, marginBottom: mb || 0 }}>
+      <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple(pbBackgroundColor, false)} onPress={onDeckPress}>
+        <View style={styles.contentContainer}>
+          <Text style={{ color: textColor || styles.text.color }} head2>
+            {name}
           </Text>
+          <LinearProgress
+            style={{ ...styles.progressBar, backgroundColor: pbBackgroundColor }}
+            color={pbColor}
+            value={progress}
+            variant="determinate"
+          />
+          <View style={styles.progressStatusContainer}>
+            <Text body2 style={[styles.flex, { color: textColor || styles.text.color }]}>
+              Completion
+            </Text>
+            <Text style={{ color: textColor || styles.text.color }} body2>
+              {progress * 100}%
+            </Text>
+          </View>
         </View>
-      </>
-    </TouchableHighlight>
+      </TouchableNativeFeedback>
+    </View>
   );
 };
 
 const useStyles = makeStyles((theme) => ({
   container: {
-    paddingHorizontal: 25,
-    paddingVertical: 20,
     borderRadius: 15,
     marginHorizontal: margins.window_hor,
+    overflow: 'hidden',
+  },
+  contentContainer: {
+    paddingHorizontal: 25,
+    paddingVertical: 20,
   },
   text: {
     color: theme.colors.white,

diff --git a/src/components/Touchable.tsx b/src/components/Touchable.tsx
diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
@@ -10,7 +10,10 @@ const RootStack = createNativeStackNavigator<NavParamList>();
 export default function AppNavigator() {
   const styles = useStyles();
   return (
-    <RootStack.Navigator initialRouteName={NavRoutes.App} screenOptions={{ headerShown: false, animation: 'slide_from_right' }}>
+    <RootStack.Navigator
+      initialRouteName={NavRoutes.App}
+      screenOptions={{ animationDuration: 10, headerShown: false, presentation: 'transparentModal', animation: 'slide_from_right' }}
+    >
       <RootStack.Screen name={NavRoutes.App} component={BottomNavigator} />
       <RootStack.Screen name={NavRoutes.Sets} component={SetsScreen} options={styles} />
     </RootStack.Navigator>

diff --git a/src/views/SetsScreen.tsx b/src/views/SetsScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { TouchableNativeFeedback, View } from 'react-native';
 import { makeStyles, Text, Button, useThemeMode, useTheme } from '@rneui/themed';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavProps } from '../config/routes';
@@ -18,7 +18,36 @@ export default function SetsScreen({ navigation }: NavProps) {
   return (
     <View>
       <NavigationBar title="Sets" />
-      <Text head1>Sets</Text>
+      <View
+        style={{
+          overflow: 'hidden',
+          borderRadius: 10,
+          marginHorizontal: 30
+        }}
+      >
+        <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#7C82FF', false)} onPress={() => console.log('hekk')}>
+          <View
+            style={{
+              paddingHorizontal: 50,
+              paddingVertical: 50,
+            }}
+          >
+            <Text>Click me</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </View>
+      <Button
+        iconPosition="left"
+        buttonStyle={{
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          padding: 0,
+          paddingHorizontal: 0,
+        }}
+      >
+        <Text>hello</Text>
+      </Button>
     </View>
   );
 }

diff --git a/src/views/SettingsScreen.tsx b/src/views/SettingsScreen.tsx
@@ -2,12 +2,10 @@ import { makeStyles, Text, ThemeMode, useTheme, useThemeMode } from '@rneui/them
 import { Divider } from '@rneui/themed';
 import { Switch } from '@rneui/themed';
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { ColorValue, TouchableNativeFeedback, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-
 import ChangeLanguageDialog from '../components/ChangeLanguageDialog';
 import TitleBar from '../components/TitleBar';
-import Touchable from '../components/Touchable';
 import { iconSize, margins } from '../config';
 import { NavProps } from '../config/routes';
 import { getAppState } from '../database';
@@ -23,9 +21,10 @@ type MenuProps = {
 
 const Menu = ({ Icon1, title, subtitle, Icon2, onPress }: MenuProps) => {
   const styles = useStyles();
+  const { theme } = useTheme();
 
   return (
-    <Touchable onPress={onPress}>
+    <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple(theme.colors.touchable as ColorValue, false)} onPress={onPress}>
       <View style={styles.menuContainer}>
         {Icon1}
         <Text body1_bold style={styles.menuTitle}>
@@ -36,7 +35,7 @@ const Menu = ({ Icon1, title, subtitle, Icon2, onPress }: MenuProps) => {
         </Text>
         {Icon2}
       </View>
-    </Touchable>
+    </TouchableNativeFeedback>
   );
 };