set button in position “fixed” in React Native

Question

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 ?

Answer 1

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:

Answer 2

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

Answer 3

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

Answer 4

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