I need a on the bottom of my screen but all the 'solutions' won't work for me |Mobile App|

Question

So the problem is; I want some text on the bottom of my screen. I found a lot of solutions that were working in their case but those won't work in my case and I am not sure why.

Here is a picture of the placement of my <View> and <Text> that's in it:

Here is my code that will be returned:

<View>
  <View>
  {
    //other components
  }
  </View>
  <View style={styles.item1}>
    <Text 
      style={styles.skipText}
      onPress={() => navigation.navigate("Caregivers")}>
      Ga direct door naar de lijst!
    </Text>
  </View>
</View>

I tried multiple things like position: 'absolute' and justifyContent: 'flex-end' etc. Here is the code of the styling:

  skipText: {
    fontSize: widthPercentageToDP('3%'),
    fontFamily: 'monospace',
    textAlign: 'center',
    //marginTop: heightPercentageToDP('5%'),
    textDecorationLine: 'underline',
  },
  item1: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //This should work according to a source*
    bottom: 0, //This should work according to a source*
    justifyContent: 'flex-end',
    flex: 1,
  }

*Source: Make an item stick to the bottom using flex in react-native

Thanks in advance.

score 0 · Accepted Answer · answered Oct 16 '20 at 22:31

0

Absolute positioning will position the element absolutely, relative to its nearest ancestor that, itself, has its position set, otherwise, it's relative to the body. So, depending on how you have the ancestor elements positioned, you may not be setting it to 0px, relative to the bottom of the window, but it may be relative to that ancestor element (which is what it looks like).

Instead, set it this way:

position:fixed;
bottom:0;

And read about positioning here.

answered Oct 16 '20 at 22:31

Scott Marcus

64,069
6
49
71

Well, your solution works in the browser, but in the expo app on my phone it doesn't recognize "fixed", only ["absolute", "relative"]. – Takkie253 Oct 19 '20 at 09:29
screen of error: [link](https://cdn.discordapp.com/attachments/597415124835237941/767680452718624778/Screenshot_20201019_112725_host.exp.exponent.jpg) – Takkie253 Oct 19 '20 at 09:33
@Takkie253 I don't know what an "Expo" app is. `position:fixed` is standard and valid CSS and has been for many years. – Scott Marcus Oct 19 '20 at 13:06
Yeah I get your point but sorry if I was unclear; I am developing an app with React Native (and Expo) and that uses not real CSS. – Takkie253 Oct 19 '20 at 13:53

score 0 · Answer 2 · answered Oct 19 '20 at 10:10

Okay so I figured it out. The answer of Scott Marcus worked in the browser, but not in the expo app on my device.

The solution is that the View with the text in it needed position: 'absolute'.

The parent View needed flex 1, position: 'relative'.

Thanks for all the (deleted) answers!

I need a on the bottom of my screen but all the 'solutions' won't work for me |Mobile App|

2 Answers2