React Native Paper TextInput styles are not applying - react-native

Question

I Have started learning React Native. By following the documentation of React Native Paper I want a outlined Input box. I am using my QR code to test the app on my android phone. It displays the simple input element not the styled one
my App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-
native';
import Contants from 'expo-constants'
import Home from "./screens/Home";
import CreateContact from "./screens/CreateContact";
export default function App() {
return (
<View style={styles.container}>
{/* <Home /> */}
<CreateContact />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ebebeb',
marginTop: Contants.statusBarHeight,
},
});
My CreateContact.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, } from 'react-native';
const CreateContact = () => {
const [Name, setName] = useState("");
const [Phone, setPhone] = useState("");
const [Email, setEmail] = useState("");
const [Salary, setSalary] = useState("");
const [Picture, setPicture] = useState("");
const [Modal, setModal] = useState(false);
return (
<View style={styles.root}>
<View>
<TextInput
mode="outlined"
selectionColor="green"
label="Name"
placeholder="Name"
value={Name}
onChangeText={(text) => setName(text)}
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
root: {
flex: 1, //take compelete height
}
})
export default CreateContact;
Output in Browser :
my app in mobile screen is same like how it is displaying browser