React native - add currency prefix to TextInput

Question

How can add a currency prefix to a TextInput in React Native? Here is an example of what I'm trying to achieve:

To give a bit more details - the TextInput should have a default value, for instance £10. I would like the currency sign to always be there. At some point this value will be sent to a database so it should be converted to an integer.

My code so far (_renderSecondTile section):

import React, {Component} from 'react'
import {
    Text,
    View,
    ListView,
    ScrollView,
    StyleSheet,
    Image,
    TouchableHighlight,
    TextInput,
} from 'react-native'


class AppView extends Component {
    state = {
        isPlayerOneButtonActive: false,
        isPlayerTwoButtonActive: false,
        isThirdTileActive: false,
        textInputValue: '£10',
    }

     activateButton = buttonToActivate => {
        const newState = Object.assign(
            {},
            {
                isPlayerOneButtonActive: false,
                isPlayerTwoButtonActive: false,
            },
            {[buttonToActivate]: true},
        )
        this.setState(newState);
    }

    showThirdTile = tileToShow => {
        this.setState({isThirdTileActive: tileToShow});
    }

    _renderSecondTile = () => {
         if(this.state.isPlayerOneButtonActive || this.state.isPlayerTwoButtonActive) {
             return(
                 <TouchableHighlight>
                     <View style={[styles.step, styles.stepTwo]}>
                        <View style={{flex: 1}}>
                             <Text style={styles.heading}>Enter amount</Text>
                             <View style={styles.amountInputContainer}>
                                 <TextInput
                                     onKeyPress={() => {this.showThirdTile(true)}}
                                     style={styles.amountInput}
                                     maxLength = {3}
                                     value={this.state.textInputValue}
                                 />
                             </View>
                         </View>
                     </View>
                 </TouchableHighlight>
             )
         }
         else{
             return null;
         }
    }

    _renderThirdTile = () => {
        if(this.state.isSecondTitleActive){
            return(
                <View style={[styles.step, styles.stepThree]}>
                    <View style={{flex:1}}>
                        <Text style={styles.heading}>Third tile</Text>
                    </View>
                </View>
            )
        }
        else{
            return null;
        }
    }

    render(){
        const {isPlayerOneButtonActive} = this.state

        return (
            <ScrollView style={styles.container}>
                <View style={[styles.step, styles.stepOne]}>
                    <View style={{flex:1}}>
                        <Text style={styles.heading}>Pick player</Text>
                        <View style={styles.pickContainer}>
                            <TouchableHighlight onPress={() => {this.activateButton('isPlayerOneButtonActive')}}>
                                <Text>Player One</Text>
                            </TouchableHighlight>

                            <TouchableHighlight onPress={() => {this.activateButton('isPlayerTwoButtonActive')}}>
                                <Text>Player One</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>

                {this._renderSecondTile()}

                {this._renderThirdTile()}
            </ScrollView>
        )
    }
}

Answer 1

Try using this:

class AppView extends Component {
   state = {
        isPlayerOneButtonActive: false,
        isPlayerTwoButtonActive: false,
        isThirdTileActive: false,
        inputValue: 10,
    }

    inputChange = (e) => {
        this.setState({inputValue: parseInt(e.target.value)});
        if(!this.state.isThirdTileActive){
            this.showThirdTile(true);
        }
    }
    _renderSecondTile = () => {
         if(this.state.isPlayerOneButtonActive || this.state.isPlayerTwoButtonActive) {
             return(
                 <TouchableHighlight>
                     <View style={[styles.step, styles.stepTwo]}>
                        <View style={{flex: 1}}>
                             <Text style={styles.heading}>Enter amount</Text>
                             <View style={styles.amountInputContainer}>
                                 <TextInput
                                     style={styles.amountInput}
                                     maxLength = {3}
                                     onChange={this.inputChange}
                                     value={"£" + this.state.inputValue}
                             />
                             </View>
                         </View>
                     </View>
                 </TouchableHighlight>
             )
         }
         else{
             return null;
         }
     }
 }

Note: I left out anything that I didn't change so my answer would be easier to read.

Here, I changed the textInputValue to inputValue. Now that value is stored as an integer so it is ready to be sent to the database. Whenever that value is changed in the text input field, the state will be updated by inputChange. inputChange will also call showThirdTile if the third tile isn't already active. Finally, the value of the text input will be inputValue concatenated with "£". In my last answer, I added , in the string version of the integer at every thousandth place. Since you have a max length of 3 in the text input field, that isn't necessary any more. If you ever need to increase the max length, I'd use this to convert:

var cashify = function(amountIn){

    var amount = parseFloat(amountIn).toFixed(2);
    var splitAmount = amount.split(".")[0];
    var i = splitAmount.length-4;

    while(i>=0){
        splitAmount = splitAmount.slice(0,i+1) + "," + splitAmount.slice(i+1);
        i=i-3;
    }
    return "\u00A3" + splitAmount + "." + amount.split(".")[1];

}

I hope that helps!