HomeControllerMobile/App.js at main · exemplar-codes/HomeControllerMobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
  const [text, setText] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [output, setOutput] = useState("");

  const onPressSubmitHandler = async () => {
    // const output = eval(text)
    const evaluatedOutput = text;

    setIsLoading(false);
    setOutput(evaluatedOutput);
    setText("");
  };
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <TextInput
        style={{
          alignSelf: "stretch",
          borderColor: "black",
          borderWidth: 1,
          padding: 16,
        }}
        value={text}
        placeholder="Enter bash command here"
        onChangeText={setText}
        onSubmitEditing={onPressSubmitHandler}
      />
      <Button title="Run command" onPress={onPressSubmitHandler} />
      <View
        style={{
          alignSelf: "flex-start",
          width: "100%",
        }}
      >
        <Text>Output {isLoading ? "Loading..." : ""}</Text>
        <Text
          style={{
            borderColor: "black",
            borderWidth: 1,
            padding: 8,
            width: "100%",
            marginTop: 4,
            alignSelf: "flex-start",
            backgroundColor: "lightgray",
          }}
        >
          {output}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    margin: 8,
  },
});