Fixed button over a scrollview

Question

I'm currently trying to display a button on the bottom right corner of my screen, over a scrollview, but it doesn't work. The button moves when I scroll my view. I tried to insert the button first, but the scrollview is over it.

class HomePage extends Component {
  loadUserItems() {
    this.props.loadUserItems();
  }
  constructor(props) {
    super(props);
    this.loadUserItems();
  }
  render() {
    return (
      <Container>
        <Content>
        <Header />
          <View>
            <ItemSquareDisplay
              items={this.props.items && this.props.items.length > 0
                ? this.props.items
                : ''} />
          </View>
          <Button style={styles.buttonStyle}>
            <Text style={styles.buttonTextStyle}>+</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
// CONNECTE LES PROPS DE CETTE CLASSE AUX STATES DE REDUX
const mapStateToProps = state => {
  return {
    items: state.items.items,
  };
};
// PERMET A CETTE CLASSE DE LINKER LES PROPS AUX ACTIONS DE REDUX
export default connect(mapStateToProps, {loadUserItems}) ( HomePage );
const styles = {
  headerViewStyle : {
    alignItems: 'center',
    backgroundColor: '#cc003d',
    height: 90
  },
  headerImageStyle : {
    height: 80,
    width: 250,
    resizeMode: 'contain',
    marginTop: 7,
  },
  buttonStyle : {
    backgroundColor: '#fc454e',
    width: 66,
    height: 66,
    borderRadius: 33,
    justifyContent: 'center',
    alignItems:'center',
    position: 'absolute',
    bottom: 20,
    right: 20
  },
  buttonTextStyle : {
    color:'white',
    fontSize: 45,
    marginBottom: 6
  }
}

I tried 'fixed' position, but it isn't supported by react-native. I want the button to be over my items.

But I don't want it to move when I scroll the view.

Answer 1

Ok i got it :

render() {
    return (
      <View>
      <Header />
        <ScrollView>
          <View>
            <ItemSquareDisplay
              items={this.props.items && this.props.items.length > 0
                ? this.props.items
                : ''} />
          </View>
        </ScrollView>
        <Button style={styles.buttonStyle}>
          <Text style={styles.buttonTextStyle}>+</Text>
        </Button>
      </View>
    );
  }

Quite obviously, I needed to extract my button from my Container component. Thanks for your answers guys.