[+] Invert the colors of focused for play/pause

LunatiqueCoder · Feb 13, 2023 · 27117ac · 27117ac
1 parent b4eb614
commit 27117ac
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/Control.tsx b/src/components/Control.tsx
@@ -1,4 +1,4 @@
-import React, {ReactNode, RefObject} from 'react';
+import React, {ReactNode, RefObject, useState} from 'react';
 import {TouchableHighlight, ViewProps} from 'react-native';
 import {styles} from './styles';
 
@@ -19,16 +19,25 @@ export const Control = ({
   style = {},
   ...props
 }: ControlProps) => {
+  const [focused, setFocused] = useState(false);
+
+  const setFocusedState = () => setFocused(true);
+  const cancelFocusedState = () => setFocused(false);
+
+  const focusedStyle = focused ? {opacity: 1} : {};
+
   return (
     <TouchableHighlight
+      onFocus={setFocusedState}
+      onBlur={cancelFocusedState}
       disabled={disabled}
       ref={controlRef}
       underlayColor="transparent"
-      activeOpacity={0.3}
+      activeOpacity={1}
       onPress={() => {
         callback && callback();
       }}
-      style={[styles.control, style]}
+      style={[styles.control, focused && focusedStyle]}
       {...props}>
       {children}
     </TouchableHighlight>

diff --git a/src/components/styles.ts b/src/components/styles.ts
@@ -16,6 +16,7 @@ export const styles = StyleSheet.create({
   },
   control: {
     padding: 16,
+    opacity: 0.6,
   },
   text: {
     backgroundColor: 'transparent',