Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 210
s-leg3ndz Avatar asked Jan 10 '18 13:01

s-leg3ndz


People also ask

How do you set the button position in react?

You can set buttons display to inline-block or inline. This will make the button to behave like normal text. After the above step set the buttons immediate divs text-align property to right. Hope this helps.

How do I fix button position in CSS?

If you want the button fixed at the lower right bottom, you can use position: absolute instead of fixed. It dissapear after scrolling down. Okay, if your container height is dynamic then try to use position: sticky or relative.


2 Answers

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

like image 102
Himanshu Dwivedi Avatar answered Sep 17 '22 09:09

Himanshu Dwivedi


<View style={{flex: 1}}>
    <ScrollView style={{backgroundColor:'yellow'}}>
          <Text>body</Text>
    </ScrollView>
    <View><Text>sticky footer</Text></View>
</View>
like image 21
Mahdi Bashirpour Avatar answered Sep 21 '22 09:09

Mahdi Bashirpour