Fix animations

example/src/App.tsx

@@ -1,11 +1,12 @@
 import 'react-native-gesture-handler';
+import { BackgroundWrapper } from '@components/BackgroundWrapper';
 import {
   NotoSans_400Regular,
   NotoSans_500Medium,
   NotoSans_600SemiBold,
 } from '@expo-google-fonts/noto-sans';
 import { RootStack } from '@model/NavigationTypes';
-import { NavigationContainer } from '@react-navigation/native';
+import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { CreateRoom } from '@screens/CreateRoom';
 import { InitialScreen } from '@screens/InitialScreen';
@@ -53,30 +54,58 @@ export default function App() {
 
   if (!fontsLoaded) return null;
 
+  const navTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: 'transparent',
+    },
+  };
+
   return (
-    <VideoroomContextProvider>
-      <NavigationContainer linking={linking}>
-        <Stack.Navigator
-          initialRouteName="InitialScreen"
-          screenOptions={{
-            headerBackTitle: 'Back',
-          }}
-        >
-          <Stack.Screen
-            name="InitialScreen"
-            component={InitialScreen}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name="CreateRoom"
-            component={CreateRoom}
-            options={{ title: 'New meeting' }}
-          />
-          <Stack.Screen name="Room" component={Room} />
-          <Stack.Screen name="JoinRoom" component={JoinRoomStub} />
-          <Stack.Screen name="Preview" component={Preview} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </VideoroomContextProvider>
+    <BackgroundWrapper>
+      <VideoroomContextProvider>
+        <NavigationContainer linking={linking} theme={navTheme}>
+          <Stack.Navigator
+            initialRouteName="InitialScreen"
+            screenOptions={{
+              headerBackTitle: 'Back',
+            }}
+          >
+            <Stack.Screen
+              name="InitialScreen"
+              component={InitialScreen}
+              options={{
+                headerShown: false,
+                cardStyle: { backgroundColor: 'transparent' },
+              }}
+            />
+            <Stack.Screen
+              name="CreateRoom"
+              component={CreateRoom}
+              options={{
+                title: 'New meeting',
+                cardStyle: { backgroundColor: 'transparent' },
+              }}
+            />
+            <Stack.Screen name="Room" component={Room} />
+            <Stack.Screen
+              name="JoinRoom"
+              component={JoinRoomStub}
+              options={{
+                cardStyle: { backgroundColor: 'transparent' },
+              }}
+            />
+            <Stack.Screen
+              name="Preview"
+              component={Preview}
+              options={{
+                cardStyle: { backgroundColor: 'transparent' },
+              }}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </VideoroomContextProvider>
+    </BackgroundWrapper>
   );
 }

example/src/components/BackgroundAnimation.tsx

@@ -0,0 +1,38 @@
+import { useCardAnimation } from '@react-navigation/stack';
+import React, { ReactNode } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+type BackgroundAnimationType = {
+  children: ReactNode;
+};
+
+const { width } = Dimensions.get('window');
+
+export const BackgroundAnimation = ({ children }: BackgroundAnimationType) => {
+  const { next, current } = useCardAnimation();
+
+  return (
+    <Animated.View
+      style={{
+        flex: 1,
+        transform: [
+          {
+            translateX: next
+              ? next.progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, -width],
+                  extrapolate: 'clamp',
+                })
+              : current.progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [width, 0],
+                  extrapolate: 'clamp',
+                }),
+          },
+        ],
+      }}
+    >
+      {children}
+    </Animated.View>
+  );
+};

example/src/screens/CreateRoom.tsx

@@ -1,11 +1,13 @@
-import { BackgroundWrapper } from '@components/BackgroundWrapper';
+import { BackgroundAnimation } from '@components/BackgroundAnimation';
 import { Modal } from '@components/Modal';
 import { TextInput } from '@components/TextInput';
 import { Typo } from '@components/Typo';
 import { StandardButton } from '@components/buttons/StandardButton';
 import { RootStack } from '@model/NavigationTypes';
 import { useHeaderHeight } from '@react-navigation/elements';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useCardAnimation } from '@react-navigation/stack';
+import { checkIfStringContainsOnlyWhitespaces } from '@utils';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import {
@@ -31,6 +33,7 @@ export const CreateRoom = ({ navigation, route }: Props) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const modalAction = useRef<GoBackAction>();
   const { roomName, setRoomName, username, setUsername } = useVideoroomState();
+  const { next, current } = useCardAnimation();
 
   useEffect(() => {
     if (route.params?.roomName) {
@@ -55,8 +58,27 @@ export const CreateRoom = ({ navigation, route }: Props) => {
       navigation.removeListener('beforeRemove', handleBeforeRemoveEvent);
   }, [navigation, roomName, username]);
 
+  useEffect(() => {
+    navigation.setOptions({
+      headerStyle: {
+        //@ts-ignore
+        opacity: next
+          ? 0
+          : current.progress.interpolate({
+              inputRange: [0, 0.99, 1],
+              outputRange: [0, 0, 1],
+            }),
+      },
+    });
+  }, []);
+
   const shouldEnableCreateRoomButton = () => {
-    return !isEmpty(username) && !isEmpty(roomName);
+    return (
+      !isEmpty(username) &&
+      !isEmpty(roomName) &&
+      !checkIfStringContainsOnlyWhitespaces(username) &&
+      !checkIfStringContainsOnlyWhitespaces(roomName)
+    );
   };
 
   const openPreview = () => {
@@ -90,7 +112,7 @@ export const CreateRoom = ({ navigation, route }: Props) => {
   }, []);
 
   return (
-    <BackgroundWrapper hasHeader>
+    <BackgroundAnimation>
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,
@@ -169,7 +191,7 @@ export const CreateRoom = ({ navigation, route }: Props) => {
           </View>
         </KeyboardAvoidingView>
       </ScrollView>
-    </BackgroundWrapper>
+    </BackgroundAnimation>
   );
 };
 

example/src/screens/InitialScreen.tsx

@@ -1,12 +1,12 @@
-import { BackgroundWrapper } from '@components/BackgroundWrapper';
+import { BackgroundAnimation } from '@components/BackgroundAnimation';
 import { Typo } from '@components/Typo';
 import { CardButton } from '@components/buttons/CardButton';
 import React from 'react';
 import { View, StyleSheet, Image } from 'react-native';
 
 export const InitialScreen = ({ navigation }) => {
   return (
-    <BackgroundWrapper>
+    <BackgroundAnimation>
       <View style={styles.content}>
         <View style={styles.header}>
           <Image
@@ -40,7 +40,7 @@ export const InitialScreen = ({ navigation }) => {
           </CardButton>
         </View>
       </View>
-    </BackgroundWrapper>
+    </BackgroundAnimation>
   );
 };
 

example/src/screens/Preview.tsx

@@ -1,5 +1,5 @@
 import { BrandColors } from '@colors';
-import { BackgroundWrapper } from '@components/BackgroundWrapper';
+import { BackgroundAnimation } from '@components/BackgroundAnimation';
 import { Typo } from '@components/Typo';
 import { InCallButton } from '@components/buttons/InCallButton';
 import { StandardButton } from '@components/buttons/StandardButton';
@@ -98,7 +98,7 @@ export const Preview = ({ navigation, route }: Props) => {
   ]);
 
   return (
-    <BackgroundWrapper hasHeader>
+    <BackgroundAnimation>
       <View style={styles.content}>
         <View style={styles.header}>
           <Typo variant="h4">Videoconferencing for everyone</Typo>
@@ -155,7 +155,7 @@ export const Preview = ({ navigation, route }: Props) => {
           <Typo variant="label">Step 2/2</Typo>
         </View>
       </View>
-    </BackgroundWrapper>
+    </BackgroundAnimation>
   );
 };
 

example/src/shared/utils.ts

@@ -10,3 +10,7 @@ export const getShortUsername = (username: string) => {
     .join('')
     .toUpperCase();
 };
+
+export const checkIfStringContainsOnlyWhitespaces = (val: string) => {
+  return !val.trim();
+};