again, no idea what i am doing

src/components/ButtonLayout.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Layout} from '../types/ButtonLayout';
+import DeckButton from './DeckButton';
+
+interface Props {
+  layout: Layout;
+  onButtonPress: (index: number) => void;
+}
+
+export default function ButtonLayout(props: Props) {
+  const buttons: JSX.Element[] = [];
+  props.layout.buttons.forEach((e) => {
+    buttons.push(
+      <DeckButton
+        text={e.title}
+        key={e.pos}
+        onPress={() => {
+          props.onButtonPress(e.pos);
+        }}
+      />,
+    );
+  });
+  return <>{buttons}</>;
+}

src/components/DeckButton.tsx

@@ -19,8 +19,7 @@ export default function DeckButton(props: Props) {
         <TouchableHighlight
           style={style.touchable}
           underlayColor={'#0e86d4'}
-          onPress={props.onPress}
-          onLongPress={() => console.log('long press')}>
+          onPress={props.onPress}>
           <Text style={style.text}>{props.text}</Text>
         </TouchableHighlight>
       </View>

src/screens/Deck.tsx

@@ -1,66 +1,71 @@
 import {RouteProp} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {StatusBar, StyleSheet} from 'react-native';
-import Orientation from 'react-native-orientation-locker';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {RootStackParamList} from '../App';
-import DeckButton from '../components/DeckButton';
+import ButtonLayout from '../components/ButtonLayout';
+import {Layout} from '../types/ButtonLayout';
 
 interface Props {
   remoteAddress: string;
   route: RouteProp<RootStackParamList, 'Deck'>;
 }
 
+function requestLayout(ws: WebSocket) {
+  ws.send(
+    JSON.stringify({
+      messageType: 'layout',
+    }),
+  );
+}
+
 export default function Deck(props: Props) {
-  useEffect(() => {
-    console.log('Lock to portait');
-    Orientation.lockToPortrait();
-    return () => {
-      console.log('Unlock orientation');
-      Orientation.unlockAllOrientations();
-    };
-  });
+  const remoteAddress = props.route.params.remoteAddress;
+
+  const [layout, setLayout] = useState<Layout>({buttons: []});
 
   const ws = useRef<WebSocket | null>(null);
-  const remoteAddress = props.route.params.remoteAddress;
   useEffect(() => {
-    console.log('Connect ws at: ' + remoteAddress);
     // TODO check if remote address is valid
     ws.current = new WebSocket(`ws://${remoteAddress}:8069/ws`);
 
     ws.current.onopen = () => {
-      console.log('connectet ws');
+      requestLayout(ws.current!);
     };
     ws.current.onerror = (e) => {
       // TODO tell the user something is wrong
-      console.error(e.message);
+      console.error(e);
+    };
+
+    ws.current.onmessage = (msg) => {
+      // TODO also add a mesasge type to response messages
+      const payload = JSON.parse(msg.data);
+      if (payload.buttons) {
+        setLayout(payload);
+      }
     };
 
     return () => {
-      console.log('close websocket');
       ws.current?.close();
     };
-  });
+  }, [remoteAddress]);
 
-  const buttons = [];
-
-  for (let i = 0; i < 21; i++) {
-    let text = 'btn' + i;
-    buttons.push(
-      <DeckButton
-        text={text}
-        key={i}
-        onPress={() => {
-          ws.current?.send(i + '');
-        }}
-      />,
+  function buttonPress(index: number) {
+    ws.current?.send(
+      JSON.stringify({
+        messageType: 'buttonPress',
+        buttonIndex: index,
+        long: false,
+      }),
     );
   }
 
   return (
     <>
       <StatusBar hidden={true} />
-      <SafeAreaView style={style.view}>{buttons}</SafeAreaView>
+      <SafeAreaView style={style.view}>
+        <ButtonLayout layout={layout} onButtonPress={buttonPress} />
+      </SafeAreaView>
     </>
   );
 }

src/screens/Home.tsx

@@ -12,21 +12,16 @@ export default function Home(props: Props) {
   let [remoteAddress, setRemoteAddress] = useState('');
   return (
     <>
-      {/* <Button
-        title={'Start demo'}
-        onPress={() => props.navigation.navigate('Deck')}
-      /> */}
       <Text>Remote address:</Text>
       <TextInput
         style={style.textInput}
         autoCorrect={false}
         value={remoteAddress}
-        onChangeText={(value) => setRemoteAddress(value)}
+        onChangeText={(value) => setRemoteAddress(value.trim())}
       />
       <Button
         title={'Connect'}
         onPress={() => {
-          console.log('connect');
           props.navigation.navigate('Deck', {
             remoteAddress: remoteAddress,
           });

src/types/ButtonLayout.ts

@@ -0,0 +1,8 @@
+export interface Layout {
+  buttons: DeckButtonLayout[];
+}
+
+export interface DeckButtonLayout {
+  title: string;
+  pos: number;
+}