Btukfyl

I'm trying to make an component which has two TextInput's :

• Number of the street


• Name of the street

I want the first one to have a width of 35 and the second one to fill the remaining space horizontally.

How would you do that ?

My code:

import React from 'react';

import {StyleSheet, View} from 'react-native';

import FormInput from "./FormInput"



export default class NoStreetInput extends React.Component {

    render() {

        return(

            <View style={{flex:1, flexDirection: 'row'}}>

                <FormInput style={{container: {width: 35}}} placeholder="N°" defaultValue="4"/>

                <FormInput style={{container: {flexGrow: 1}}} placeholder="Addresse" defaultValue="Chemin Du Moulin" />

            </View>

        );

    }

}

My FormInput component (just in case) :

<View style={styles.container}>

            <TextInput

                style={styles.textInput}

                autoCorrect={false}

                defaultValue={this.props.defaultValue}

                placeholder={this.props.placeholder}

                secureTextEntry={secureTextEntry}

                password={password}

                keyboardType={keyboardType}

            />

</View>

To do this, you will simply need to have one TextInput's width set to 35 (which you did), and the other's TextInput with its flex attribute set to 1:

<View 

  style={{

    flex: 1, 

    flexDirection: 'row', 

    justifyContent: 'center', 

    alignItems: 'center',

  }}

>

  <TextInput value="No" style={{ width: 35 }} />

  <TextInput value="Street Name" style={{ flex: 1 }} />

</View>

(obviously your styling should be kept inside a StyleSheet instead, but you get the point)

Here's a working example

Actually I found out what was missing. I begin with React Native and I thought I could access my children style properties of my custom component without adding a props.
I forgot to create a props for my component so that it can take a style from outside.

I finally made it like that :

style={{..}} is now a props in my custom component (see 2nd code)

export default class NoStreetInput extends React.Component {

    render() {

        return(

            <View style={{flex:1, flexDirection: 'row'}}>

                <FormInput style={{flex:0, width:35}} placeholder={this.props.placeholderNo}

                           defaultValue={this.props.defaultValueNo} width="35" keyboardType="number-pad" upperLabel="No"/>

                <FormInput style={{flex:1}} placeholder={this.props.placeholderStree}

                           defaultValue={this.props.defaultValueStreet} upperLabel="Rue" />

            </View>

        );

    }

}

My custom component (it's a bit different than before but the logic is the same) :

<View style={[styles.container, this.props.style]}>

            <Text style={[styles.upperLabel, customStyle]}>{upperLabel}</Text>

            <TextInput

                style={[styles.textInput, this.props.textInputStyle]}

                autoCorrect={false}

                defaultValue={this.props.defaultValue}

                value={text}

                placeholder={this.props.placeholder}

                secureTextEntry={secureTextEntry}

                password={password}

                keyboardType={keyboardType}

                maxLength={maxLength}

                onChangeText={this.handleChangeText}

                onSubmitEditing={this.handleSubmitEditing}

            />

</View>

style={[styles.textInput, this.props.textInputStyle]} allows me to have a default style for my component, which can be overriden by this.props.textInputStyle :)