Move test button to bottom.

example/src/components/DolbyIOProvider/DolbyIOProvider.tsx

@@ -36,6 +36,7 @@ export interface IDolbyIOProvider {
   conference?: Conference;
   conferenceStatus?: ConferenceStatus;
   participants: Participant[];
+  isBottomSheetVisible: Boolean
   initialize: (token: string, refreshToken: () => Promise<string>) => void;
   openSession: (name: string, externalId?: string) => Promise<void>;
   closeSession: () => Promise<void>;
@@ -48,10 +49,12 @@ export interface IDolbyIOProvider {
   goToAudioPreviewScreen: (isVisible: boolean) => void;
   leave: (leaveRoom: boolean) => void;
   setSessionParticipant: () => void;
+  setBottomSheetVisibility: (isVisible: boolean) => void;
 }
 
 export const DolbyIOContext = React.createContext<IDolbyIOProvider>({
   isInitialized: false,
+  isBottomSheetVisible: false,
   me: undefined,
   conference: undefined,
   conferenceStatus: undefined,
@@ -69,13 +72,15 @@ export const DolbyIOContext = React.createContext<IDolbyIOProvider>({
   getCurrentConference: () => {},
   goToAudioPreviewScreen: () => {},
   setSessionParticipant: () => {},
+  setBottomSheetVisibility: () => {},
 });
 
 type DolbyProps = {
   children: React.ReactNode
 };
 
 const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
+  const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [me, setMe] = useState<Participant | undefined>(undefined);
   const [isAudioPreviewScreen, setIsAudioPreviewScreen] = useState(false);
@@ -443,8 +448,13 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
     setIsAudioPreviewScreen(isVisible);
   }
 
+  const setBottomSheetVisibility = (isVisible: boolean) => {
+    setIsBottomSheetVisible(isVisible);
+  }
+
   const contextValue = {
     isInitialized,
+    isBottomSheetVisible,
     isAudioPreviewScreen,
     me,
     conference,
@@ -462,6 +472,7 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
     getCurrentConference,
     goToAudioPreviewScreen,
     setSessionParticipant,
+    setBottomSheetVisibility,
   };
 
   return (

example/src/screens/AudioPreviewScreen/AudioPreviewScreen.style.ts

@@ -27,4 +27,7 @@ export default StyleSheet.create({
       backgroundColor: COLORS.BLUE,
       borderRadius: SPACE_L,
     },
+    center: {
+      alignItems: 'center',
+    },
   });

example/src/screens/AudioPreviewScreen/AudioPreviewScreen.tsx

@@ -150,7 +150,7 @@ const AudioPreviewScreen: FunctionComponent = () => {
       >
         <SafeAreaView style={styles.wrapper}>
           <Space mh="m" mv="s">
-            <Space mb="l">
+            <Space mb="l" mt='s' style={styles.center}>
               <Text color={COLORS.WHITE} header>
                 Dolby.io
               </Text>

example/src/screens/ConferenceScreen/ConferenceScreen.style.ts

@@ -25,7 +25,7 @@ export default StyleSheet.create({
   top: {},
   topBar: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
     alignItems: 'center',
   },
   center: {
@@ -130,6 +130,7 @@ export default StyleSheet.create({
   },
   centerButtons: {
     flexDirection: 'row',
+    marginBottom: 20,
   },
   videoButtonGreen: {
     backgroundColor: COLORS.GREEN,

example/src/screens/ConferenceScreen/ConferenceScreen.tsx

@@ -25,7 +25,7 @@ const DISPLAYED_STATUSES: ParticipantStatus[] = [
 ];
 
 const ConferenceScreen: FunctionComponent = () => {
-  const { me, conference, participants } = useContext(DolbyIOContext);
+  const { me, conference, participants, isBottomSheetVisible, setBottomSheetVisibility } = useContext(DolbyIOContext);
   const { isRecording } = useContext(RecordingContext);
   const { fileSrc, isPresentingFile, fileOwnerName } = useContext(
     FilePresentationContext
@@ -42,7 +42,6 @@ const ConferenceScreen: FunctionComponent = () => {
       (p) => p.status && DISPLAYED_STATUSES.includes(p.status)
     );
   }, [participants]);
-  const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
 
   if (!conference || !me) {
     return <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper} />;
@@ -77,23 +76,14 @@ const ConferenceScreen: FunctionComponent = () => {
           <SafeAreaView style={styles.wrapper}>
             <View style={styles.top}>
               <Space mh="m" mv="m">
-                <Space mb="s" style={styles.topBar}>
-                  <TouchableOpacity
-                    style={styles.videoButton}
-                    onPress={() => {
-                      setIsBottomSheetVisible(!isBottomSheetVisible);
-                    }}
-                  >
-                    <Text size="xxs" align="center">
-                      TEST BUTTONS
+                <Space mb="s" ml="s" style={styles.topBar}>
+                  <Space mr="m">
+                    <Text size="s" align="center">
+                      Conference: <Text weight="bold">{conference.alias}</Text>
                     </Text>
-                  </TouchableOpacity>
-                  <Text size="xs">Logged as: {me.info.name}</Text>
+                  </Space>
                   <LeaveConferenceButton />
                 </Space>
-                <Text size="s" align="center">
-                  Conference: <Text weight="bold">{conference.alias}</Text>
-                </Text>
                 {isRecording ? (
                   <RecordingDotsText text="Conference is being recorded" />
                 ) : null}
@@ -150,6 +140,18 @@ const ConferenceScreen: FunctionComponent = () => {
                     </Text>
                   </TouchableOpacity>
                 </Space>
+                <Space>
+                  <TouchableOpacity
+                    style={styles.videoButton}
+                    onPress={() => {
+                      setBottomSheetVisibility(true);
+                    }}
+                  >
+                    <Text size="xxs" align="center">
+                      TEST BUTTONS
+                    </Text>
+                  </TouchableOpacity>
+                </Space>
               </View>
             </View>
           </SafeAreaView>

example/src/screens/ConferenceScreen/ConferenceScreenBottomSheet.tsx

@@ -81,7 +81,7 @@ import { startLocalVideo, stopLocalVideo } from '@utils/video.tester';
 
 const ConferenceScreenBottomSheet = () => {
   const bottomSheetRef = useRef<BottomSheet>(null);
-  const { me, conference } = useContext(DolbyIOContext);
+  const { me, conference, setBottomSheetVisibility } = useContext(DolbyIOContext);
   const { startRecord, stopRecord } = useContext(RecordingContext);
   const { participants } = conference as Conference;
   let convertedFile: FileConverted | null = null;
@@ -228,7 +228,7 @@ const ConferenceScreenBottomSheet = () => {
   };
 
   return (
-    <BottomSheet ref={bottomSheetRef} index={0} snapPoints={[140, 500]}>
+    <BottomSheet ref={bottomSheetRef} index={0} snapPoints={['40%', '80%']} enablePanDownToClose={true} onClose={() => setBottomSheetVisibility(false)}>
       <ScrollView>
         <Space mh="m" mb="s">
           <Text header size="s" color={COLORS.BLACK}>

example/src/screens/InputTokenScreen/InputTokenScreen.style.ts

@@ -12,4 +12,7 @@ export default StyleSheet.create({
     padding: 10,
     borderRadius: SPACE_XXS,
   },
+  center: {
+    alignItems: 'center',
+  },
 });

example/src/screens/InputTokenScreen/InputTokenScreen.tsx

@@ -23,7 +23,7 @@ import React, {
         <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper}>
           <SafeAreaView style={styles.wrapper}>
             <Space mh="m" mv="s">
-              <Space mb="l">
+              <Space mb="l" style={styles.center}>
                 <Text color={COLORS.WHITE} header>
                   Dolby.io
                 </Text>

example/src/screens/JoinScreen/JoinScreen.style.ts

@@ -19,7 +19,11 @@ export default StyleSheet.create({
     borderRadius: SPACE_S,
     height: SPACE_XL,
   },
-
+  center: {
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+  },
   menuButton: {
     justifyContent: 'center',
     flexDirection: 'row',

example/src/screens/JoinScreen/JoinScreen.tsx

@@ -111,10 +111,12 @@ const JoinScreen: FunctionComponent = () => {
       <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper}>
         <SafeAreaView style={styles.wrapper}>
           <Space mh="m" mv="s">
-            <Text color={COLORS.WHITE} header size="m">
-              Join the Conference
-            </Text>
-            <Space mt="m">
+            <Space mt="s" style={styles.center}>
+              <Text color={COLORS.WHITE} header size="m">
+                Join the Conference
+              </Text>
+            </Space>
+            <Space mt="l">
               <Input
                 label="Conference alias"
                 onChange={setAlias}

example/src/screens/LoginScreen/LoginScreen.style.ts

@@ -4,4 +4,7 @@ export default StyleSheet.create({
   wrapper: {
     flex: 1,
   },
+  center: {
+    alignItems: 'center',
+  },
 });

example/src/screens/LoginScreen/LoginScreen.tsx

@@ -77,7 +77,7 @@ const LoginScreen: FunctionComponent = () => {
     <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper}>
       <SafeAreaView style={styles.wrapper}>
         <Space mh="m" mv="s">
-          <Space mb="l">
+          <Space mb="s" style={styles.center}>
             <Text color={COLORS.WHITE} header>
               Dolby.io
             </Text>

example/src/ui/FloatingButton/FloatingButton.style.ts

@@ -3,8 +3,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     position: 'absolute',
-    bottom: 20,
-    right: 20,
+    top: 20,
+    left: 20,
   },
   button: {
     backgroundColor: '#ffffff',