React native Text Input with Left and Right View mode -
i trying build search component textfield both right view , left view(images @ both end). text input wraps length of content, component no covering entire parent width. how stretch component entire component occupies full width of parent.
<view style={{flexdirection:'row', height:40,alignself:'stretch',backgroundcolor:'red'}}> <image source={require('./image_assets_rn/search_rn.png')} style={{alignself:'center',}}/> <textinput placeholder="search jet" style={{backgroundcolor:'white',alignself:'stretch',}}/> <image source={require('./image_assets_rn/search_rn.png')} style={{alignself:'center',}}/> </view>
below output. want stretch textfield along main axis(width)
it can achieved giving textinput
flex:1
, there no need use stretch.
<view style={styles.container}> <view style={{flexdirection:'row', width: 300, height:40,backgroundcolor:'lightgray'}}> <image source={require('./image_assets_rn/search_rn.png')} style={{ height: 30, width: 20,margin: 5}} /> <textinput placeholder="search jet" style={{backgroundcolor:'white', flex:1}} /> <image source={require('./image_assets_rn/search_rn.png')} style={{ height: 30, width: 20, margin:5}} /> </view> </view>
check on snack
i recommend this tutorial have grasp on how flexbox works.
hope helps!
Comments
Post a Comment