Change height of the textInput

[grundmanise]

Hi, thanks for this amazing component! Is it possible to change textInput height? I am using multiline={true} and would like to set height 2 times bigger than the current height for Hoshi.

[oleksiykh]

Same here, or even better can we get the support for multiline? Auto adjust the box as it goes to the next line :)

[gotoAndBliss]

+1

[alexhhn]

+1

[ykcai]

+1 would love to have multiline support

[tudoanh]

It'd be so nice to support multipleline. Love this lib btw.

[yash2code]

same, how to adjust height ? anyone able to resolved this?

[yash2code]

Only one solution found:

Goto the file (for eg. kaede.js if you are using kaede) in node modules, change height from there !

[rochapablo]

+1

I would like to adjust for Hideo, making the input smaller.

<View style={styles.inputMain}>
<Hideo
    iconClass={FontAwesomeIcon}
    iconName="id-card-o"
    iconColor="#7f7f80"
    iconSize={18}
    iconBackgroundColor="#ffffff"
    iconStyle={{ display: 'none' }}
    inputStyle={styles.input}
    style={styles.inputContainer}
    inputHeight={26}
    placeholder="NOME COMPLETO"
/>
</View>
<View style={styles.inputMain}>
<Hideo
    iconClass={FontAwesomeIcon}
    iconName="id-card-o"
    iconColor="#7f7f80"
    iconSize={18}
    iconBackgroundColor="#ffffff"
    inputStyle={styles.input}              
    placeholder="NOME COMPLETO"
/>
</View>

const styles = StyleSheet.create({
  inputMain: {
    borderRadius: 4,
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: '#e3e3e3',
    /*padding: 1,*/
    marginBottom: 15,
    overflow: 'hidden',
    height: 26,
    alignContent: 'flex-start',
    alignItems: 'flex-start',
    alignSelf:  'flex-start',
  },
  inputContainer: {
    flex: 1,
    backgroundColor: 'red',
    padding: 1,
    alignContent: 'flex-start',
    alignItems: 'flex-start',
    alignSelf:  'flex-start'
  },
  input: {
    height: 26,
    width: 200,
    fontSize: 12,
    justifyContent: 'center',
    alignItems: 'center'
  },
});

[rochapablo]

I don't know what I was doing wrong, because I though had tried everything. But now I made it!

<Hideo
            iconSize={HideoStyle.size.icon}
            height={HideoStyle.size.input}
            inputStyle={[HideoStyle.input]}
            style={HideoStyle.container}
          />

const height = 37;

HideoStyle = {
    container: {
        marginVertical: 5, 
        borderRadius: 4,
        borderStyle: 'solid',
        borderWidth: 2,
        borderColor: Color.mercury,
        backgroundColor: Color.white,
        flex: 0,
        height: 'auto',
        overflow: 'hidden'
    },
    input: {
        height: height,
        backgroundColor: Color.white,
        fontWeight: '600',
        fontSize: 11,
    },
    size: {
        input: height,
        icon: 20
    }
}

[DavidTatis]

if you want to change height, fontSize, Color, etc. you can go to: node_modules/react-native-textinput-effects\lib, open the .JS file effect you are using, for example Hoshi.js. There you can edit the styles. for example Hoshi.js:

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 2,
    borderBottomColor: '#b9c1ca',
  },
  labelContainer: {
    position: 'absolute',
  },
  label: {
    fontSize: 20,
    color: '#000000',
  },

[halilb]

There isn't a generic solution I can apply for all components for changing the height as it's highly coupled with the animation. And changing input height would break some of those animations.

So I suggest forking the repository and applying your customizations directly on the input to make it work without breaking the animation.