I am using react-native-autocomplete-input component's <AutoComplete>
I inserted two icons at left(search) and right(close) of AutoComplete.
<View style={styles.searchSection}>
<AntDesign
name="search1"
size={18}
color="gray"
style={styles.searchIcon}
/>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
containerStyle={styles.autocompleteContainer}
inputContainerStyle={styles.inputContainer}
//data to show in suggestion
data={filteredFilms}
//default value if you want to set something in input
defaultValue={
JSON.stringify(selectedValue) === '{}'
? ''
: selectedValue.title + selectedValue.id
}
// onchange of the text changing the state of the query
// which will trigger the findFilm method
// to show the suggestions
onChangeText={(text) => findFilm(text)}
placeholder="Search doctors, specialities, symptoms"
renderItem={({item}) => (
//you can change the view you want to show in suggestions
<View style={{backgroundColor: 'red', flexDirection: 'column'}}>
<TouchableOpacity
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<Text style={styles.itemText}>{item.title + item.id}</Text>
</TouchableOpacity>
</View>
)}
/>
<AntDesign
name="close"
size={18}
color="gray"
style={styles.clearIcon}
/>
</View>
Without typing keys, UI looks fine as below:
But when I start to type, both search and close icons are pushed down to center of suggestion:
Any suggestion, how I can keep both icons fixed at it's top position.
Please help.
Please try attribute alignItems:'flex-start' in styles.searchSection.
For further alignment of icons, use padingTop: 10 in both searchIcon and clearIcon.
Related
In React Native 0.70 app, 2nd Header (react-native-element 3.4.2 is added to the view under the 1st Header with its centerComponent pointing to a search bar (one line only). Here is the code:
import { Header } from 'react-native-elements';
import { Col, Row, Grid } from 'react-native-easy-grid';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
Bar = () => {. //<<==search element
return (
<View style={{position:"absolute", bottom:-hp("2.2%"), alignContent:"flex-start", paddingTop:hp("2.5%"),flexDirection:"row", wifth:"100%"}}>
<View style={{flex:1, alignItems:"center"}}>
<TouchableOpacity onPress={()=>{submit()}} >
<Icon name="search-outline" color="black" size={hp("4.4%")}/>
</TouchableOpacity>
</View>
<View style={{flex:8}}>
<TextInput placeholder={"plcholder"} onChangeText={strChg}></TextInput>
</View>
<View style={{flex:1, alignItems:"center"}}>
<TouchableOpacity onPress={()=>{navigation.navigate("MyHelp")}} >
<Icon name="help-outline" color="black" size={hp("4.4%")}/>
</TouchableOpacity>
</View>
</View>
)
}
return (
<View style={styles.container}>
<Header //<<== first header to show screen name
containerStyle={{backgroundColor: '#f4511e'}}
centerComponent={<HeaderCenter />}. //<<==show screen name
/>
<Header //<<==2nd header to show search bar
containerStyle={{backgroundColor: 'white'}} //<<==white background color
centerComponent={<Bar/>} //<<==here goes the search bar
/>
<ScrollView>
....
</ScrollView>
</View>
)
styles = StyleSheet.create({
container: {
flex:1
},
text: {
alignItems:'center',
alignContent:'center',
paddingTop:wp("20%"),
fontSize:wp("5%"),
},
}
Here is how the header bar looks:
The problem is 2 icons position. The icon on the left shall start from the left most and the icon on the right shall be at the far right. `alignContent:"flex-start/flex-end" on icon did not work. Increase TextInput flex to 10 cut off portion of 2 icons and did not push the icon away. How to move those 2 icons to their position?
just give justifyContent: 'space-between' and it will place left item to the left most and right item to the right most
The search bar was constructed on its own instead of using Header from react-native-elements. Here is the code:
return (
<View style={styles.container}>
<Header
containerStyle={{backgroundColor: '#f4511e'}}
centerComponent={<HeadCenter />}
/>
<View style={{ bottom:hp("0%"), alignContent:"space-between", paddingTop:hp("0.1%"),flexDirection:"row", width:"100%", height:hp("7%")}}>. //<<==this is the View bloc to hold search bar.
<View style={{flex:1, alignContent:"flex-start",justifyContent:"center",alignItems:"center"}}>
<Pressable onPress={()=>{submit()}} >
<Icon name="search-outline" color="black" size={hp("4.4%")}/>
</Pressable>
</View>
<View style={{flex:5}}>
<TextInput style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>
</View>
<TouchableOpacity onPress={()=>{navigation.navigate("MyHelp")}} >
<View style={{flex:2, alignContent:"flex-start", justifyContent:"center",alignItems:"center"}}>
<Icon name="help-outline" color="black" size={hp("4.4%")}/>
</View>
</TouchableOpacity>
</View>
<ScrollView>
....
</ScrollView>
)
I want to implement a 'grid' layout in my RN app, but as RN doesnt support grid style I'm confused about how can I do it.
I need to do something just like this:
Where blue and green boxes will be text inputs (numeric only) and the red box will be a picker.
Unfortunately, css isnt my best skill.
Can anyone help me? Thanks !
the simplest way would be to put a column inside a row, which you can do by using react-native stylesheet's 'flexDirection' property, like this:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<Input style={{flex: 1}} />
<Input style={{flex: 1}} />
</View>
<Picker style={{flex: 1} />
</View>
I am getting data from server in which i have to set props in style sheet to change the background color dynamically. but i am getting an error
undefined is not an object (evaluating 'this.props.colorCode')
here is my code
class TopCategoryCard extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.CardMainView}>
<View style={styles.ThirdLayerStyle}>
</View>
<View style={styles.SecondLayerStyle}>
</View>
<View style={styles.FirstLayerStyle}>
<Image resizeMode={'contain'} style={styles.CatImageStyle}
source={this.props.imageUri}
/>
</View>
<Text numberOfLines={1} style={{color:'#fff' , fontSize:13, top:28 , marginLeft:25 , marginRight:20, fontFamily: "poppinsregular"}}>{this.props.name}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding:5
},
CardMainView:{
flexDirection:'row',
borderRadius:4,
backgroundColor: this.props.colorCode,
height:80,
elevation:3,
shadowColor:'#000',
overflow:'hidden',
}
}
In the Above code i am getting the image and name successfully but facing error in changing the color code kindly help
color changing code
<ScrollView
style={{ marginTop:15 , marginLeft:-5 }}
horizontal={true}
showsHorizontalScrollIndicator={false}>
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i.toString()}
renderItem={({ item }) => (
<TouchableOpacity
activeOpacity={0.9}
onPress={() =>
this.props.navigation.navigate(
"JobbyCategorylist",
{ slug: item.slug }
)
}
>
<TopCategoryCard
imageUri={{ uri: `${item.url}` }}
name={`${entities.decode(item.name)}`}
colorCode={item.color}
/>
</TouchableOpacity>
)}
horizontal={true}
/>
</ScrollView>
You cannot dynamically assign values to StyleSheet properties. Instead, you can try something like this:
<View style={[ styles.CardMainView, {backgroundColor: this.props.colorCode} ]}>
Don't forget to remove backgroundColor: this.props.colorCode from CardMainView.
I am implementing react native app for woocommerce WordPress website. I need to add carousel for product images, price, name which is fetched from WordPress woocommerce API. The content from API is fetched and working fine but cannot integrate carousel.
What have I done yet?
render () {
const carr = <FlatList
data={this.state.data || []}
keyExtractor = {(x,i) =>i.toString()}
renderItem = {({item})=>
<Carousel
ref={(c) => { this._carousel = c; }}
renderItem={ <TouchableHighlight onPress={() => navigate("Products", { product: item })} underlayColor="transparent">
<View style={styles.view} >
<Image style={styles.image} source={{uri: item.images[0].src}} />
<Text style={styles.text}>{item.name}</Text>
<View style={styles.borderNow}></View>
<View style={styles.cartPrice}>
<Text style={styles.addCart}>₹{item.price}</Text>
<Text style={styles.price}>
</Text>
</View>
</View>
</TouchableHighlight>
}
sliderWidth={290}
itemWidth={290}
/>
} />
return (
<View>
{carr}
</View>
I used 'react-native-snap-carousel' this module and tried for sliding. But I get evaluating.data.length error . I am beginner in react.
I'm new to js, react and css so this is going to be very basic but it's not to me. I have these containers and I'm trying to put a text field inside one of them but I'm getting syntax error at Text. Does it have something to do with < > />? Thank you
<View style={styles.top}
/>
<MapView style={styles.map}
region ={{
latitude:lat,
longitude:long,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
>
</MapView>
<View style={styles.bottom} />
</View>
);
Indeed it does. You need to close your jsx View tag.
<View style= {styles.container}>
<View style={styles.top}>
<Text> Hi there</Text>
</View>
</View>
The render method can only render a single root node i.e you only define one parent root in render method.
You can define multiple child root under one parent.