CODEWITHSUNDEEP
react-native
Taimur Ajmal
Taimur Ajmal

Reputation: 2855

Views adjacent to each other

I have just started working on React Native. Need some help.

I want to display button adjacent to the TextInput. Shall I add another view style like this

View style={styles.flowRight}

 type Props = {};
    export default class SearchPage extends Component<{}> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>Search for houses to buy!</Text>
            <TextInput style = {styles.searchInput}placeholder='Search via name or postcode'/>
            <Button style = {{alignSelf: 'flex-end'}}
            onPress={() => {}}
            color='#48BBEC'
            title='Done'/>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      description: {
        marginBottom: 20,
        fontSize: 18,
        textAlign: 'center',
        color: '#656565'
      },
      container: {
        padding: 30,
        marginTop: 65,
        alignItems: 'center'
      },
      searchInput: {
      height: 36,
      padding: 10,
      marginRight: 5,
      flexGrow: 1,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC',
      },
    });

Upvotes: 0

Views: 47

Answers (2)

Sangeeta
Sangeeta

Reputation: 991

take the text and textInput in a separate View tag. and give style to that view with flexDirection: 'row'

 <View style={styles.container}>
            <View style = {{ flexDirection: 'row'}}>
                <Text style={styles.description}>Search for houses to buy!</Text>
                <TextInput style = {styles.searchInput}placeholder='Search via name or postcode'/>
            </View>

            <Button style = {{alignSelf: 'flex-end'}}
            onPress={() => {}}
            color='#48BBEC'
            title='Done'/>
        </View>

Upvotes: 0

Rajesh Bhartia
Rajesh Bhartia

Reputation: 758

You need to wrap the TextInput and Button in a view and add a style property flexDirection:"row" in it. And thus the Button will become adjacent to TextInput. Here is a code Sample 

      <View style={styles.container}>
        <Text style={styles.description}>Search for houses to buy!</Text>
        <View style={{flexDirection:"row"}}>
          <TextInput style = {styles.searchInput}placeholder='Search via name or postcode'/>
          <Button
            onPress={() => {}}
            color='#48BBEC'
            title='Done'/>
        </View>
      </View>

Upvotes: 2

Related Questions