21

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 ?

Mahdi Bashirpour
  • 17,147
  • 12
  • 117
  • 144
s-leg3ndz
  • 3,260
  • 10
  • 32
  • 60
  • 1
    could you elaborate more or add a sketch of what you are trying to achieve? Do you just want a button on the lower right corner that sits on top of the scrollview and does not scroll with the scrollview? – Bill Jan 10 '18 at 13:06
  • Yes, it's "just" one button in bottom right corner, above multiple components. Sorry, i don't have a sketch :( – s-leg3ndz Jan 10 '18 at 13:09
  • You can use floating button that sits on top of the screen [Help link](https://github.com/mastermoo/react-native-action-button). Or if you want to use your custom implementation [use this link](https://stackoverflow.com/questions/33135256/floating-action-button-on-react-native) – Aravindh Kumar Jan 10 '18 at 13:09
  • Thank you, i go try with this component :) – s-leg3ndz Jan 10 '18 at 13:20

4 Answers4

15

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

Himanshu Dwivedi
  • 7,934
  • 3
  • 31
  • 52
  • 6
    Hi :) Absolute is not solution with `ScrollView`, the component will not be "fixed" on the bottom – s-leg3ndz Jan 10 '18 at 14:00
  • Do you want button at the bottom right inside scrollview. Please edit your question with some code you are trying and also the screenshot/sketch of your view. – Himanshu Dwivedi Jan 10 '18 at 16:22
  • 2
    @s-leg3ndz I have a `View` wrapping my `ScrollView` and the button with `position: 'absolute` outside the `ScrollView` and works as intended. – MattyK14 Jan 10 '18 at 17:11
14
<View style={{flex: 1}}>
    <ScrollView style={{backgroundColor:'yellow'}}>
          <Text>body</Text>
    </ScrollView>
    <View><Text>sticky footer</Text></View>
</View>
Mahdi Bashirpour
  • 17,147
  • 12
  • 117
  • 144
  • 10
    While this code snippet may be the solution, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-%E2%80%8C%E2%80%8Bcode-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Narendra Jadhav Jun 18 '18 at 05:58
  • 3
    those solutions are relevant only for small cases, in real app, in case of multiple nested components this will not work – Blue Bot Aug 20 '18 at 09:41
  • Only bottom of view, not bottom of screen. – tomByrer Jul 01 '21 at 04:24
6

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

Marco Antonio
  • 91
  • 1
  • 8
0

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

SLIMANI Mohammed
  • 407
  • 7
  • 10