I want to layer it in my feed page because when I use bottom sheet modal, but when showing the bottom sheet page, the right icon is shown on top of the bottom sheet page too.
I want the icon on the right not to be displayed over the bottom syheet. I've tried many adjustments but to no avail.
Here's the code.
page Feed
return (<BottomSheetModalProvider><BottomSheetModal style={{}} ref={bottomSheetModalRef} index={1} snapPoints={snapPoints} onChange={handleSheetChanges}></BottomSheetModal><LinearGradient colors={['rgba(0,0,0,.3)', 'transparent']} style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '70%', }} /><Container><Video source={{ uri: item.uri }} rate={1.0} volume={1.0} isMuted={false} resizeMode="cover" shouldPlay={play} isLooping style={{ width: '100%', height: '100%', }} /></Container><Details><User>{item.username}</User><Tags>{item.tags}</Tags><MusicBox><FontAwesome name="music" size={15} color="#f5f5f5" /><Music>{item.music}</Music></MusicBox></Details><Actions><TouchableOpacity style={styles.BoxAction} onPress={handleLike}> <AntDesign style={{ alignSelf: 'center' }} name="heart" size={27} color={liked ? 'red' : '#fff'} /><TextAction>{item.likes}</TextAction> </TouchableOpacity><TouchableOpacity style={styles.BoxAction} onPress={handlePresentModalPress}> <FontAwesome style={{ alignSelf: 'center' }} name="commenting" size={27} color="#fff" /><TextAction>{item.comments}</TextAction> </TouchableOpacity> <BoxAction><FontAwesome style={{ alignSelf: 'center' }} name="share" size={27} color="#fff" /><TextAction>Share</TextAction></BoxAction><BoxAction><FontAwesome style={{ alignSelf: 'center' }} name="bookmark" size={27} color="#fff" /><TextAction>Bookmark</TextAction><TextAction>{item.bookmark}</TextAction></BoxAction><BoxAction><Animated.View style ={{ borderRadius: 50, borderWidth: 12, borderColor: '#292929', transform: [ { rotate: rotateProp , }, ], }}><Image style={{ width: 35, height: 35, borderRadius: 25, }} source={{ uri: 'https://avatars3.githubusercontent.com/u/45601574', }} /></Animated.View><Lottie source={musicFly} progress={play ? spinValue : 0} style={{ width: 150, position: 'absolute', bottom: 0, right: 0 }} /></BoxAction></Actions><LinearGradient colors={['transparent', 'rgba(0,0,0,.4)']} style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '50%', }} /></BottomSheetModalProvider> );};styles
export const Container = styled.View` background: #fff; position: absolute; width: 100%; height: 100%; z-index: -1;`;export const Details = styled.View` position: absolute; padding: 20px 10px; width: 65%; flex-direction: column; bottom: 0; z-index: 1;`;export const User = styled.Text` font-size: 18px; font-weight: bold; padding: 10px 0; color: #fff;`;export const Tags = styled.Text` font-size: 16px; font-weight: bold; line-height: 22px; padding: 5px 0; color: #fff;`;export const MusicBox = styled.View` flex-direction: row; align-items: center;`;export const Music = styled.Text` font-size: 15px; padding: 5px 5px 5px 15px; flex-shrink: 1; color: #fff;`;export const Actions = styled.View` flex-direction: column; position: absolute; flex: 0; justify-content: center; align-items: center; padding: 20px 0; bottom: 0; right: 10px; z-index: 1;`;export const BoxAction = styled.TouchableOpacity.attrs({ activeOpacity: 0.8,})` flex-direction: column; padding: 5px 0;`;export const TextAction = styled.Text` color: #fff; padding: 5px 0;`;export const inputAction = styled.TextInput` justityContent:'flex-end' borderColor: 'gray',`;enter image desenter image description herecription here
I want the icon on the right not to be displayed over the bottom sheet. I've tried many adjustments but to no avail.