fix: landscape mode styles in livestream dogfood app

GetStream · Oct 11, 2023 · 8c0f4ed · 8c0f4ed
1 parent 414510b
commit 8c0f4ed
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 49 deletions.
diff --git a/sample-apps/react-native/dogfood/src/screens/LiveStream/JoinLiveStream.tsx b/sample-apps/react-native/dogfood/src/screens/LiveStream/JoinLiveStream.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
 import { appTheme } from '../../theme';
 import { useAppGlobalStoreValue } from '../../contexts/AppContext';
@@ -15,6 +16,7 @@ import { Button } from '../../components/Button';
 import { randomId } from '../../modules/helpers/randomId';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { LiveStreamParamList } from '../../../types';
+import { useOrientation } from '../../hooks/useOrientation';
 
 type JoinLiveStreamScreenProps = NativeStackScreenProps<
   LiveStreamParamList,
@@ -29,6 +31,7 @@ export const JoinLiveStream = ({
   const userId = useAppGlobalStoreValue((store) => store.userId);
   const userName = useAppGlobalStoreValue((store) => store.userName);
   const { t } = useI18n();
+  const orientation = useOrientation();
   const {
     params: { mode },
   } = route;
@@ -44,46 +47,54 @@ export const JoinLiveStream = ({
     navigation.navigate('ViewerLiveStream', { callId });
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: orientation === 'landscape' ? 'row' : 'column',
+  };
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.container}
+      style={[styles.container, landScapeStyles]}
     >
-      <Image source={{ uri: userImageUrl }} style={styles.logo} />
-      <View>
-        <Text style={styles.title}>
-          {t('Hello, {{ userName }}', { userName: userName || userId })}
-        </Text>
-        <Text style={styles.subTitle}>
-          {mode === 'host'
-            ? t('Start a live stream by entering the call ID.')
-            : t('Join/View a live stream by entering the call ID.')}
-        </Text>
+      <View style={styles.topContainer}>
+        <Image source={{ uri: userImageUrl }} style={styles.logo} />
+        <View>
+          <Text style={styles.title}>
+            {t('Hello, {{ userName }}', { userName: userName || userId })}
+          </Text>
+          <Text style={styles.subTitle}>
+            {mode === 'host'
+              ? t('Start a live stream by entering the call ID.')
+              : t('Join/View a live stream by entering the call ID.')}
+          </Text>
+        </View>
       </View>
-      <View style={styles.createCall}>
-        <TextInput
-          placeholder={t('Type your Call ID')}
-          value={callId}
-          autoCapitalize="none"
-          autoCorrect={false}
-          onChangeText={(text) => {
-            setCallId(text.trim().split(' ').join('-'));
-          }}
-        />
+      <View style={styles.bottomContainer}>
+        <View style={styles.createCall}>
+          <TextInput
+            placeholder={t('Type your Call ID')}
+            value={callId}
+            autoCapitalize="none"
+            autoCorrect={false}
+            onChangeText={(text) => {
+              setCallId(text.trim().split(' ').join('-'));
+            }}
+          />
+        </View>
+        {mode === 'host' ? (
+          <Button
+            onPress={enterBackstageHandler}
+            title={t('Enter Backstage')}
+            disabled={!callId}
+          />
+        ) : (
+          <Button
+            onPress={joinLiveStreamHandler}
+            title={t('Join Live stream')}
+            disabled={!callId}
+          />
+        )}
       </View>
-      {mode === 'host' ? (
-        <Button
-          onPress={enterBackstageHandler}
-          title={t('Enter Backstage')}
-          disabled={!callId}
-        />
-      ) : (
-        <Button
-          onPress={joinLiveStreamHandler}
-          title={t('Join Live stream')}
-          disabled={!callId}
-        />
-      )}
     </KeyboardAvoidingView>
   );
 };
@@ -95,6 +106,10 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'space-evenly',
   },
+  topContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   logo: {
     height: 100,
     width: 100,
@@ -106,14 +121,18 @@ const styles = StyleSheet.create({
     color: appTheme.colors.static_white,
     fontWeight: '500',
     textAlign: 'center',
+    marginTop: appTheme.spacing.lg,
   },
   subTitle: {
     color: appTheme.colors.light_gray,
     fontSize: 16,
     textAlign: 'center',
-    marginTop: appTheme.spacing.lg,
     marginHorizontal: appTheme.spacing.xl,
   },
+  bottomContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   createCall: {
     display: 'flex',
     flexDirection: 'row',

diff --git a/sample-apps/react-native/dogfood/src/screens/LiveStream/index.tsx b/sample-apps/react-native/dogfood/src/screens/LiveStream/index.tsx
@@ -1,10 +1,11 @@
 import { useI18n } from '@stream-io/video-react-native-sdk';
 import React from 'react';
-import { Image, StyleSheet, Text, View } from 'react-native';
+import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { Button } from '../../components/Button';
 import { appTheme } from '../../theme';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { LiveStreamParamList } from '../../../types';
+import { useOrientation } from '../../hooks/useOrientation';
 
 type LiveStreamScreenProps = NativeStackScreenProps<
   LiveStreamParamList,
@@ -15,6 +16,7 @@ export const LiveStreamChooseScreen = ({
   navigation,
 }: LiveStreamScreenProps) => {
   const { t } = useI18n();
+  const orientation = useOrientation();
 
   const onHostViewSelect = () => {
     navigation.navigate('JoinLiveStream', { mode: 'host' });
@@ -24,20 +26,28 @@ export const LiveStreamChooseScreen = ({
     navigation.navigate('JoinLiveStream', { mode: 'viewer' });
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: orientation === 'landscape' ? 'row' : 'column',
+  };
+
   return (
-    <View style={styles.container}>
-      <Image source={require('../../assets/Logo.png')} style={styles.logo} />
-      <View>
-        <Text style={styles.title}>{t('Stream Live stream App')}</Text>
-        <Text style={styles.subTitle}>{t('Choose the Mode')}</Text>
+    <View style={[styles.container, landScapeStyles]}>
+      <View style={styles.topContainer}>
+        <Image source={require('../../assets/Logo.png')} style={styles.logo} />
+        <View>
+          <Text style={styles.title}>{t('Stream Live stream App')}</Text>
+          <Text style={styles.subTitle}>{t('Choose the Mode')}</Text>
+        </View>
       </View>
-      <View>
-        <Button title={t('Hosts')} onPress={onHostViewSelect} />
-        <Button
-          title={t('Viewers')}
-          onPress={onViewerViewSelect}
-          buttonStyle={styles.viewerButton}
-        />
+      <View style={styles.bottomContainer}>
+        <View>
+          <Button title={t('Hosts')} onPress={onHostViewSelect} />
+          <Button
+            title={t('Viewers')}
+            onPress={onViewerViewSelect}
+            buttonStyle={styles.viewerButton}
+          />
+        </View>
       </View>
     </View>
   );
@@ -50,6 +60,10 @@ const styles = StyleSheet.create({
     backgroundColor: appTheme.colors.static_grey,
     padding: appTheme.spacing.lg,
   },
+  topContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   viewerButton: {
     marginTop: appTheme.spacing.md,
   },
@@ -59,17 +73,21 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     alignSelf: 'center',
   },
+  bottomContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   title: {
     fontSize: 30,
     color: appTheme.colors.static_white,
     fontWeight: '500',
     textAlign: 'center',
+    marginTop: appTheme.spacing.lg,
   },
   subTitle: {
     color: appTheme.colors.light_gray,
     fontSize: 16,
     textAlign: 'center',
-    marginTop: appTheme.spacing.lg,
     marginHorizontal: appTheme.spacing.xl,
   },
 });