icons

App.js

@@ -8,55 +8,44 @@ import {
 } from 'react-native';
 import {
   Button,
+  IconButton,
   MD3Colors,
   ProgressBar,
   Searchbar,
-  Snackbar,
   Switch,
   TextInput,
 } from 'react-native-paper';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 
 function App() {
-  const [text, setText] = useState('');
-
-  const [visible, setVisible] = useState(false);
-
-  const [isSwitchOn, setIsSwitchOn] = React.useState(false);
-
-  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
-
   const isDarkMode = useColorScheme() === 'dark';
 
-  const [searchQuery, setSearchQuery] = React.useState('');
-
-  const onChangeSearch = query => setSearchQuery(query);
-
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
       <Button mode="contained-tonal" onPress={() => console.log('Pressed')}>
-        Press
+        Gerät verbinden
       </Button>
-      <ProgressBar progress={0.3} color={MD3Colors.error50} />
 
-      <TextInput label="Email" />
+      <IconButton icon="camera" iconColor={MD3Colors.error50} size={20} />
-
-      <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
-
-      <Searchbar
-        placeholder="Search"
-        onChangeText={onChangeSearch}
-        value={searchQuery}
-      />
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   sectionContainer: {
     marginTop: 32,
     paddingHorizontal: 24,

android/app/build.gradle

@@ -121,3 +121,4 @@ dependencies {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

package-lock.json

@@ -11,7 +11,8 @@
         "react": "18.2.0",
         "react-native": "0.72.1",
         "react-native-paper": "^5.9.1",
-        "react-native-safe-area-context": "^4.6.4"
+        "react-native-safe-area-context": "^4.6.4",
+        "react-native-vector-icons": "^9.2.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -11541,7 +11542,6 @@
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
       "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
-      "peer": true,
       "dependencies": {
         "prop-types": "^15.7.2",
         "yargs": "^16.1.1"
@@ -11555,7 +11555,6 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
       "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -11566,7 +11565,6 @@
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
       "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-      "peer": true,
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -11584,7 +11582,6 @@
       "version": "20.2.9",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }

package.json

@@ -13,7 +13,8 @@
     "react": "18.2.0",
     "react-native": "0.72.1",
     "react-native-paper": "^5.9.1",
-    "react-native-safe-area-context": "^4.6.4"
+    "react-native-safe-area-context": "^4.6.4",
+    "react-native-vector-icons": "^9.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",