Sticky footer in react native like flipkart

Question

I want to develop a sticky footer that can be scrolled up. Once some part of UI is scrolled then the footer can also be moved up and the rest of the UI is visible. just like the Flipkart product detail page appears.

Pramod · Accepted Answer

create a sticky button at bottom
Get you element scroll position in srollview
Get screen height
Calculate approx height from where your element is visible in scrollview
Hide the sticky button when your element is visible

Working example: https://snack.expo.io/@msbot01/playful-bagel (view in iphone or android mode)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  Flatlist,
  Dimensions
} from 'react-native';

var height = Dimensions.get('window').height

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true
    };
  }

  componentDidMount(){
    console.log('height::'+height)
  }





  render() {
      return (

         
           this.scrollview = s}
            onScroll= {(event) => {
              // console.log(event.nativeEvent.contentOffset.y)

                  if (event.nativeEvent.contentOffset.y >=173) {
                  this.setState({
                    visible:false
                  })
                  }else{
                     this.setState({
                        visible:true
                    })
                  }
              }}

              onScrollEndDrag={(event) => {
                if (event.nativeEvent.contentOffset.y >=173) {
                  this.setState({
                    visible:false
                  })
                  }else{
                     this.setState({
                        visible:true
                    })
                  }
              }}
            >
           
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20


              
                Button
              

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20

          


           

            {this.state.visible==true?
              
                Button
            :null}



        


    );
  }
}

Sticky footer in react native like flipkart

Answers (1)

Related Questions