How to put navbar at bottom react native-CodePudding

I'm trying to make a bottom navbar for my react native notes app but it is just staying at the top. I have tried doing auto-margins, align-self, absolute/relative positioning with no luck.

Main code:

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight,
    flexGrow: 1,
    flexShrink: 1,
    padding: 10,
    backgroundColor: theme.colors.background,
    display: "flex",
    position: "relative",
  },
  title: {
    fontSize: theme.fontSizes.title,
    fontWeight: theme.fontWeights.bold,
  },
  appbar: {
    position: "absolute",
    bottom: 0,
  },
})
...
    <View style={styles.container}>
      <Text style={styles.title}>Notes</Text>
      <Routes>
        <Route path="/" element={<NoteList notes={notes} />} />
        <Route path="*" element={<Navigate to="/" replace />} />
        <Route path="/:id" element={<Note {...note} />} />
      </Routes>
      <AppBar addNote={addNote} />
    </View>

AppBar component:

import { View, StyleSheet, Pressable, Text } from "react-native"

const styles = StyleSheet.create({
  container: {},
})

const AppBar = ({ addNote }) => {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => addNote({ id: "9", title: "Hii", body: "new note" })}
      >
        <Text style={{ textAlign: "center", fontSize: 30 }}>Add</Text>
      </Pressable>
    </View>
  )
}

export default AppBar

CodePudding user response：

First apply the style to AppBar

<AppBar style={styles.appbar} />

then use the style in AppBar

const AppBar = ({style, addNote}) => {
  return (
    <View style={[styles.container, style]}>
...
    </View>
  )
}