Layout design in react native

Question

I am trying to design below layout in react native.

I am not able to draw horizontal line as shown above. Some how I have drawn but margin on the right is not being applied

Code

<View style={{ flexDirection: 'row' }}>
                    <Text style={styles.text}>
                        Search
                </Text>
                    <View style={styles.viewStyleForLine1}></View>
                </View>

Style

viewStyleForLine1: {
        borderWidth: 1,
        borderColor: '#cc0000',
        alignSelf: 'stretch',
        marginLeft: 5,
        marginRight: 5,
        width:"100%"
    },

More edit on centering the content

Here is how my View is

<View style={{ flexDirection: 'row' }}>
            <Text style={styles.text}>
             Search</Text>
            <View style={styles.viewStyleForLine1}></View>
            </View>

Style

text: {
        marginTop: 16,
        fontSize: 30,
        fontWeight: 'bold',
        color: '#cc0000',
        marginLeft: 15
    },

    viewStyleForLine1: {
        borderBottomWidth: 1,
        borderColor: '#cc0000',
        marginLeft: 5,
        alignItems:"center",      
        marginRight: 15,
        alignSelf:"center",
        flex:1
    },

What modification I should do?

Answer 1

you can change the style width: "100%" to "flex:1". you want the right view to occupy the rest of width, then the "flex:1" means the rest of width belongs to it.it has a weight. the percentage you have to use in both components. the more tips about UI adapter you can read this article

viewStyleForLine1: {
        borderWidth: 1,
        borderColor: '#cc0000',
        alignSelf: 'stretch',
        marginLeft: 5,
        marginRight: 5,
        flex:1
    },