React Native Paper TextInput styles are not applying

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

Answer 1

When using React Native Paper you'll import components from it rather than from React itself.

import { TextInput } from "react-native-paper";