How can I fix the design for tha devices that have different sizes

Question

My code and (Genymotion emulator) screenshots are in the below. The screens seem different with the same code. For instance REGISTER button on Galaxy S2 screen doesn't seem the same position with Galaxy S3 screen.

One of screenshots is from a Galaxy S2 and the other one is from a Galaxy S3.

Is there any chance to fix the screen layout for the devices that have different sizes and resolutions?

Edit

(I've replaced the former code and schreenshots)

export default class Login extends Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <View style={styles.container}>
                <Image source={require('./image.png')} style={styles.topImage} resizeMode={'contain'} />
                <View style={styles.form}>
                    <TextInput style={styles.textInput} placeholder={'Username'} />
                    <TextInput style={styles.textInput} placeholder={'Password'} />
                    <RaisedButton
                        style={{marginTop: 16, alignSelf:'stretch' }}
                        text='LOGIN'
                        color={'accent'}
                        onPress={() => alert('Login has been pressed!')}
                    />
                    <View style={styles.lastContainer}>
                        <RaisedButton
                            style={{marginTop: 36, alignSelf:'stretch' }}
                            text='FORGOT PASSWORD'
                            onPress={() => alert('Forgot Password has been pressed!')}
                        />
                        <RaisedButton
                            style={{marginTop: 16, alignSelf:'stretch' }}
                            text='REGISTER'
                            color={'accent'}
                            onPress={() => alert('Register has been pressed!')}
                        />
                    </View>
                </View>
            </View>
        )
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        padding: 10,
    },
    topImage: {
        flex: 0.4,
        height: null,
        width: null,
        marginLeft: 55,
        marginRight: 55,
    },
    form: {
        flex: 1
    },
    lastContainer: {
        marginTop: 25,
    },
    textInput: {
        fontSize: 16,
        lineHeight: 48,
    },
})

Answer 1

I think you can pull buttons to the bottom of the screen with empty <View> with flex=1:

  <View style={{flex: 1}}></View> <!-- empty spacer view -->
  <View style={styles.lastContainer}>
    <RaisedButton
      style={{marginTop: 36, alignSelf:'stretch' }}
      text='FORGOT PASSWORD'
      onPress={() => alert('Forgot Password has been pressed!')}
    />
    <RaisedButton
      style={{marginTop: 16, alignSelf:'stretch' }}
      text='REGISTER'
      color={'accent'}
      onPress={() => alert('Register has been pressed!')}
    />
  </View>

Alternatively, you an have a look on react-native-extended-stylesheet that allows to use percentage values in style.

Answer 2

You can use this plugin https://www.npmjs.com/package/react-native-device-display. I personally use Display.height to adjust heights.