How to make an item scrollable when its is already scrollable-CodePudding

This is my code for react native for a carousel its a slider type thingy. I want the slider to scroll aswell with the other components but its not working as scroll view has already been used.

import React, { useState } from "react";
import { SafeAreaView, StyleSheet, ScrollView, Text, Dimensions, View, Image } from "react-native";

function slider(){
  
const images = [
    'https://iili.io/yzQepI.png',
    'https://iili.io/yzQvIt.png'
]

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height
const Slider = () =>{
  
    
    const [imgActive, setimgActive] = useState(0);

    onchange = (nativeEvent)=>{
      if(nativeEvent){
        const slide = Math.ceil(nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width);
        if(slide != imgActive){
            setimgActive(slide);
        }
      }
    }    

    return(
      
    <SafeAreaView style={styles.container}>
    <View style={styles.wrap}>
       <ScrollView
       onScroll={({nativeEvent}) => onchange(nativeEvent)}
       showsHorizontalScrollIndicator={false}
       pagingEnabled
       horizontal
       style={styles.wrap}
       >
       {
        images.map((e,index) =>
        <Image
            key={e}
            resizeMode='stretch'
            style={styles.wrap}
            source={{uri: e}}
        />
        )
       }

       </ScrollView>
       
       <View style={styles.wrapDot}>
        {
            images.map((e,index) =>
              <Text 
                key={e} 
                style={imgActive == index ? styles.dotActive : styles.dot}
              >
                 ●
              </Text>            
            )
        }
       </View>

    </View>
    
    </SafeAreaView>
    )
    }

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    wrap:{
        width: WIDTH,
        height: HEIGHT * 0.25
    },
    wrapDot: {
        position: 'absolute',
        bottom: 0,
        flexDirection:'row',
        alignSelf: 'center'
    },
    dotActive:{
      margin: 3,
      color: 'black'
    },
    dot: {
        margin: 3,
        color: 'white'
    }

})

}
export default Slider;

I have to make it scrollable vertically too but I have tried many ways its not working

CodePudding user response：

you should try this

import React, { useState } from "react";
import { SafeAreaView, StyleSheet, ScrollView, Text, Dimensions, View, Image } from "react-native";

function slider(){

const images = [
'https://iili.io/yzQepI.png',
'https://iili.io/yzQvIt.png'
]

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height
const Slider = () =>{


const [imgActive, setimgActive] = useState(0);

onchange = (nativeEvent)=>{
  if(nativeEvent){
    const slide = Math.ceil(nativeEvent.contentOffset.x / 
 nativeEvent.layoutMeasurement.width);
    if(slide != imgActive){
        setimgActive(slide);
    }
  }
}    

return(
  
<SafeAreaView style={styles.container}>
       <ScrollView

 <View style={styles.wrap}>
   onScroll={({nativeEvent}) => onchange(nativeEvent)}
   showsHorizontalScrollIndicator={false}
   pagingEnabled
   horizontal
   style={styles.wrap}
   >
   {
    images.map((e,index) =>
    <Image
        key={e}
        resizeMode='stretch'
        style={styles.wrap}
        source={{uri: e}}
    />
    )
   }

          
   <View style={styles.wrapDot}>
    {
        images.map((e,index) =>
          <Text 
            key={e} 
            style={imgActive == index ? styles.dotActive : styles.dot}
          >
             ●
          </Text>            
        )
    }
   </View>

</View>
</ScrollView>

</SafeAreaView>
)
}

const styles = StyleSheet.create({
 container:{
    flex:1
},
wrap:{
    width: WIDTH,
    height: HEIGHT * 0.25
},
wrapDot: {
    position: 'absolute',
    bottom: 0,
    flexDirection:'row',
    alignSelf: 'center'
},
dotActive:{
  margin: 3,
  color: 'black'
},
dot: {
    margin: 3,
    color: 'white'
}

})

}
export default Slider;

CodePudding user response：

    import React, { useState } from "react";
import { SafeAreaView, StyleSheet, ScrollView, Text, Dimensions, View, Image } from "react-native";

function slider(){

const images = [
'https://iili.io/yzQepI.png',
'https://iili.io/yzQvIt.png'
]

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height
const Slider = () =>{


const [imgActive, setimgActive] = useState(0);

onchange = (nativeEvent)=>{
  if(nativeEvent){
    const slide = Math.ceil(nativeEvent.contentOffset.x / 
 nativeEvent.layoutMeasurement.width);
    if(slide != imgActive){
        setimgActive(slide);
    }
  }
}    

return(
  
<SafeAreaView style={styles.container}>
       <ScrollView

 <View style={styles.wrap}>
   onScroll={({nativeEvent}) => onchange(nativeEvent)}
   showsHorizontalScrollIndicator={false}
   pagingEnabled
   horizontal
   style={styles.wrap}
   >
   {
    images.map((e,index) =>
    <Image
        key={e}
        resizeMode='stretch'
        style={styles.wrap}
        source={{uri: e}}
    />
    )
   }

          
   <View style={styles.wrapDot}>
    {
        images.map((e,index) =>
          <Text 
            key={e} 
            style={imgActive == index ? styles.dotActive : styles.dot}
          >
             ●
          </Text>            
        )
    }
   </View>

</View>
</ScrollView>

</SafeAreaView>
)
}

const styles = StyleSheet.create({
 container:{
    flex:1
},
wrap:{
    width: WIDTH,
    height: HEIGHT * 0.25
},
wrapDot: {
    position: 'absolute',
    bottom: 0,
    flexDirection:'row',
    alignSelf: 'center'
},
dotActive:{
  margin: 3,
  color: 'black'
},
dot: {
    margin: 3,
    color: 'white'
}

})

}
export default Slider;