ScrollView is not work

[davoodghaffarilive]

hi
ScrollView is not work, i tried it with TouchableWithoutFeedback but its not work

[minhchienwikipedia]

@davoodghaffarilive can you share your code?

[davoodghaffarilive]

@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>

[davoodghaffarilive]

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

[minhchienwikipedia]

@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

[davoodghaffarilive]

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,
   }
});