react native button added on welcome screen and bottom tabs

src/components/BottomTabs/ActivityScreen.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -15,9 +16,11 @@ export default class ActivityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Activity Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Activity Welcome
+        </Button>
       </View>
     );
   }

src/components/BottomTabs/ChatScreen.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
     navigation: any;
@@ -15,9 +16,11 @@ export default class ChatScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Chat Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Chats Welcome
+        </Button>
       </View>
     );
   }

src/components/BottomTabs/CommunityScreen.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
     navigation: any;
@@ -15,9 +16,11 @@ export default class CommunityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Back to Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Community Welcome
+        </Button>
       </View>
     );
   }

src/components/BottomTabs/LectureScreen.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text} from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -15,9 +16,11 @@ export default class ActivityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Lecture Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Lecture Welcome
+        </Button>
       </View>
     );
   }

src/components/DrawerScreens/AboutScreen.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class About extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Abouts",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});

src/components/DrawerScreens/ProfileScreen.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class ProfileScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Profile",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});

src/components/DrawerScreens/ProgressScreen.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class ProgressScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Progress",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});

src/components/DrawerScreens/SupportScreen.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class SupportScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Support",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});

src/components/DrawerScreens/UserSettingScreen.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class UserSettingScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Settings",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});

src/components/Welcome.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { StyleSheet, View, ImageBackground, Image, Text } from "react-native";
+import { StyleSheet, View, ImageBackground, Image } from "react-native";
 import NavStyles from '../styles/NavStyles';
-import Button from "react-native-button";
+import { Button, Text } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -33,15 +33,19 @@ export default class Welcome extends React.Component<AppProps> {
           <View style={styles.container}>
             <Button
               onPress={() => this.props.navigation.navigate('LoginScreen')}
-              style={[styles.button,{backgroundColor: "#ff9900", color: "white"}]}
+              style={[styles.button,{backgroundColor: "#ff9900"}]}
             >
-              Already Have Account!
+              <Text style={{color: "white"}}>
+                Already Have Account!
+              </Text>
             </Button>
             <Button
               onPress={() => this.props.navigation.navigate('RegisterScreen')}
-              style={[styles.button,{backgroundColor: "white", color:"#263992"}]}
+              style={[styles.button,{backgroundColor: "white"}]}
             >
-              Need New Account?
+              <Text style={{color:"#263992"}}>
+                Need New Account?
+              </Text>
             </Button>
             <Text
               style={{marginTop:10, color:"cyan", fontFamily:"sans-serif",}}