0

I'm trying to make a bottom navbar in React Native but it isn't spanning the full width, only the width of its content. I have tried using vw as in How to use vw and vh css with React Native but it gives the error: "width":<> is not usable as native method argument.

AppBar:

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

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

export default AppBar

style:

appbar: {
    position: "absolute",
    bottom: 0,
    display: "flex",
    justifyContent: "center",

    flexGrow: 1,
    flexShrink: 1,
    marginRight: "auto",
  },

How can I get the AppBar to span the full width?

George Garman
  • 83
  • 1
  • 6

0 Answers0