Search code examples
htmlreact-nativelayoutlabel

React Native - Label on top of Input

I couldn't find how to add label on top of input.

         <label > Constructor Name</label>
        <TextInput style={styles.inputs}></TextInput>

When I do this it doesn't unite. In responsive style label and input is going to seperate each other. How can I stick them?

Solution

  • You can make separate component for text input like this Send placeholder prop and it will show the text before textInput.

    <View style={{}}>
  <Text style={{color: 'white', fontWeight: 'bold', fontSize: 15, marginBottom: 5}}>{props.placeholder}</Text>
  <TextInput
    mode="outlined"
    ref={textInput}
    label={props.label || 'Email'}
    secureTextEntry={secureTextEntry}
    onChangeText={(text) => setText(text)}
    returnKeyType={returnKeyType}
    onSubmitEditing={onSubmitEditing}
    multiline={multiline}
    keyboardType={keyboardType}
    value={text || value}
    style={[
      styles.inputStyle,
      inputStyle,
    ]}
  />
</View>