diff --git a/docs/public/static/data/v56.0.0/expo-ui/jetpack-compose/navigationbar.json b/docs/public/static/data/v56.0.0/expo-ui/jetpack-compose/navigationbar.json
new file mode 100644
index 00000000000000..36c82c83a614e9
--- /dev/null
+++ b/docs/public/static/data/v56.0.0/expo-ui/jetpack-compose/navigationbar.json
@@ -0,0 +1 @@
+{"schemaVersion":"2.0","name":"expo-ui/jetpack-compose/navigationbar","variant":"project","kind":1,"children":[{"name":"NavigationBarItemColors","variant":"declaration","kind":2097152,"comment":{"summary":[{"kind":"text","text":"Colors for navigation bar items in different states."}]},"children":[{"name":"disabledIconColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"disabledTextColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"selectedIconColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"selectedIndicatorColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"selectedTextColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"unselectedIconColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"unselectedTextColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}}]},{"name":"NavigationBarItemProps","variant":"declaration","kind":2097152,"children":[{"name":"alwaysShowLabel","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Whether to always show the label."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"true"}]}]},"type":{"type":"intrinsic","name":"boolean"}},{"name":"children","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Children containing "},{"kind":"code","text":"`Icon`"},{"kind":"text","text":", "},{"kind":"code","text":"`SelectedIcon`"},{"kind":"text","text":", and "},{"kind":"code","text":"`Label`"},{"kind":"text","text":" slots."}]},"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"index.d.ts","qualifiedName":"React.ReactNode"},"name":"React.ReactNode","package":"@types/react"}},{"name":"colors","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Colors for the item in different states."}]},"type":{"type":"reference","name":"NavigationBarItemColors","package":"@expo/ui"}},{"name":"enabled","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Whether the item is enabled."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"true"}]}]},"type":{"type":"intrinsic","name":"boolean"}},{"name":"modifiers","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Modifiers for the component."}]},"type":{"type":"array","elementType":{"type":"reference","target":{"packageName":"@expo/ui","packagePath":"src/types.ts","qualifiedName":"ModifierConfig"},"name":"ModifierConfig","package":"@expo/ui"}}},{"name":"onClick","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Callback that is called when the item is clicked."}]},"type":{"type":"reflection","declaration":{"name":"__type","variant":"declaration","kind":65536,"signatures":[{"name":"__type","variant":"signature","kind":4096,"type":{"type":"intrinsic","name":"void"}}]}}},{"name":"selected","variant":"declaration","kind":1024,"comment":{"summary":[{"kind":"text","text":"Whether this item is currently selected."}]},"type":{"type":"intrinsic","name":"boolean"}}]},{"name":"NavigationBarProps","variant":"declaration","kind":2097152,"children":[{"name":"children","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Navigation bar items."}]},"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"index.d.ts","qualifiedName":"React.ReactNode"},"name":"React.ReactNode","package":"@types/react"}},{"name":"containerColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Background color of the navigation bar."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"NavigationBarDefaults.containerColor"}]}]},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"contentColor","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Preferred content color inside the navigation bar."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"contentColorFor(containerColor)"}]}]},"type":{"type":"reference","target":{"packageName":"react-native","packagePath":"Libraries/StyleSheet/StyleSheet.d.ts","qualifiedName":"ColorValue"},"name":"ColorValue","package":"react-native"}},{"name":"modifiers","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Modifiers for the component."}]},"type":{"type":"array","elementType":{"type":"reference","target":{"packageName":"@expo/ui","packagePath":"src/types.ts","qualifiedName":"ModifierConfig"},"name":"ModifierConfig","package":"@expo/ui"}}},{"name":"tonalElevation","variant":"declaration","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"Tonal elevation in dp."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"NavigationBarDefaults.Elevation"}]}]},"type":{"type":"intrinsic","name":"number"}}]},{"name":"NavigationBar","variant":"declaration","kind":64,"signatures":[{"name":"NavigationBar","variant":"signature","kind":4096,"comment":{"summary":[{"kind":"text","text":"A Material Design 3 navigation bar."}]},"parameters":[{"name":"props","variant":"param","kind":32768,"type":{"type":"reference","name":"NavigationBarProps","package":"@expo/ui"}}],"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"jsx-runtime.d.ts","qualifiedName":"JSX.Element"},"name":"Element","package":"@types/react","qualifiedName":"JSX.Element"}}]},{"name":"NavigationBarItem","variant":"declaration","kind":64,"children":[{"name":"Icon","variant":"declaration","kind":1024,"type":{"type":"reflection","declaration":{"name":"__type","variant":"declaration","kind":65536,"signatures":[{"name":"__type","variant":"signature","kind":4096,"comment":{"summary":[{"kind":"text","text":"Icon slot for "},{"kind":"code","text":"`NavigationBarItem`"},{"kind":"text","text":"."}]},"parameters":[{"name":"props","variant":"param","kind":32768,"type":{"type":"reference","target":{"packageName":"@expo/ui","packagePath":"src/jetpack-compose/NavigationBar/index.tsx","qualifiedName":"SlotProps"},"name":"SlotProps","package":"@expo/ui"}}],"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"jsx-runtime.d.ts","qualifiedName":"JSX.Element"},"name":"Element","package":"@types/react","qualifiedName":"JSX.Element"}}]}}},{"name":"Label","variant":"declaration","kind":1024,"type":{"type":"reflection","declaration":{"name":"__type","variant":"declaration","kind":65536,"signatures":[{"name":"__type","variant":"signature","kind":4096,"comment":{"summary":[{"kind":"text","text":"Label slot for "},{"kind":"code","text":"`NavigationBarItem`"},{"kind":"text","text":"."}]},"parameters":[{"name":"props","variant":"param","kind":32768,"type":{"type":"reference","target":{"packageName":"@expo/ui","packagePath":"src/jetpack-compose/NavigationBar/index.tsx","qualifiedName":"SlotProps"},"name":"SlotProps","package":"@expo/ui"}}],"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"jsx-runtime.d.ts","qualifiedName":"JSX.Element"},"name":"Element","package":"@types/react","qualifiedName":"JSX.Element"}}]}}},{"name":"SelectedIcon","variant":"declaration","kind":1024,"type":{"type":"reflection","declaration":{"name":"__type","variant":"declaration","kind":65536,"signatures":[{"name":"__type","variant":"signature","kind":4096,"comment":{"summary":[{"kind":"text","text":"Selected icon slot for "},{"kind":"code","text":"`NavigationBarItem`"},{"kind":"text","text":". Falls back to "},{"kind":"code","text":"`Icon`"},{"kind":"text","text":" when omitted."}]},"parameters":[{"name":"props","variant":"param","kind":32768,"type":{"type":"reference","target":{"packageName":"@expo/ui","packagePath":"src/jetpack-compose/NavigationBar/index.tsx","qualifiedName":"SlotProps"},"name":"SlotProps","package":"@expo/ui"}}],"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"jsx-runtime.d.ts","qualifiedName":"JSX.Element"},"name":"Element","package":"@types/react","qualifiedName":"JSX.Element"}}]}}}],"signatures":[{"name":"NavigationBarItem","variant":"signature","kind":4096,"comment":{"summary":[{"kind":"text","text":"A Material Design 3 navigation bar item. Must be used inside "},{"kind":"code","text":"`NavigationBar`"},{"kind":"text","text":"."}]},"parameters":[{"name":"props","variant":"param","kind":32768,"type":{"type":"reference","name":"NavigationBarItemProps","package":"@expo/ui"}}],"type":{"type":"reference","target":{"packageName":"@types/react","packagePath":"jsx-runtime.d.ts","qualifiedName":"JSX.Element"},"name":"Element","package":"@types/react","qualifiedName":"JSX.Element"}}]}],"packageName":"@expo/ui"}
\ No newline at end of file
diff --git a/docs/public/static/images/expo-ui/navigationbar/android-dark.webp b/docs/public/static/images/expo-ui/navigationbar/android-dark.webp
index ffd0951865fa8a..9fc8774f3faec7 100644
Binary files a/docs/public/static/images/expo-ui/navigationbar/android-dark.webp and b/docs/public/static/images/expo-ui/navigationbar/android-dark.webp differ
diff --git a/docs/public/static/images/expo-ui/navigationbar/android-light.webp b/docs/public/static/images/expo-ui/navigationbar/android-light.webp
index 70da7f9fbe58ae..5fe63a1fbda779 100644
Binary files a/docs/public/static/images/expo-ui/navigationbar/android-light.webp and b/docs/public/static/images/expo-ui/navigationbar/android-light.webp differ