Align Icon to the right for custom floating text field

Question

I have created a custom floating text field however I would like to align the icon to the right and also vertically align baseline with the text. Currently the icon is align on the left by default when imported to my main component as displayed below:

I am not sure how to do a workaround to style the floating text field with the icon. Here is my code for my floating text field component

component.floatingTextField.js
 import React from "react";
import {
StyleSheet,
Text,
View,
TextInput,
Animated,
Platform
} from "react-native";
import { Input, Label, Item } from "native-base";
import Icon from "react-native-vector-icons/dist/FontAwesome";

import AbstractComponent from "../_abstract/abstract.component";

export default class FloatingTextField extends AbstractComponent {
constructor(props) {
    super(props);

    this.state = {
        labelFontSize: 14,
        labelMarginTop: 0,

        value: ""
    };
}

onFocus() {
    this.setState({ labelFontSize: 12, labelMarginTop: 14 });
}
onBlur() {
    if (!this.hasValue()) {
        this.setState({ labelFontSize: 14, labelMarginTop: 0 });
    }
}
onChange(event) {
    this.setState({ value: event.nativeEvent.text });
}

hasValue() {
    return this.state.value !== "";
}

hasIcon() {
    return this.props.hasOwnProperty("icon");
}

render() {
    if (this.hasIcon()) {
        return (
            <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                    style={{
                        flex: 0.1,
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    {this.props.icon}
                </View>

                <View style={{ flex: 0.9 }}>
                    <Item floatingLabel style={{ margin: 0 }}>
                        <Label
                            style={{
                                fontSize: this.state.labelFontSize,
                                margin: 0,
                                marginTop: this.state.labelMarginTop
                            }}
                        >
                            {this.props.label}
                        </Label>
                        <Input
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onChange={event => this.onChange(event)}
                            style={{ paddingLeft: 0 }}
                        />
                    </Item>
                </View>
            </View>
        );
    } else {
        return (
            <View style={{ flex: 1, flexDirection: "row" }}>
                <View style={{ flex: 1 }}>
                    <Item floatingLabel style={{ margin: 0, padding: 0 }}>
                        <Label
                            style={{
                                fontSize: this.state.labelFontSize,
                                margin: 0,
                                marginTop: this.state.labelMarginTop
                            }}
                        >
                            {this.props.label}
                        </Label>
                        <Input
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onChange={event => this.onChange(event)}
                            style={{ paddingLeft: 0 }}
                        />
                    </Item>
                </View>
            </View>
        );
    }
}
}

main.component.js

<FloatingTextField label="Payment Date *" value="22/09/17" style={{ position: "relative" }} icon={<Icon name="calendar" size={16} />} />

Appreciate some help and guidance. Thanks.

Answer 1

for the outer View use flexDirection: 'row-reverse'. it makes the icon(which is the first child) to start from left and make justifyContent='start'.

or you could keep flexDirection='row', but add the input as the first child.