How to Position a React Native Button at the bottom of my screen to work on multiple ios devices

Question

I am young to react native search the web for tutorials that could help me with this problem but have not find anything. I know how to move the buttons from point A to B on my s

Answer 1

Here is how I placed the floating button at the bottom-right of the screen.

return (
        <View style={mainConatinerStyle}>
            {this.renderSwiper()}
            {this.renderFloatingMenu()}
        </View>
    );

Use the following styles for container & button:

mainConatinerStyle: {
    flexDirection: 'column',
    flex: 1
},floatingMenuButtonStyle: {
    alignSelf: 'flex-end',
    position: 'absolute',
    bottom: 35
}

Output:

Answer 2

You can use absolute position to put things wherever you want...

submitButton: {
    position: 'absolute',
    bottom:0,
    left:0,
}

will put at bottom of screen, left side....

Answer 3

You can try the code below at https://facebook.github.io/react-native/docs/flexbox.html until that link doesn't work anymore.

Basically you are splitting the screen into 3 pieces, top scrollable, and bottom. The code below is just doing 3 views for simplicity (no scrolling, just replace the middle one with a ScrollView to have somethign more useful.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{height: 50, backgroundColor: 'powderblue'}} />
        <View style={{flex:1, backgroundColor: 'skyblue'}} />
        <View style={{height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }