CODEWITHSUNDEEP
react-native
Finn
Finn

Reputation: 79

How to make sticky footer with react native scrollview?

I Had this code with sticky component on the header, how can i move this to the bottom, like footer button on instagram (when you open the app, it already stick in the bottom) ? here's my code

function MyApp() {
    return (
<ScrollView
   stickyHeaderIndices={[0]}
   showsVerticalScrollIndicator={false}>

      <View>
         <MyStickyFooter/>
      </View>

       <View>
         <Text> Hello world </Text>
         <Text> 3000 long lorem word </Text>
      </View>

</ScrollView>)}



    const MyStickyFooter = () => {
    
      return (
    <View style={{}}>
           <Button> I am a sticky footer </Button>
    </View>
    
    )};

Upvotes: 3

Views: 4003

Answers (2)

totallytotallyamazing
totallytotallyamazing

Reputation: 2923

Here's a basic layout which allows a sticky footer and a sticky header too with react native:

<SafeAreaView style={{flex: 1}}>
    <View style={{flex: 0, flex: 'row'}}>
        <TouchableHighlight 
            style={{margin: 3, width: 150, borderWidth: 4}}
            onPress={() => {
                myFunction();
            }}
        >
            <Text>fixed top button</Text>
        </TouchableHighlight>
    </View>
    <ScrollView 
        scrollEnabled={true}
        nestedScrollEnabled={true}
    >
        <Text>
            Everything fit to scroll...
        </Text>
    </ScrollView>
    <View style={{flex: 0, flex: 'row'}}>
        <TouchableHighlight 
            style={{margin: 3, width: 150, borderWidth: 4}}
            onPress={() => {
                myFunction();
            }}
        >
            <Text>fixed bottom button</Text>
        </TouchableHighlight>
    </View>
</SafeAreaView>

Here's a similar basic layout which allows a sticky footer and a sticky header too with react native and tailwinds css styling:

<SafeAreaView 
    className="flex-1"
>
    <View className="flex flex-row justify-center">
        <TouchableHighlight 
            className="m-3 w-60 p-1 rounded-xl border-4"
            onPress={() => {
                myFunction();
            }}
        >
            <Text className="text-center text-lg">fixed top button</Text>
        </TouchableHighlight>
    </View>
    <ScrollView 
        scrollEnabled={true}
        nestedScrollEnabled={true}
    >
        <Text>
            Everything fit to scroll...
        </Text>
    </ScrollView>
    <View className="flex flex-row justify-center">
        <TouchableHighlight 
            className="m-3 w-60 p-1 rounded-xl border-4"
            onPress={() => {
                myFunction();
            }}
        >
            <Text className="text-center text-lg">fixed bottom button</Text>
        </TouchableHighlight>
    </View>
</SafeAreaView>

Upvotes: 0

Ariel Perez
Ariel Perez

Reputation: 519

You should move out the MyStickyFooter component from your ScrollView.

You should have something like this:

<View style={....}>
  <ScrollView>
     ... components
  </ScrollView>
  <MyStickyFooter/>
</View>

Upvotes: 5

Related Questions