CODEWITHSUNDEEP
reactjsreact-native
grooot
grooot

Reputation: 466

TextInput Width - React Native

I have a TextInput in my React Native App. All this while I was using simulator "iPhone X" and it was working fine. Now I changed my simulator to "iPhone 5" and the width doesn't match.

                  <TextInput  
                    value={value} 
                    placeholder='Search Here...'
                    onChangeText={(text)=>{this.handleSearch(text)}
                    onTouchStart={()=>{this.setTempNotifications()}
                    style={{ height: 40, width: 290}}
                    autoCapitalize='none'
                    selectTextOnFocus={true}
                  />

I had set the width to "290". How do I make my TextInput width flexible???? It has to fit all phone screens and I do not have to fix a width.

Upvotes: 0

Views: 975

Answers (1)

LonelyCpp
LonelyCpp

Reputation: 2673

You don't really have to give a width value. Only the height is enough to make the TextInput span across its parent.

export default function App() {
  return (
    <View style={{flex: 1}}>
        <TextInput  
          placeholder='Search Here...'                  
          style={{ height: 40, borderWidth: 1}}
          autoCapitalize='none'
          selectTextOnFocus={true}
          />
    </View>
  );
}

The containing view can have padding or margin for appropriate gutter space

Upvotes: 1

Related Questions