eRef(new Animated.Value(value ? 1 : 0)).current;\n React.useEffect(() => {\n Animated.timing(anim, {\n toValue: value ? 1 : 0,\n duration: 300,\n useNativeDriver: false,\n }).start();\n }, [value]);\n const backgroundColor = anim.interpolate({\n inputRange: [0, 1],\n outputRange: ['#222', '#FFD700'],\n });\n return (\n onValueChange(!value)} style={styles.toggleRow} activeOpacity={0.8}>\n {label}\n \n \n \n \n );\n };\n \n const SettingsScreen = () => {\n const [wifi, setWifi] = useState(true);\n const [notifications, setNotifications] = useState(false);\n const [volume, setVolume] = useState(0.7);\n const [brightness, setBrightness] = useState(0.5);\n return (\n \n Settings\n \n \n \n Volume\n \n {Math.round(volume * 100)}\n \n \n Brightness\n \n {Math.round(brightness * 100)}\n \n \n );\n }\n \n const styles = StyleSheet.create({\n screen: {\n flex: 1,\n backgroundColor: '#000',\n padding: 24,\n },\n header: {\n color: '#FFD700',\n fontSize: 28,\n fontWeight: 'bold',\n marginBottom: 24,\n textAlign: 'center',\n letterSpacing: 1.2,\n fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',\n },\n toggleRow: {\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: 18,\n },\n toggleLabel: {\n color: '#FFF',\n fontSize: 18,\n flex: 1,\n fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',\n },\n toggleOuter: {\n width: 54,\n height: 28,\n borderRadius: 16,\n backgroundColor: '#222',\n marginLeft: 12,\n justifyContent: 'center',\n position: 'relative',\n },\n toggleKnob: {\n position: 'absolute',\n top: 2,\n width: 24,\n height: 24,\n borderRadius: 12,\n backgroundColor: '#FFF',\n shadowColor: '#FFD700',\n shadowOpacity: 0.3,\n shadowRadius: 4,\n },\n sliderRow: {\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: 18,\n },\n sliderLabel: {\n color: '#FFF',\n fontSize: 18,\n width: 110,\n fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',\n },\n sliderValue: {\n color: '#FFD700',\n fontS

UwU UI / UX Designer

Comments (0)