React Native Set Default PlaceHolder Text in TextInput Component

The PlaceHolder prop is used to show some user define default text inside TextInput component. This text can be anything with a specific message which tells the application user regarding to that particular TextInput. Using the PlaceHolder user knows what type of value(information) he needs to fill inside Text Input component. So in this tutorial we would going to Set Default PlaceHolder Text in TextInput Component in Android iOS React native application.

Contents in this project Set Default PlaceHolder Text in TextInput Component in React Native Android iOS app:

1. Import StyleSheet, View and TextInput component in your project.

2. Create a Parent View in render’s return block.

3. Create TextInput component inside Parent View with placeholder prop.

placeholder : Used to set Place Holder default text in Text Input component.

style :  Used to call Style.

underlineColorAndroid : Hiding the bottom bar in Android devices.

4. Creating Style.

5. Complete source code for App.js File :

Screenshot in Android device:

Set Default PlaceHolder Text in TextInput

Screenshot in iOS device :


  1. Hi Admin,
    How do we make text input for credit card number where the cursor will move next to (-) automatically and (-) will be by default? Like,

  2. Yes, I got it. Thanks.

  3. Hi sir am rashmi
    new to react native ..trying to learn things but am not understanding anything in this react native how to do how it works and many please need a gudience

    • Rashmi if you want the proper guide then you should start reading from react native’s official website. Start from first component then go all the way down. You can search for any content on my site also.

Leave a Reply

Your email address will not be published. Required fields are marked *