Add some other code

Header.js

@@ -13,11 +13,13 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Appbar } from 'react-native-paper';
+import {Appbar, Avatar, Text} from 'react-native-paper';
 
 const Header = () => (
   <Appbar.Header>
-    <Appbar.Content title="Casdoor App" />
+    <Appbar.Content title="Casdoor" />
+    <Avatar.Image size={32} style={{marginRight: '10px', backgroundColor: 'white'}} source={'https://cdn.casbin.com/casdoor/avatar/built-in/admin.jpeg'} />
+    <Text style={{marginRight: '10px'}} variant="titleMedium">Admin</Text>
   </Appbar.Header>
 );
 

HomePage.js

@@ -14,10 +14,12 @@
 
 import * as React from 'react';
 import {Avatar, List} from "react-native-paper";
+import SearchBar from "./SearchBar";
 
 export default function HomePage() {
   return (
     <div>
+      <SearchBar />
       <List.Item
         title="Casdoor"
         description="admin"

NavigationBar.js

@@ -19,6 +19,8 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Text, BottomNavigation } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import HomePage from "./HomePage";
+import {CommonActions} from "@react-navigation/native";
+import SettingPage from "./SettingPage";
 
 const Tab = createBottomTabNavigator();
 
@@ -82,7 +84,7 @@ export default function NavigationBar() {
       />
       <Tab.Screen
         name="Settings"
-        component={SettingsScreen}
+        component={SettingPage}
         options={{
           tabBarLabel: 'Settings',
           tabBarIcon: ({ color, size }) => {
@@ -94,14 +96,6 @@ export default function NavigationBar() {
   );
 }
 
-function SettingsScreen() {
-  return (
-    <View style={styles.container}>
-      <Text variant="headlineMedium">Settings!</Text>
-    </View>
-  );
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

SearchBar.js

@@ -0,0 +1,32 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import { Searchbar } from 'react-native-paper';
+
+const SearchBar = () => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const onChangeSearch = query => setSearchQuery(query);
+
+  return (
+    <Searchbar
+      placeholder="Search"
+      onChangeText={onChangeSearch}
+      value={searchQuery}
+    />
+  );
+};
+
+export default SearchBar;

SettingPage.js

@@ -0,0 +1,26 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as React from 'react';
+import {Button} from "react-native-paper";
+
+export default function SettingPage() {
+  return (
+    <div>
+      <Button style={{marginTop: "50%"}} icon="login" mode="contained" onPress={() => console.log('Pressed')}>
+        Login with Casdoor
+      </Button>
+    </div>
+  );
+}