Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork148
Open
Description
Hi,
I’d like to know how to properly adjust the width value when the app is in landscape mode.
Is there a recommended approach or best practice for handling this?
I tried setting a width limit using containerStyle in landscape mode, but it doesn’t seem to apply — the modal still expands to the full width of the screen.
import{useRef}from'react'import{Platform,View}from'react-native'importActionSheet,{ActionSheetRef}from'react-native-actions-sheet'import{StyleSheet}from'react-native-unistyles'import{useSignal}from'@/utils/signals-extends'import{useViewerContext}from'@/screens/Viewer/context/ViewerContext'import{ColorToken}from'@/types/unitheme/token'typeBottomModalProps={modalId:stringhandleClose:()=>voidchildren:React.ReactNodeindicatorStyle?:objectbackgroundColor?:ColorTokengestureEnabled?:boolean}constBottomModal=({modalId,handleClose,children,indicatorStyle={},backgroundColor='bgViewrScreen',gestureEnabled=false,}:BottomModalProps)=>{constactionSheetRef=useRef<ActionSheetRef>(null)letorientation:DeviceOrientation='LANDSCAPE'return(<ActionSheetref={actionSheetRef}id={modalId}isModalgestureEnabled={gestureEnabled}headerAlwaysVisiblesnapPoints={[100]}initialSnapIndex={0}onClose={handleClose}keyboardHandlerEnabled={Platform.OS==='ios'}containerStyle={styles.actionSheet(orientation,backgroundColor)}indicatorStyle={indicatorStyle}>{children}</ActionSheet>)}exportdefaultBottomModalconststyles=StyleSheet.create(theme=>({actionSheet:(orientation:DeviceOrientation,backgroundColor:ColorToken,)=>({width:orientation==='LANDSCAPE' ?390 :undefined,maxWidth:orientation==='LANDSCAPE' ?390 :undefined,alignSelf:orientation==='LANDSCAPE' ?'center' :undefined,height:orientation==='LANDSCAPE' ?240 :undefined,backgroundColor:theme.color[backgroundColor],borderTopLeftRadius:16,borderTopRightRadius:16,borderBottomLeftRadius:orientation==='LANDSCAPE' ?16 :0,borderBottomRightRadius:orientation==='LANDSCAPE' ?16 :0,}),}))
And here’s an example code using BottomModal:
...return(<BottomModalmodalId="viewer-hands"handleClose={handleClose}gestureEnabledbackgroundColor="gray900s"><Viewstyle={styles.container}><Viewstyle={styles.header}><VTextstyle={styles.headerTitle}Test</VText></View><Viewstyle={styles.content}><Viewstyle={styles.handsContainer}>,,,</View></View></View></BottomModal>)conststyles=StyleSheet.create(theme=>({bottomModalContainer:{backgroundColor:theme.color.gray900s,},container:{backgroundColor:theme.color.gray900s,},header:{backgroundColor:'#191919',paddingHorizontal:16,paddingTop:24,paddingBottom:16,},headerTitle:{fontFamily:'Pretendard',fontWeight:'600',fontSize:20,lineHeight:24,color:'#F7F7F7',},content:{backgroundColor:'#191919',paddingHorizontal:16,marginBottom:24,},....}))
Metadata
Metadata
Assignees
Labels
No labels