Align Input Text to begin from the Left like Placeholder text

Viewed 588

This React Native App uses Galio Framework { Input, Block } from 'galio-framework';
I set the value of text by passing the text captured in another component, a Webview.

const currentProduct = navigation.getParam('productN', '');

Here is the CSS

textInput: {
    backgroundColor: "#fff",
    borderRadius: 5, //(Metrics.WIDTH * 0.42),
    marginTop: 10,
    paddingTop: 10, 
    paddingBottom: 10,
    paddingLeft: 15,
    paddingRight: 15,
    height:50,
    elevation:3,
    alignSelf: 'center',
    width: (Metrics.WIDTH * 0.74),
    fontSize: Fonts.moderateScale(16),
    fontFamily: Fonts.type.sfuiDisplayRegular,
  }

The Input:

<Input style={styles.textInput}
                            placeholder = "Product name(optional)"
                            //" Product name(optional)"
                            placeholderTextColor = "#b7b7b7"
                            underlineColorAndroid = "transparent"
                            autoCapitalize = "none"
            textAlign="left"
            keyboardType = "default"


          ref="productname" 
          onChangeText={(productname) => this.setState({productname })}
          value={currentProduct}

                         /> 

This is what it is currently displaying:

picture

I need it to display properly, example text:

BELLA 14745 Electric Tea Kettle, 1.5 LITER, Silver Tile
1 Answers

The key here is textAlignVertical property.

input: {
  flex: 1, 
padding: 4, 
marginRight: 1, 
marginTop: 5, 
fontSize: 18, 
borderWidth: 1, 
borderRadius: 4, 
borderColor: '#E6E5ED', 
backgroundColor: '#F8F8F9', 
justifyContent: 'flex-start', 
height: 150,
textAlignVertical: 'top'
}
Related