• 👋 Hi, I’m @S4grg
• 👀 I’m interested in ...
• 🌱 I’m currently learning ...
• 💞️ I’m looking to collaborate on ...
• 📫 How to reach me ...
• 😄 Pronouns: ...
• ⚡ Fun fact: ...

/SpaceStationApp /components ModuleCard.js CrewCard.js ExperimentCard.js /screens DashboardScreen.js ModulesScreen.js CrewScreen.js ExperimentsScreen.js SearchScreen.js App.js npm install @react-navigation/native npm install @react-navigation/bottom-tabs npm install react-native-safe-area-context npm install react-native-screens

import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import DashboardScreen from './screens/DashboardScreen'; import ModulesScreen from './screens/ModulesScreen'; import CrewScreen from './screens/CrewScreen'; import ExperimentsScreen from './screens/ExperimentsScreen'; import SearchScreen from './screens/SearchScreen';

const Tab = createBottomTabNavigator();

export default function App() { return ( <Tab.Navigator screenOptions={{ headerShown: false }}> <Tab.Screen name="Dashboard" component={DashboardScreen} /> <Tab.Screen name="Modules" component={ModulesScreen} /> <Tab.Screen name="Crew" component={CrewScreen} /> <Tab.Screen name="Experiments" component={ExperimentsScreen} /> <Tab.Screen name="Search" component={SearchScreen} /> </Tab.Navigator> ); }

import React from 'react'; import { View, Text, StyleSheet } from 'react-native';

export default function DashboardScreen() { return ( Space Station Dashboard

  <View style={styles.card}>
    <Text style={styles.label}>Orbit Altitude</Text>
    <Text style={styles.value}>408 km</Text>
  </View>

  <View style={styles.card}>
    <Text style={styles.label}>Speed</Text>
    <Text style={styles.value}>7.66 km/s</Text>
  </View>

  <View style={styles.card}>
    <Text style={styles.label}>Crew Members</Text>
    <Text style={styles.value}>7</Text>
  </View>

  <View style={styles.card}>
    <Text style={styles.label}>Active Experiments</Text>
    <Text style={styles.value}>250+</Text>
  </View>
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#0a0f24' }, title: { fontSize: 28, color: 'white', marginBottom: 20 }, card: { backgroundColor: '#1c2340', padding: 20, borderRadius: 12, marginBottom: 15 }, label: { color: '#9bb0ff', fontSize: 16 }, value: { color: 'white', fontSize: 22, marginTop: 5 } });

import React from 'react'; import { View, Text, FlatList, StyleSheet } from 'react-native';

const modules = [ { name: "Zarya", type: "Cargo Block" }, { name: "Destiny", type: "Lab Module" }, { name: "Columbus", type: "Lab Module" } ];

export default function ModulesScreen() { return ( Modules

  <FlatList
    data={modules}
    keyExtractor={(item) => item.name}
    renderItem={({ item }) => (
      <View style={styles.card}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.type}>{item.type}</Text>
      </View>
    )}
  />
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#0a0f24' }, title: { fontSize: 26, color: 'white', marginBottom: 20 }, card: { backgroundColor: '#1c2340', padding: 20, borderRadius: 12, marginBottom: 15 }, name: { color: 'white', fontSize: 20 }, type: { color: '#9bb0ff', fontSize: 14 } });

import React from 'react'; import { View, Text, FlatList, StyleSheet } from 'react-native';

const crew = [ { name: "Jessica Watkins", role: "Flight Engineer" }, { name: "Sergey Prokopyev", role: "Commander" } ];

export default function CrewScreen() { return ( Crew

  <FlatList
    data={crew}
    keyExtractor={(item) => item.name}
    renderItem={({ item }) => (
      <View style={styles.card}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.role}>{item.role}</Text>
      </View>
    )}
  />
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#0a0f24' }, title: { fontSize: 26, color: 'white', marginBottom: 20 }, card: { backgroundColor: '#1c2340', padding: 20, borderRadius: 12, marginBottom: 15 }, name: { color: 'white', fontSize: 20 }, role: { color: '#9bb0ff', fontSize: 14 } });

import React from 'react'; import { View, Text, FlatList, StyleSheet } from 'react-native';

const experiments = [ { title: "Protein Crystal Growth", category: "Biology" }, { title: "Cold Atom Lab", category: "Physics" } ];

export default function ExperimentsScreen() { return ( Experiments

  <FlatList
    data={experiments}
    keyExtractor={(item) => item.title}
    renderItem={({ item }) => (
      <View style={styles.card}>
        <Text style={styles.name}>{item.title}</Text>
        <Text style={styles.category}>{item.category}</Text>
      </View>
    )}
  />
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#0a0f24' }, title: { fontSize: 26, color: 'white', marginBottom: 20 }, card: { backgroundColor: '#1c2340', padding: 20, borderRadius: 12, marginBottom: 15 }, name: { color: 'white', fontSize: 20 }, category: { color: '#9bb0ff', fontSize: 14 } });

import React, { useState } from 'react'; import { View, Text, TextInput, StyleSheet } from 'react-native';

export default function SearchScreen() { const [query, setQuery] = useState(""); const [result, setResult] = useState("");

const handleSearch = () => { // Later: connect to Python backend setResult(Searching for: ${query}); };

return ( Search

  <TextInput
    style={styles.input}
    placeholder="Search modules, crew, experiments..."
    placeholderTextColor="#777"
    value={query}
    onChangeText={setQuery}
    onSubmitEditing={handleSearch}
  />

  <Text style={styles.result}>{result}</Text>
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#0a0f24' }, title: { fontSize: 26, color: 'white', marginBottom: 20 }, input: { backgroundColor: '#1c2340', padding: 15, borderRadius: 10, color: 'white', marginBottom: 20 }, result: { color: 'white', fontSize: 18 } });

React Native App → Python API → Search Engine / AI Logic → Response

Your React Native app will talk to that backend over http://127.0.0.1:.

You’ll use Pythonista or Pyto — both let you run Python servers directly on iOS.

Inside Pythonista/Pyto, create a file called:

server.py

from flask import Flask, request, jsonify from search_engine import SearchEngine, iss # your existing search engine

app = Flask(name)

engine = SearchEngine(iss)

@app.route("/chat", methods=["POST"]) def chat(): data = request.json user_message = data.get("message", "")

# AI logic
if user_message.startswith("!search"):
    keyword = user_message.replace("!search", "").strip()
    result = engine.search(keyword)
    return jsonify({"reply": result})

# Default AI response
reply = f"I received: {user_message}. Try !search <keyword>."
return jsonify({"reply": reply})

@app.route("/search", methods=["POST"]) def search(): data = request.json keyword = data.get("keyword", "") result = engine.search(keyword) return jsonify({"results": result})

if name == "main": app.run(host="127.0.0.1", port=5000)

Create a file:

/screens/ChatScreen.js

import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';

export default function ChatScreen() { const [messages, setMessages] = useState([]); const [input, setInput] = useState("");

const sendMessage = async () => { if (!input.trim()) return;

const userMsg = { sender: "user", text: input };
setMessages(prev => [...prev, userMsg]);

try {
  const response = await fetch("http://127.0.0.1:5000/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: input })
  });

  const data = await response.json();
  const botMsg = { sender: "bot", text: data.reply };

  setMessages(prev => [...prev, botMsg]);
} catch (error) {
  setMessages(prev => [...prev, { sender: "bot", text: "Error connecting to AI." }]);
}

setInput("");

};

return ( {messages.map((msg, index) => ( <View key={index} style={[ styles.message, msg.sender === "user" ? styles.userMsg : styles.botMsg ]} > {msg.text} ))}

  <View style={styles.inputRow}>
    <TextInput
      style={styles.input}
      placeholder="Type a message..."
      placeholderTextColor="#777"
      value={input}
      onChangeText={setInput}
    />
    <TouchableOpacity style={styles.sendBtn} onPress={sendMessage}>
      <Text style={{ color: "white" }}>Send</Text>
    </TouchableOpacity>
  </View>
</View>

); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#0a0f24" }, chatBox: { flex: 1, padding: 15 }, message: { padding: 12, borderRadius: 10, marginBottom: 10, maxWidth: "80%" }, userMsg: { backgroundColor: "#1c2340", alignSelf: "flex-end" }, botMsg: { backgroundColor: "#2e3b70", alignSelf: "flex-start" }, msgText: { color: "white" }, inputRow: { flexDirection: "row", padding: 10, backgroundColor: "#11172e" }, input: { flex: 1, backgroundColor: "#1c2340", color: "white", padding: 10, borderRadius: 8 }, sendBtn: { marginLeft: 10, backgroundColor: "#3b5bff", padding: 12, borderRadius: 8 } });

Add Chat Tab to Navigation

In App.js, add:

import ChatScreen from './screens/ChatScreen';

<Tab.Screen name="Chat" component={ChatScreen} />

........ E