React Native & Expo Setup

{
  "expo": {
    "name": "WPM Typing Tutor",
    "slug": "wpm-typing-tutor",
    "version": "1.0.0",
    "orientation": "landscape",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "dark",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#0d0d0d"
    },
    "platforms": ["ios", "android"],
    "android": {
      "package": "com.wpm.typingtutor",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#0d0d0d"
      },
      "permissions": []
    },
    "ios": {
      "bundleIdentifier": "com.wpm.typingtutor",
      "supportsTablet": true
    }
  }
}

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <WebView
        source={{ uri: 'https://your-domain.com' }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        scalesPageToFit={true}
        allowsFullscreenVideo={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0d0d0d',
  },
  webview: {
    flex: 1,
  },
});

import React, { useEffect } from 'react';
import { Keyboard } from 'react-native';
import { WebView } from 'react-native-webview';

export default function GameView() {
  useEffect(() => {
    // Keep keyboard visible during gameplay
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      console.log('Keyboard shown');
    });
    
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      console.log('Keyboard hidden');
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return (
    <WebView
      source={{ uri: 'https://your-domain.com' }}
      // ... other props
    />
  );
}

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const webViewRef = useRef(null);

  // Send message to Unity
  const sendToUnity = (message) => {
    webViewRef.current?.injectJavaScript(`
      if (window.unityInstance) {
        window.unityInstance.SendMessage('GameManager', 'ReceiveMessage', '${message}');
      }
      true;
    `);
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://your-domain.com' }}
        onMessage={(event) => {
          // Receive messages from Unity
          const data = JSON.parse(event.nativeEvent.data);
          console.log('Message from Unity:', data);
        }}
      />
      <Button 
        title="Start Game" 
        onPress={() => sendToUnity('START')} 
      />
    </View>
  );
}