How to make an element to be always in the top right corner of the screen

Question

I am trying to make an element with style={styles.settingsButtonContainer} not to depend on position of other elements on the view, but to be always in the top right corner of the screen. I am trying in this way:

<View style={styles.container}>
  <RCActivityIndicator animating={showActivityIndicator} />
  <RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
  <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
    <Text style={styles.title}>Noughts and Crosses</Text>
    <Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
    <TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
      <Text style={styles.buttonText}>New game</Text>
    </TouchableHighlight>
    <Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
    <Field state={fieldState} size={fieldSize} winner={winCombination} onCellPress={onCellPress} />
  </ScrollView>
  <View style={styles.settingsButtonContainer}>
    <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
      <Image source={require('../img/settings.png')} style={styles.settingsIcon} />
    </TouchableHighlight>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  title: {
    textAlign: 'center',
    fontSize: 33,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  button: {
    alignItems: 'center',
    padding: 5,
    margin: 5,
    marginLeft: 10,
    marginRight: 10,
    borderRadius: 20,
    height: 35,
    justifyContent: 'center'
  },
  newGameButton: {
    backgroundColor: theme.colors.primary,
    paddingLeft: 15,
    paddingRight: 15,
  },
  buttonText: {
    fontSize: 25,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  tip: {
    textAlign: 'center',
    fontSize: 25,
    marginLeft: 10,
    marginRight: 10,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  turnContainer: {
    textAlign: 'center',
    fontSize: 33,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text,
    marginLeft: 10,
  },
  turn: {
    fontSize: 30,
    fontFamily: theme.fonts.noughtsAndCrosses,
  },
  privacy: {
    textAlign: 'center',
    color: theme.colors.secondaryText,
    fontSize: 15,
    textDecorationLine: "underline",
    marginTop: 20
  },
  settingsButtonContainer: {
    position: 'absolute',
    top: 5,
    right: 5,
    height: 50,
    width: 50,
    alignSelf: 'flex-end',
  },
  settingsButton: {
    height: 50,
    width: 50,
    borderRadius: 25,
  },
  settingsIcon: {
    height: 50,
    width: 50
  },
  settings: {
    marginTop: 30
  },
  buttonsContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});

But it just takes a full row for itself, so the ScrollView doesn't take 100% height. How to make it work?

Answer 1

try to wrap the settingsButtonContainer

and use

settingButtonContainerWrapped: {
alignItem: 'flex-end',
flexDirection : 'row',
},

Answer 2

Use css:

.yourelement {
      position: absolute;
      right: 0;
      top: 0;
} 

Answer 3

Actually the issue was in another element, that was on top of the ScrollView - it was RCActivityIndicator who took this place. I styled it, and it worked.