Comments (5)
its fixed
use this schema inside full item:
<View style={{flex:1}}> <ScrollView style={{flex:1}}><TouchableWithoutFeedback> //write your code here </TouchableWithoutFeedback></ScrollView> </View>
and dont use contentContainerStyle for ScrollView
from react-native-swipe-up-down.
@davoodghaffarilive Great, I didn't have a chance to test it but it works is fine so we can close this issue, feel free to open it if you getting any issues about it in the future
from react-native-swipe-up-down.
@davoodghaffarilive can you share your code?
from react-native-swipe-up-down.
@minhchienwikipedia Thanks for your answer
<SwipeUpDown
itemFull={<FullItem/>}
itemMini={null}
ref={swipeUPRef}
onShowMini={() => console.log('mini')}
onShowFull={() => console.log('full')}
style={{ backgroundColor: '#222831', opacity: 1, borderTopLeftRadius:0, borderTopRightRadius:0}}
swipeHeight={30}
extraMarginTop={SwapHeight}
iconSize={1}
disableSwipeIcon
iconColor='#FFD369'
animation="easeInEaseOut"
/>
and its for fullItem :
<SafeAreaView style={styles.containerFull}>
<Ionicons name="ios-remove" size={30} color='#FFD369'/>
<ScrollView pagingEnabled={true} style={{height: '100%', width: '100%' }} contentContainerStyle={{ flex: 1}}>
<TouchableWithoutFeedback>
<View style={styles.mainContainerFull}>
<View style={{width: width, height: '65%', alignItems: 'center'}}>
<View style={styles.artworkWrapperFull}>
<Image source={{uri: trackArtwork}} style={styles.artworkImgFull}/>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', width: '90%'}}>
<View style= {{alignItems: 'flex-start'}}>
<Text style={styles.titleFull}>{trackTitle}</Text>
<Text style={styles.artistFull}>{trackArtist}</Text>
</View>
<View style={{alignItems: 'flex-end'}}>
<TouchableOpacity onPress={() => {}}>
<Ionicons name="heart-outline" size={35} color='#c3c3c3'/>
</TouchableOpacity>
</View>
</View>
<View>
<Slider
style={styles.progressContainerFull}
value={progress.position}
minimumValue={0}
maximumValue={progress.duration}
thumbImage={thumbIcon}
thumbTintColor="#c3c3c3"
minimumTrackTintColor="#c3c3c3"
maximumTrackTintColor="#FFF"
onSlidingComplete={async(value) => {
await TrackPlayer.seekTo(value);
}}
/>
<View style={styles.progressLabelContainerFull}>
<Text style={styles.progressLabelTxtFull}>
{new Date(progress.position * 1000).toISOString().substr(14, 5)}
</Text>
<Text style={styles.progressLabelTxtFull}>
{new Date((progress.duration - progress.position) * 1000).toISOString().substr(14, 5)}
</Text>
</View>
</View>
<View style={{flexDirection: 'row', width: '90%', justifyContent: 'space-between', marginTop: 15}}>
<TouchableOpacity onPress={changeRepeatMode}>
<MaterialCommunityIcons name={`${repeatIcon()}`} size={25} color={ repeatMode !== 'off' ? "#FFD369" : "#777777"} style={{marginTop:5}}/>
</TouchableOpacity>
<View style={styles.musicControllsFull}>
<TouchableOpacity onPress={SkipToPrevious}>
<Ionicons name="play-skip-back-outline" size={35} color='#c3c3c3'/>
</TouchableOpacity>
<TouchableOpacity onPress={()=> togglePlayback(playbackState)}>
<Ionicons name={playbackState === State.Playing ? "pause" : "play"} size={35} color='#c3c3c3'/>
</TouchableOpacity>
<TouchableOpacity onPress={skipToNext}>
<Ionicons name="play-skip-forward-outline" size={35} color='#c3c3c3'/>
</TouchableOpacity>
</View>
<TouchableOpacity onPress={() => {}}>
<MaterialCommunityIcons name="download-circle-outline" size={25} color='#c3c3c3' style={{marginTop:5}}/>
</TouchableOpacity>
</View>
<View style={{marginTop: 20, justifyContent: 'flex-start', width: width, marginLeft: '10%'}}>
<Text style={{color: '#EEEEEE', fontSize: 25, fontWeight: '700'}}>Playlist</Text>
<View style={{marginTop: 15}}>
{playlist.map((obj) =>
<View>
<Image source={{uri: obj.artwork}} style={{height : 100, width: 100}}/>
<Text key={obj.id}>{obj.artist}</Text>
</View>
)}
</View>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</SafeAreaView>
from react-native-swipe-up-down.
and dont use % in height, width in styles :)
use height: (height / 100) * 50 instead of '50%'
import { Dimensions, StyleSheet } from 'react-native';
const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
anystyle: {
height: (height / 100) * 50,
}
});
from react-native-swipe-up-down.
Related Issues (20)
- ScrollView into SwipeUpDown HOT 5
- How to close the this component? HOT 4
- Change swipe icon color HOT 4
- Move Up Move Down HOT 1
- TextInput inside the SwipeUpDown doesn't get focus HOT 3
- alignment issue on itemMini HOT 1
- Button inside itemFull can't be touched HOT 4
- 'showMini' function wasn't available HOT 2
- How to limit the height when its shows itemfull? HOT 4
- Default behaviour of the swipe up down component
- would like to request for typescript HOT 1
- how to close this swipeupdown component by code HOT 5
- Unexpected token, expected ";" (18: 5) HOT 1
- TouchableOpacity in itemFull props has no response HOT 3
- Prop ref does not exist in this component HOT 2
- Unable to resolve dependency tree HOT 2
- color backdrop
- Not working in landscape device orientation
- Slide down lags
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-swipe-up-down.