How to replace position: fixed?

Question

React

main component:

<Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
    </ScrollView>
    <View style={styles.nav}>
  ЕГО СДЕЛАТЬ fixed к низу экрана
    </View>
  </Router>

styles for elements:

container: {
    width: '91.3%',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '7.3%',
  },
  nav: {
    position: 'absolute',
    left: 0,
    bottom: '9%',
    flexDirection: 'row',
    position: 'absolute',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },

as an element

<View style={styles.nav}>
  ЕГО СДЕЛАТЬ fixed к низу экрана
    </View>

make it sticky at the bottom of the screen and without position: fixed ??

Answer 1

If this is the bottom navigation, judging by the name of the style, then you can and even need to use react-navigation
bottom-navigation
Then it’s not entirely clear why you have two bottoms, one will interrupt the other? Of course, you can play around, but the surest solution is to use the fifth navigation (the main thing is not to be confused with 4 when you look at examples)