CODEWITHSUNDEEP
cssreact-native
user938363
user938363

Reputation: 10378

How to put Text and TextInput in one line?

In my React Native 0.66 app component, a Text and TextInput needs to be in one line and occupied half of the screen width. Here is the view code used:

               <View style={{flex:1, flexDirection:'row', marginVertical: hp("1%")}}>
                        <View style={{flex:1, flexDirection:"row", width:wp("50%"), textAlign:"left"}}>
                            <Text style={styles.textTitle}>姓名:</Text>. //<<==Text
                            <TextInput   style={styles.textTitle} //<<==TextInput
                                        placeholder="姓名"
                                        onChangeText={changeName}
                                        defaultValue={name}
                                        multiline={false}
                                        />
                        </View>
                        <View style={{flex:1, flexDirection:"row", width:wp("50%"),textAlign:"left"}}>. //<<==here is row
                            <Text style={styles.textTitle}>别号:</Text>
                            <TextInput style={styles.textTitle}
                                        placeholder="别号"
                                        onChangeText={changeAlias}
                                        defaultValue={alias}
                                        multiline={false}
                                        /> 
                        </View>
                </View>

const styles = StyleSheet.create({
textTitle: {
        height:hp("10%"),
        fontSize:14,
    },

    container: {
        paddingTop:0,
    //justifyContent: 'center',     
    },
})

The problem with the view code above is that the TextInput was far below the Text even though both of them are in one row with the same height. What is missing here and how to align Text and TextInput in one line?

Upvotes: 0

Views: 5017

Answers (4)

MagnusEffect
MagnusEffect

Reputation: 3925

You can use the following mini-code for reference.

https://codesandbox.io/embed/hungry-meninsky-wv08l?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 1

Talha
Talha

Reputation: 886

You can also use this

    <SafeAreaView style={{flex:1}}>
       <View style={{flexDirection:"row",flex:1,justifyContent:"center"}}>
           <Text style={{flex:1,textAlign:"center",backgroundColor:"blue",color:"white",height:40,paddingTop:10}}>Name</Text>
           <TextInput
               style={{backgroundColor:"red",flex:1,height:40}}
               placeholder={"hello"}
           />
       </View>
    </SafeAreaView>

I hope it solve your Query.

Upvotes: 1

Alireza Rezaei
Alireza Rezaei

Reputation: 86

You have to add display:flex to your View component.

Upvotes: 1

elite0107
elite0107

Reputation: 104

<View style={styles.row}>
  <Text style={styles.textTitle}>别号:</Text>
  <TextInput style={styles.textTitle}
    placeholder="别号"
    onChangeText={changeAlias}
    defaultValue={alias}
    multiline={false}
  /> 
</View>

const style = stylesheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    width: "wp('50%')",
    textAlign: "left",
    display: flex,
    justifyContent: "space-between",
    alignItems: "center"
  }
  textTitle: {...},
  container: {...}
})

I think you missed adding display: flex; to the View Content. I replaced the style class row. This will work for you. thanks.

Upvotes: 1

Related Questions