CODEWITHSUNDEEP
cssreact-native
s-leg3ndz
s-leg3ndz

Reputation: 3528

Set button in position "fixed" in React Native

I would like set button on the bottom right corner width fixed position in React Native.

position: fixed don't work in React Native and stickyHeaderIndices method in ScrollView does not allow to position an element above the others component.

Anyone have already test this feature ?

Upvotes: 21

Views: 71434

Answers (4)

Marco Antonio
Marco Antonio

Reputation: 121

Just put the component outside of the scrollview and set it with position absolute

Upvotes: 9

Slimani
Slimani

Reputation: 455

If you are using Native Base you can just use the Footer Component

Upvotes: 0

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

<View style={{flex: 1}}>
    <ScrollView style={{backgroundColor:'yellow'}}>
          <Text>body</Text>
    </ScrollView>
    <View><Text>sticky footer</Text></View>
</View>

Upvotes: 16

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8174

Try this:

render() {
    return (
      <View style={{flex:1}}>
        <View style={{borderWidth:1,position:'absolute',bottom:0,alignSelf:'flex-end'}}>
           <Button
             title="Press"
             color="#841584"
             accessibilityLabel="Press"/>
        </View>
      </View>
    );
  }

Output:

enter image description here

Upvotes: 17

Related Questions