I need to change this image slider class component to functional component
import * as React from "react";
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";
const DEVICE_WIDTH = Dimensions.get("window").width;
class BackgroundCarousel extends React.Component {
scrollRef = React.createRef();
constructor(props) {
super(props);
this.state = {
selectedIndex: 0
};
this.scrollRef = React.createRef();
}
componentDidMount = () => {
setInterval(() => {
this.setState(
prev => ({
selectedIndex:
prev.selectedIndex === this.props.images.length - 1
? 0
: prev.selectedIndex + 1
}),
() => {
this.scrollRef.current.scrollTo({
animated: true,
x: DEVICE_WIDTH * this.state.selectedIndex,
y: 0
});
}
);
}, 3000);
};
setSelectedIndex = event => {
const contentOffset = event.nativeEvent.contentOffset;
const viewSize = event.nativeEvent.layoutMeasurement;
// Divide the horizontal offset by the width of the view to see which page is visible
const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
this.setState({ selectedIndex });
};
render() {
const { images } = this.props;
const { selectedIndex } = this.state;
return (
<View style={{ height: "100%", width: "100%" }}>
<ScrollView
horizontal
pagingEnabled
onMomentumScrollEnd={this.setSelectedIndex}
ref={this.scrollRef}
>
{images.map(image => (
<Image
style={styles.backgroundImage}
source={{ uri: image }}
key={image}
/>
))}
</ScrollView>
<View style={styles.circleDiv}>
{images.map((image, i) => (
<View
style={[
styles.whiteCircle,
{ opacity: i === selectedIndex ? 0.5 : 1 }
]}
key={image}
active={i === selectedIndex}
/>
))}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
height: "100%",
width: Dimensions.get("window").width
},
circleDiv: {
position: "absolute",
bottom: 15,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 10
},
whiteCircle: {
width: 6,
height: 6,
borderRadius: 3,
margin: 5,
backgroundColor: "#fff"
}
});
export { BackgroundCarousel };
When I change this, I have error.
import React ,{useState,useEffect} from 'react'
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";
const DEVICE_WIDTH = Dimensions.get("window").width;
const BackgroundCarousel =({ images })=>{
// const isCarousel = React.useRef(null)
const scrollRef = React.useRef();
const[selectedIndex,setSelectedIndex]=useState(0);
// useEffect(()=>{
// setInterval(() => {
// this.setState(
// prev => ({
// selectedIndex:
// prev.selectedIndex === this.props.images.length - 1
// ? 0
// : prev.selectedIndex + 1
// }),
// () => {
// this.scrollRef.current.scrollTo({
// animated: true,
// x: DEVICE_WIDTH * this.state.selectedIndex,
// y: 0
// });
// }
// );
// }, 3000);
// })
// componentDidMount = () => {
// setInterval(() => {
// this.setState(
// prev => ({
// selectedIndex:
// prev.selectedIndex === this.props.images.length - 1
// ? 0
// : prev.selectedIndex + 1
// }),
// () => {
// this.scrollRef.current.scrollTo({
// animated: true,
// x: DEVICE_WIDTH * this.state.selectedIndex,
// y: 0
// });
// }
// );
// }, 3000);
// };
useEffect(()=>{
setSelectedIndex = event => {
const contentOffset = event.nativeEvent.contentOffset;
const viewSize = event.nativeEvent.layoutMeasurement;
// Divide the horizontal offset by the width of the view to see which page is visible
const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
this.setState({ selectedIndex });
};
})
return (
<View style={{ height: "100%", width: "100%" }}>
<ScrollView
horizontal
pagingEnabled
onMomentumScrollEnd={selectedIndex}
ref={scrollRef}
>
{images.map(image => (
<Image
style={styles.backgroundImage}
source={{ uri: image }}
key={image}
/>
))}
</ScrollView>
<View style={styles.circleDiv}>
{images.map((image, i) => (
<View
style={[
styles.whiteCircle,
{ opacity: i === selectedIndex ? 0.5 : 1 }
]}
key={image}
active={i === selectedIndex}
/>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
backgroundImage: {
height: "100%",
width: Dimensions.get("window").width
},
circleDiv: {
position: "absolute",
bottom: 15,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 10
},
whiteCircle: {
width: 6,
height: 6,
borderRadius: 3,
margin: 5,
backgroundColor: "#fff"
}
});
export { BackgroundCarousel };
here is homescreen
import { BackgroundCarousel } from "../components/BackgroundCarousel";
<BackgroundCarousel images={[{uri : card.photo},{uri : card.photoo},{uri : card.photooo}]}/>
how can change to functional component and how can add press function to move image slider instead of auto slide by interval.
when press right corner , move to right and when press left corner ,move left.
please help me.
