CODEWITHSUNDEEP
react-native
FaISalBLiNK
FaISalBLiNK

Reputation: 711

React Native: Align two TextInputs side by side

I am just starting out with React Native and I am developing an app using RN ... I am bit stuck here ... I have a form in one of the app's component that have couple of TextInputs aligned side by side like in the image below

enter image description here

Here is the code that I have written trying to achieve the above design.

import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native';


export default class AddItems extends Component {
    onAdd() {
        alert('Hello');
    }

    render() {
    return (
        <View style={addItemStyles.wrapper}>
            <View>
                <Text>Item to give cash credit for:</Text>
                <View>
                    <View>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
                    </View>
                    <View>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
                    </View>
                </View>
            </View>

        </View>
    );
}
}

const addItemStyles = StyleSheet.create({
    wrapper: {
        padding: 10,
        backgroundColor: '#FFFFFF'
    },
    inputLabels: {
        fontSize: 16,
        color: '#000000',
        marginBottom: 7,
    },
    inputField: {
        backgroundColor: '#EEEEEE',
        padding: 10,
        color: '#505050',
        height: 50
    },
    inputWrapper: {
        paddingBottom: 20,
    },
    saveBtn: {
        backgroundColor: '#003E7D',
        alignItems: 'center',
        padding: 12,
    },
    saveBtnText: {
        color: '#FFFFFF',
        fontSize: 18,
    }


});

But instead I am getting the view like this.

enter image description here

I know this could be a minor thing but as I said above that I am just starting with React Native so you can consider me as a noob ... Thanks in advance for your help. Looking forward to your answers.

Upvotes: 29

Views: 42613

Answers (1)

yangguang1029
yangguang1029

Reputation: 1823

use "flexDirection" in style

render() {
    return (
        <View style={addItemStyles.wrapper}>
            <View>
                <Text>Item to give cash credit for:</Text>
                <View style={{flexDirection:"row"}}>
                    <View style={{flex:1}}>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
                    </View>
                    <View style={{flex:1}}>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
                    </View>
                </View>
            </View>

        </View>
    );
}

Upvotes: 70

Related Questions