@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/features/feed/components/TopNavigation/TopNavigation.tsx

@@ -15,6 +15,7 @@ import AmityCreatePostMenuComponent from '../CreatePostMenu';
 import TextKeyElement from '../../../../elements/TextKeyElement/TextKeyElement';
 import { usePopup } from '../../../../hooks/usePopup';
 import Popup from '../../../../components/PopupMenu/PopupMenu';
+import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmitySocialHomeTopNavigationComponentType = {
   activeTab: string;
@@ -29,6 +30,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
   const theme = componentConfig.themeStyles;
   const { AmitySocialHomeTopNavigationComponentBehaviour } = useBehaviour();
   const { isOpen, setIsOpen, toggle } = usePopup();
+  const { isVisitorOrBot } = useAuth();
 
   const [myCommunitiesTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -169,7 +171,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
           >
             <Image source={searchIcon} style={styles.icon} />
           </TouchableOpacity>
-          {activeTab !== exploreTab && (
+          {!isVisitorOrBot && activeTab !== exploreTab && (
             <TouchableOpacity
               style={styles.iconBtn}
               onPress={onPressCreate}

package/src/social/features/livestream/Create/Create.tsx

@@ -30,6 +30,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { RoomStatus } from '../../../enums/roomStatus';
 import { AmityThumbnailActionComponent } from '../components/ThumbnailAction';
 import { StartLivestreamButton } from '../../../elements/StartLivestreamButton';
+import LiveStreamStartingThumbnail from '../../../components/LivestreamContent/LivestreamStartingThumbnail';
 import { PageID } from '../../../enums';
 import { useShareableLink } from '../../../../core/hooks/useShareableLink';
 import { ShareableLinkModel } from '../../../types';
@@ -293,8 +294,10 @@ function AmityCreateLivestreamPage() {
 
         setPost(newPost.data);
 
-        // Set isConnecting to false since LiveKit room is already connected
-        setIsConnecting(false);
+        // Do NOT set isConnecting to false here — keep the loading overlay
+        // visible until LiveKitRoom fires onConnected, which confirms the
+        // video stream is ready. Clearing it prematurely exposes the white
+        // background before the camera feed appears (PDT-3089).
 
         // Start the timer when live stream actually starts
         if (timerRef.current) {
@@ -467,16 +470,26 @@ function AmityCreateLivestreamPage() {
 
   return (
     <SafeAreaView style={styles.container}>
-      {(!isLive ||
-        (isLive && isConnecting) ||
-        (isLive && reconnecting && !isEnding) ||
-        isEnding) && (
+      {(!isLive || (isLive && reconnecting && !isEnding) || isEnding) && (
         <View
           style={[styles.overlay, !hasPermission && styles.noPermissionOverlay]}
         />
       )}
 
-      {/* Preview camera part */}
+      {/* Starting loading screen — shown instead of camera/LiveKit while
+          the stream connection is being established. Renders on top of the
+          black container so no white/blank flash on Android. */}
+      {isLive && isConnecting && (
+        <View style={styles.startingContainer}>
+          <LiveStreamStartingThumbnail />
+        </View>
+      )}
+
+      {/* Preview camera / livestream feed.
+          LiveKitRoom must always mount once roomToken is set so it can
+          establish the WebRTC connection and fire onConnected. While
+          isConnecting=true the LiveStreamStartingThumbnail (zIndex 60)
+          sits on top, hiding the blank RoomView from the user. */}
 
       {hasPermission ? (
         roomToken ? (
@@ -505,10 +518,13 @@ function AmityCreateLivestreamPage() {
           >
             <View style={styles.cameraContainer}>
               <View style={styles.camera}>
-                <RoomView
-                  onLocalParticipantReady={setLivekitParticipant}
-                  isFrontCamera={isFrontCamera}
-                />
+                {/* RoomView hidden while connecting — loading thumbnail covers it */}
+                {!isConnecting && (
+                  <RoomView
+                    onLocalParticipantReady={setLivekitParticipant}
+                    isFrontCamera={isFrontCamera}
+                  />
+                )}
               </View>
             </View>
           </LiveKitRoom>
@@ -520,7 +536,7 @@ function AmityCreateLivestreamPage() {
                   // eslint-disable-next-line react-native/no-inline-styles
                   style={{ flex: 1 }}
                   device={cameraDevice}
-                  isActive={true}
+                  isActive={!isConnecting}
                 />
               )}
             </View>
@@ -551,14 +567,7 @@ function AmityCreateLivestreamPage() {
         </View>
       )}
       {isLive ? (
-        isConnecting ? (
-          <View style={styles.connecting}>
-            <CircularProgressIndicator size={40} strokeWidth={2} />
-            <Typography.TitleBold style={styles.text}>
-              Starting live stream
-            </Typography.TitleBold>
-          </View>
-        ) : (
+        isConnecting ? null : (
           <>
             {!isEnding && reconnecting && (
               <View style={styles.connecting}>

package/src/social/features/livestream/Create/styles.ts

@@ -37,6 +37,17 @@ export const useStyles = () => {
     noPermissionOverlay: {
       backgroundColor: 'rgba(0, 0, 0, 1)',
     },
+    startingContainer: {
+      // Full-screen overlay that shows LiveStreamStartingThumbnail during
+      // the LiveKit connection phase. Sits above the camera but below the
+      // control elements (zIndex 100) so the UI doesn't flash white/black.
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 60,
+    },
     camera: {
       flex: 1,
       height: '100%',

package/src/social/features/livestream/Player/Player.tsx

@@ -1,5 +1,10 @@
-import { useEffect, useState, useRef } from 'react';
-import { View, TouchableOpacity, Platform } from 'react-native';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
 import { useStyles } from './styles';
 import LiveStreamEndThumbnail from '../../../components/LivestreamContent/LivestreamEndedThumbnail';
 import { SvgXml } from 'react-native-svg';
@@ -38,6 +43,8 @@ function AmityLiveStreamPlayerPage() {
   const [videoKey, setVideoKey] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const [wasLive, setWasLive] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+  const controlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const { roomId, post } = route.params;
   const { subscribedPost } = usePostSubscription(post?.postId);
@@ -150,6 +157,19 @@ function AmityLiveStreamPlayerPage() {
     }
   }, [room?.status, navigation]);
 
+  const showControlsTemporarily = useCallback(() => {
+    setShowControls(true);
+    if (controlsTimerRef.current) clearTimeout(controlsTimerRef.current);
+    controlsTimerRef.current = setTimeout(() => setShowControls(false), 4000);
+  }, []);
+
+  useEffect(() => {
+    showControlsTemporarily();
+    return () => {
+      if (controlsTimerRef.current) clearTimeout(controlsTimerRef.current);
+    };
+  }, [showControlsTemporarily]);
+
   const shouldShowEndThumbnail =
     room?.status === RoomStatus.ended ||
     (room?.status === RoomStatus.recorded && wasLive) ||
@@ -183,73 +203,93 @@ function AmityLiveStreamPlayerPage() {
           <TouchableOpacity style={styles.closeButton} onPress={closePlayer}>
             <SvgXml
               xml={close()}
-              width="28"
-              height="28"
+              width="24"
+              height="24"
               color={theme.colors.background}
             />
           </TouchableOpacity>
         </>
       ) : (
-        <View style={styles.container}>
-          {(room.status === RoomStatus.live ||
-            room.status === RoomStatus.waitingReconnect) && (
-            <View style={styles.liveRow}>
-              <View style={styles.status}>
-                <Typography.CaptionBold style={styles.live}>
-                  LIVE
-                </Typography.CaptionBold>
+        <TouchableWithoutFeedback onPress={showControlsTemporarily}>
+          <View style={styles.container}>
+            {!shouldShowEndThumbnail && (
+              <Video
+                key={
+                  Platform.OS === 'android'
+                    ? `${videoUrl}-${videoKey}`
+                    : videoUrl
+                }
+                ref={videoRef}
+                source={{
+                  uri:
+                    room.status === RoomStatus.recorded
+                      ? room.recordedPlaybackInfos[0]?.url
+                      : room.livePlaybackUrl,
+                  headers: {
+                    Authorization: `Bearer ${client?.token?.accessToken}`,
+                  },
+                  type: 'm3u8',
+                }}
+                style={styles.container}
+                resizeMode="contain"
+                controls={false}
+                paused={isPaused}
+                muted={false}
+                volume={1.0}
+                audioOutput="speaker"
+                playInBackground={false}
+                playWhenInactive={false}
+                repeat={false}
+                onLoad={() => {
+                  setIsVideoLoading(false);
+                  if (room.status === RoomStatus.recorded) {
+                    setIsPaused(false);
+                  }
+                }}
+              />
+            )}
+
+            {(room.status === RoomStatus.live ||
+              room.status === RoomStatus.waitingReconnect) && (
+              <View style={styles.liveRow}>
+                {Platform.OS !== 'android' && (
+                  <View style={styles.status}>
+                    <Typography.CaptionBold style={styles.live}>
+                      LIVE
+                    </Typography.CaptionBold>
+                  </View>
+                )}
+                {shareLink && (
+                  <MenuButton
+                    pageId={PageID.livestream_player_page}
+                    variant="vertical"
+                    onPress={handleSharePress}
+                  />
+                )}
               </View>
-              {shareLink && (
-                <MenuButton
-                  pageId={PageID.livestream_player_page}
-                  variant="vertical"
-                  onPress={handleSharePress}
+            )}
+
+            {showControls && (
+              <TouchableOpacity
+                style={styles.liveCloseButton}
+                onPress={closePlayer}
+              >
+                <SvgXml
+                  xml={close()}
+                  width="24"
+                  height="24"
+                  color={theme.colors.background}
                 />
-              )}
-            </View>
-          )}
-          {!shouldShowEndThumbnail && (
-            <Video
-              key={
-                Platform.OS === 'android' ? `${videoUrl}-${videoKey}` : videoUrl
-              }
-              ref={videoRef}
-              source={{
-                uri:
-                  room.status === RoomStatus.recorded
-                    ? room.recordedPlaybackInfos[0]?.url
-                    : room.livePlaybackUrl,
-                headers: {
-                  Authorization: `Bearer ${client?.token?.accessToken}`,
-                },
-                type: 'm3u8',
-              }}
-              style={styles.container}
-              resizeMode="cover"
-              controls={true}
-              fullscreenOrientation="landscape"
-              paused={isPaused}
-              muted={false}
-              volume={1.0}
-              audioOutput="speaker"
-              playInBackground={false}
-              playWhenInactive={false}
-              repeat={false}
-              onLoad={() => {
-                setIsVideoLoading(false);
-                if (room.status === RoomStatus.recorded) {
-                  setIsPaused(false);
-                }
-              }}
-            />
-          )}
+              </TouchableOpacity>
+            )}
 
-          {isVideoLoading && (
-            <View style={styles.connecting}>
-              <CircularProgressIndicator size={40} strokeWidth={2} />
-            </View>
-          )}
-        </View>
+            {isVideoLoading && (
+              <View style={styles.connecting}>
+                <CircularProgressIndicator size={40} strokeWidth={2} />
+              </View>
+            )}
+          </View>
+        </TouchableWithoutFeedback>
       )}
 
       {((room.status === RoomStatus.live && reconnecting) ||

package/src/social/features/livestream/Player/styles.ts

@@ -56,10 +56,28 @@ export const useStyles = () => {
       justifyContent: 'center',
     },
     closeButton: {
-      zIndex: 1,
+      zIndex: 10,
       right: 16,
       top: insets.top + 20,
       position: 'absolute',
+      width: 32,
+      height: 32,
+      borderRadius: 100,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    liveCloseButton: {
+      position: 'absolute',
+      left: 16,
+      top: insets.top - 45,
+      zIndex: 10,
+      width: 32,
+      height: 32,
+      borderRadius: 100,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
     connecting: {
       position: 'absolute',

package/src/social/features/livestream/components/ThumbnailAction/ThumbnailAction.tsx

@@ -15,7 +15,7 @@ const AmityThumbnailActionComponent = ({
   onChangeThumbnail,
   onDeleteThumbnail,
   pageId = PageID.WildCardPage,
-}: AmityThumbnailActionComponentProps): React.JSX.Element => {
+}: AmityThumbnailActionComponentProps): React.ReactElement => {
   const componentId = ComponentID.thumbnail_action;
   const { themeStyles } = useAmityComponent({ pageId, componentId });
   const styles = useStyles(themeStyles);

package/src/social/features/poll/Composer/PollPostComposer.tsx

@@ -375,6 +375,7 @@ const PollPostComposer = () => {
         ref={bottomSheetRef}
         style={styles.bottomSheet}
         height={(Platform.OS === 'ios' && isShowingDatePicker && 600) || 400}
+        disableBodyPanning={Platform.OS === 'android'}
       >
         {Platform.OS === 'android' && <AndroidBottomSheet />}
         {Platform.OS === 'ios' && <IOSBottomSheet />}

package/src/social/features/poll/Composer/components/PollDurationBottomSheet.tsx

@@ -1,6 +1,11 @@
 import { View, TouchableOpacity } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SvgXml } from 'react-native-svg';
-import { arrowRight } from '../../../../../core/assets/icons';
+import {
+  arrowRight,
+  radioChecked,
+  radioUnchecked,
+} from '../../../../../core/assets/icons';
 import { Radio } from '../../../../../core/components/Radio';
 import { Typography } from '../../../../../core/components/Typography/Typography';
 import { IOSPollDurationPicker } from './PollDurationPicker';
@@ -70,31 +75,45 @@ export function IOSBottomSheet() {
   );
 }
 
+// Android: Pressable is unreliable inside @devvie/bottom-sheet's PanResponder-
+// controlled Animated.View — touches are intercepted before reaching Pressable.
+// Use TouchableOpacity rows with explicit radio SVG icons instead.
 export function AndroidBottomSheet() {
-  const { styles } = useStyles();
+  const { styles, theme } = useStyles();
+  const { bottom } = useSafeAreaInsets();
   const { duration, setDuration, bottomSheetRef } =
     usePollPostComposerContext();
 
   return (
-    <Radio.Group
-      value={duration.value}
-      onChange={(value) => {
-        setDuration(
-          androidDurationOptions.find((option) => option.value === value)
-        );
-        bottomSheetRef.current?.close();
-      }}
-    >
-      {androidDurationOptions.map((option) => (
-        <Radio.Option value={option.value} accessibilityLabel={option.label}>
-          <Radio.Label>
+    <View style={{ paddingBottom: bottom + 8 }}>
+      {androidDurationOptions.map((option) => {
+        const isSelected = duration.value === option.value;
+        return (
+          <TouchableOpacity
+            key={option.label}
+            style={styles.androidDurationOption}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: isSelected }}
+            accessibilityLabel={option.label}
+            onPress={() => {
+              setDuration(option);
+              bottomSheetRef.current?.close();
+            }}
+          >
             <Typography.BodyBold style={styles.base}>
               {option.label}
             </Typography.BodyBold>
-          </Radio.Label>
-          <Radio.Icon />
-        </Radio.Option>
-      ))}
-    </Radio.Group>
+            <SvgXml
+              width={24}
+              height={24}
+              xml={isSelected ? radioChecked() : radioUnchecked()}
+              color={
+                isSelected ? theme.colors.primary : theme.colors.baseShade3
+              }
+            />
+          </TouchableOpacity>
+        );
+      })}
+    </View>
   );
 }

package/src/social/features/poll/Composer/components/PollDurationPicker.tsx

@@ -1,34 +1,56 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useStyles } from '../styles';
 import { arrowLeft } from '../../../../../core/assets/icons';
 import { Typography } from '../../../../../core/components/Typography/Typography';
 import dayjs from 'dayjs';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import {
-  androidDurationOptions,
-  usePollPostComposerContext,
-} from '../PollPostComposer';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import { usePollPostComposerContext } from '../PollPostComposer';
 
 export function AndroidPollDurationPicker() {
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
   const {
     duration,
     selectedDate,
     setSelectedTime,
     selectedTime,
     setSelectedDate,
-    setIsShowingDatePicker,
-    setIsTimePickerShown,
-    isShowingDatePicker,
-    isTimePickerShown,
   } = usePollPostComposerContext();
   const endOn = dayjs().add(duration.value, 'day');
+  const isCustom = duration.value === 0;
+
+  const openDatePicker = () => {
+    DateTimePickerAndroid.open({
+      mode: 'date',
+      value: selectedDate,
+      minimumDate: dayjs().toDate(),
+      maximumDate: dayjs().add(1, 'month').toDate(),
+      onChange: (event, date) => {
+        if (event.type === 'set' && date) {
+          setSelectedDate(date);
+        }
+      },
+    });
+  };
+
+  const openTimePicker = () => {
+    DateTimePickerAndroid.open({
+      mode: 'time',
+      value: selectedTime,
+      is24Hour: true,
+      onChange: (event, time) => {
+        if (event.type === 'set' && time) {
+          setSelectedTime(time);
+        }
+      },
+    });
+  };
 
   return (
     <View>
-      {duration.label !==
-      androidDurationOptions[androidDurationOptions.length - 1].label ? (
+      {!isCustom ? (
         <Typography.Caption style={styles.base}>
           Ends on {endOn.format('DD MMM')} at {endOn.format('HH:mm A')}
         </Typography.Caption>
@@ -38,7 +60,7 @@ export function AndroidPollDurationPicker() {
           <View style={styles.androidDateTimeContainer}>
             <TouchableOpacity
               style={styles.androidDateTimeButton}
-              onPress={() => setIsShowingDatePicker(true)}
+              onPress={openDatePicker}
             >
               <Typography.Body style={styles.base}>
                 {dayjs(selectedDate).format('DD MMM YYYY')}
@@ -46,7 +68,7 @@ export function AndroidPollDurationPicker() {
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.androidDateTimeButton}
-              onPress={() => setIsTimePickerShown(true)}
+              onPress={openTimePicker}
             >
               <Typography.Body style={styles.base}>
                 {dayjs(selectedTime).format('HH:mm A')}
@@ -55,42 +77,13 @@ export function AndroidPollDurationPicker() {
           </View>
         </View>
       )}
-      {isShowingDatePicker && (
-        <DateTimePicker
-          mode="date"
-          locale="en_US"
-          display="compact"
-          value={selectedDate}
-          minimumDate={dayjs().toDate()}
-          accentColor={theme.colors.primary}
-          maximumDate={dayjs().add(1, 'month').toDate()}
-          onChange={(event, date) => {
-            setIsShowingDatePicker(false);
-            if (event.type === 'set') {
-              setSelectedDate(date);
-            }
-          }}
-        />
-      )}
-      {isTimePickerShown && (
-        <DateTimePicker
-          mode="time"
-          display="clock"
-          value={selectedTime}
-          onChange={(event, time) => {
-            setIsTimePickerShown(false);
-            if (event.type === 'set') {
-              setSelectedTime(time);
-            }
-          }}
-        />
-      )}
     </View>
   );
 }
 
 export function IOSPollDurationPicker() {
   const { styles, theme } = useStyles();
+  const { width } = useWindowDimensions();
   const {
     setDuration,
     selectedDate,
@@ -138,7 +131,7 @@ export function IOSPollDurationPicker() {
         display="inline"
         value={selectedDate}
         minimumDate={dayjs().toDate()}
-        style={styles.iOSDateTimePicker}
+        style={[styles.iOSDateTimePicker, { width }]}
         accentColor={theme.colors.primary}
         maximumDate={dayjs().add(1, 'month').toDate()}
         onChange={(event, date) => {

package/src/social/features/poll/Composer/styles.ts

@@ -133,6 +133,13 @@ export const useStyles = () => {
     },
     iOSDateTimePicker: {
       height: 600,
+      marginLeft: 32,
+    },
+    androidDurationOption: {
+      padding: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
     },
     iOSDateTimeHeader: {
       paddingHorizontal: 16,