feat: Add expo gradient for first example

Author: LukasMod

example/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/metro-runtime": "~5.0.4",
     "expo": "~53.0.9",
+    "expo-linear-gradient": "^14.1.5",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",

example/src/App.tsx

@@ -1,10 +1,38 @@
 import { View, StyleSheet, Text } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import {
   PillSwitch,
   useControlListState,
 } from 'react-native-multiswitch-controller';
 
 export default function App() {
+  const controlListState0 = useControlListState({
+    options: [
+      { value: 'morning', label: '🌅' },
+      { value: 'afternoon', label: '☀️' },
+      { value: 'evening', label: '🌇' },
+      { value: 'night', label: '🌙' },
+    ],
+    defaultOption: 'morning',
+    variant: 'segmentedControl',
+  });
+
+  const getGradientColors = (timeOfDay: string): [ColorValue, ColorValue] => {
+    switch (timeOfDay) {
+      case 'morning':
+        return ['#FFF5E6', '#FFE4B5'];
+      case 'afternoon':
+        return ['#E6F3FF', '#B3D9FF'];
+      case 'evening':
+        return ['#FFE6E0', '#FFD6CC'];
+      case 'night':
+        return ['#E6E6FA', '#D8D8F6'];
+      default:
+        return ['#FFFFFF', '#F8F8F8'];
+    }
+  };
+
   const controlListState1 = useControlListState({
     options: [
       { value: 'First', label: 'First' },
@@ -55,7 +83,26 @@ export default function App() {
   const isTestMode = false;
 
   return (
-    <View style={styles.container}>
+    <LinearGradient
+      colors={getGradientColors(controlListState0.activeOption)}
+      style={styles.container}
+    >
+      <View style={styles.exampleContainer}>
+        <Text style={styles.title}>Time of Day</Text>
+        <PillSwitch
+          controlListState={controlListState0}
+          inactiveBackgroundColor="rgba(59, 130, 246, 0.08)"
+          activeBackgroundColor="rgb(37, 99, 235)"
+          inactiveTextColor="rgb(37, 99, 235)"
+          activeTextColor="rgb(253, 230, 138)"
+        />
+        {isTestMode && (
+          <Text style={styles.selectedText}>
+            Selected: {controlListState3.activeOption}
+          </Text>
+        )}
+      </View>
+
       <View style={styles.exampleContainer}>
         <Text style={styles.title}>Align to left, center or right</Text>
         <PillSwitch
@@ -135,7 +182,7 @@ export default function App() {
           </Text>
         )}
       </View>
-    </View>
+    </LinearGradient>
   );
 }
 

yarn.lock

@@ -6362,6 +6362,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-linear-gradient@npm:^14.1.5":
+  version: 14.1.5
+  resolution: "expo-linear-gradient@npm:14.1.5"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 7550e1ff999fbe3da4a4b189a430fbadaeeffa98a2bfe5b4642a27dfdec73e7920e5a60e7db0c3bcc8345604841b4ea251cd5aa30c32d166d6ac2d86e00ecb58
+  languageName: node
+  linkType: hard
+
 "expo-modules-autolinking@npm:2.1.10":
   version: 2.1.10
   resolution: "expo-modules-autolinking@npm:2.1.10"
@@ -11338,6 +11349,7 @@ __metadata:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~5.0.4
     expo: ~53.0.9
+    expo-linear-gradient: ^14.1.5
     expo-status-bar: ~2.2.3
     react: 19.0.0
     react-dom: 19.0.0