I'm doing an app on React Native and am stuck trying to align these input boxes, I have tried everything as far as I'm concerned but can't manage to do it.. The 'lines' I'm talking about, every line is an input box.

The numbers used on the 'top' commands are arbitrary numbers I chose because they looked right, but maybe there is a way to properly align them right

<Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170, marginVertical:6,
                position: 'absolute', right:1, top: 20}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 78}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 126}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 178}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 229}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 281}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 331}}
                keyboardType='decimal-pad'
            />
            <Text style={{fontSize:20, color:'white', textAlign:'left', top:20, marginVertical:12,}}>Agressividade</Text>
            <TextInput
                style={{color:'white', fontSize:20,
                borderTopWidth : 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth : 1,
                borderColor:'white', height:30, width:170,
                position: 'absolute', right:1, top: 382}}
                keyboardType='decimal-pad'
            />

CodePudding user response：

1- Wrap your text and textInput in a view container

2- container style => flexDirection: row to get the text and the input in the same row

3- input has no border by default so, set borderBottomColor & borderBottomWidth for it to get your desired style

You Can test this code on snack https://snack.expo.dev/@salwa_soliman/input-styling

import * as React from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Label Text1</Text>
        <TextInput
          style={styles.input}
          placeholder="Type here"
        />
      </View>
        <View style={styles.inputContainer}>
        <Text style={styles.label}>Label Text2</Text>
        <TextInput
          style={styles.input}
          placeholder="Type here"
        />
      </View>
     </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center"
  },
  inputContainer:{
    flexDirection:"row",
    justifyContent:"space-between",
    alignItems:"center",
    marginVertical:10
  },
  label: {
    width:"48%",
    fontSize:20
  },
  input:{
    width:"48%",
    borderBottomColor:"#000",
    borderBottomWidth:2,
    fontSize: 20,

  }
});