{ "name": "brain-visualization-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~51.0.8", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.1", "react-native-svg": "15.2.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.45", "typescript": "^5.1.3" }, "private": true } { "expo": { "name": "Brain Belief Pain Visualization", "slug": "brain-belief-pain-visualization", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "ios": { "supportsTablet": true, "bundleIdentifier": "com.example.brainvisualization" }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "package": "com.example.brainvisualization" }, "web": { "favicon": "./assets/favicon.png" }, "assetBundlePatterns": [ "**/*" ] } } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; import React, { useState, useRef, useEffect } from 'react'; import { View, StyleSheet, Button, Text, Animated } from 'react-native'; import Svg, { Path, Circle } from 'react-native-svg'; const AnimatedPath = Animated.createAnimatedComponent(Path); const AnimatedCircle = Animated.createAnimatedComponent(Circle); const BrainVisualization: React.FC = () => { const [beliefActive, setBeliefActive] = useState(false); const painSignalOpacity = useRef(new Animated.Value(0.8)).current; // Start with pain signal high const expectationOpacity = useRef(new Animated.Value(0)).current; // Start with expectation low const modulationOpacity = useRef(new Animated.Value(0)).current; // Start with modulation low const perceivedPainLevel = useRef(new Animated.Value(0.8)).current; // Corresponds to pain signal initially useEffect(() => { const painTarget = beliefActive ? 0.2 : 0.8; const expectationTarget = beliefActive ? 0.9 : 0; const modulationTarget = beliefActive ? 0.9 : 0; Animated.parallel([ Animated.timing(painSignalOpacity, { toValue: painTarget, duration: 1000, useNativeDriver: false, // Opacity on SVG elements might not work with native driver }), Animated.timing(expectationOpacity, { toValue: expectationTarget, duration: 1000, useNativeDriver: false, }), Animated.timing(modulationOpacity, { toValue: modulationTarget, duration: 1000, useNativeDriver: false, }), Animated.timing(perceivedPainLevel, { toValue: painTarget, // Perceived pain mirrors the (modulated) pain signal duration: 1000, useNativeDriver: false, }), ]).start(); }, [beliefActive, painSignalOpacity, expectationOpacity, modulationOpacity, perceivedPainLevel]); const toggleBelief = () => { setBeliefActive(!beliefActive); }; const painColor = perceivedPainLevel.interpolate({ inputRange: [0, 0.5, 1], outputRange: ['rgb(0, 255, 0)', 'rgb(255, 255, 0)', 'rgb(255, 0, 0)'], // Green -> Yellow -> Red }); return ( Belief & Pain Perception