It's basically the search bar component from react-native-elements where the container background color is white and the placeholder field has a border with radius.
Not sure if react-native-element allows providing style to placeholder.
Any other way i could use style along with react-native-elements search bar component to get this result?
You need to modify the input and container styles
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>
Check the docs for more props and you can supply your own Icon
I made a combination of the answers here
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
inputContainerStyle={{backgroundColor: 'white'}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>
Related
I have read the docs but still don't understand how to make the text input scroll to an exact position. I want the text input to automatically scroll to the very top of the screen just below my Header component. Using the following code below, could anyone provide an example of how this is done? Thanks.
<KeyboardAwareScrollView>
<TextInput
style={{
fontSize: 18,
width: "100%",
textAlignVertical: "center",
}}
autoFocus={true}
blurOnSubmit={false}
value={name}
onChangeText={(text: string) => {
setName(text);
}}
/>
</KeyboardAwareScrollView>
I am using react native custom fonts and there is an issue with that. with default the text is on center and when I use a Font then text has not on center.
here is code.
<TextInput
style={{
height:40,
width:width-10,
margin:5,
backgroundColor:"#eee",
borderRadius:5,
paddingLeft:20,
fontFamily:FONTS.medium // if I comment this line then placeholder and text input is on center.
}}
placeholder="Search Here"
/>
Image with default fonts
note: I have checked it with multiple fonts and have same issue.
Try if the prop includeFontPadding or lineHeight remove the spacing.
<Text
style={{
backgroundColor: 'red',
//lineHeight: 92,
fontSize: 24,
color: '#000000',
fontFamily: 'Roboto-Regular',
includeFontPadding: false}}>
Search Here
</Text>
If this don’t work check the font itself has a spacing. Open the font file *.ttf and check if the the text has a big spacing.
use includeFontPadding attribute, it will remove the default space
<Text style={{
includeFontPadding: false
}}>
Search Here
</Text>
I need the border lines to be displayed but here only the sides can be seen it is blank in the top and bottom
I have tried this using react native elements
Here is what I wanted to acheive
Here is what I got with this code
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
containerStyle={{
backgroundColor: 'transparent',
}}
inputStyle={{ backgroundColor: 'white' }}
/>
First you have to find which prop that SearchBar gives you access to is the one you want. inputStyle only styles the TextInput component, while containerStyle styles the whole big SearchBar (which has some extra padding and stuff that we don't want).
The prop you want is inputContainerStyle which will style the container around TextInput and the bits on the left and right. So to give a border you could simply do:
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
inputContainerStyle={{
backgroundColor: 'white',
borderColor: 'grey',
borderWidth: 1
}}
/>
I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')
100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.
the width from dimension give you a static width of your device width
so be careful to choose what to use to your component
if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better
You need to add a wrapper view with flexDirection: 'row', then style the child view (or Touchable or whatever) with flex: 1
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Or you could use alignSelf: 'stretch' inside a few with flexDirection: 'column' (which is the default for all views)
Hang in there. Learning flexbox takes some practice. Your first thought when you get stuck should be "do I need to add a wrapper view?"
The default component for TextInput creates a box that goes around the bottom and up the sides, how do I change it to make it go all the way around the text field?
I may not have understood your question properly, but this will give you a textinput with a gray 1px line around
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} />