CODEWITHSUNDEEP
javascriptreact-native
misi06
misi06

Reputation: 289

Sliding background images in React Native

I would like to create a background consisting of 4 images that would slide from left to right each delayed by 2 seconds. I have the images stored locally. I can't figure out how can i achieve that.

Thanks for your time!

Chris.

Upvotes: 3

Views: 6269

Answers (2)

marengga
marengga

Reputation: 31

Complementing JainZz's answer, here is my approach to make images slides infinitely

componentDidMount() {
    const numOfBackground = 4;
    let scrollValue = 0, scrolled = 0;
    setInterval(function () {
        scrolled++;
        if(scrolled < numOfBackground)
            scrollValue = scrollValue + width;
        else{
            scrollValue = 0;
            scrolled = 0
        }
        _scrollView.scrollTo({ x: scrollValue, animated: false })
    }, 3000);
}

I added a logic to check if it's the last image, and scroll it back to the first image. I also change scrollTo prop animated to false to make it look smoother

Upvotes: 3

JainZz
JainZz

Reputation: 612

Here is a sample logic for your question.

const { width, height } = Dimensions.get('window');
export default class CustomApp extends Component {

  componentDidMount() {
    let scrollValue = 0;
    setInterval(function(){
      scrollValue = scrollValue + width;   // width = screen width 
      _scrollView.scrollTo({x: scrollValue}) 
    }, 3000);
  }
  render() {
    return (
     <View>
       <ScrollView 
        ref={(scrollView) => { _scrollView = scrollView; }}
        horizontal={true} pagingEnabled={true} 
        >
          <Image source={require('./1.jpg')} style={{height, width}} />
          <Image source={require('./2.jpg')} style={{height, width}} />
          <Image source={require('./1.jpg')} style={{height, width}} />
          <Image source={require('./2.jpg')} style={{height, width}} />
       </ScrollView>
       <View style={{ position: 'absolute'}}>
         <Text>Page Content</Text>
      </View>
     </View>
    );
  }
}

Upvotes: 7

Related Questions