I have clear button that I want to show after the user starts typing something. Right now it's showing all the time, even if the TextInput is empty, I'm new to React Native and have no idea how to start
This is my code so far:
<View
style={[
{
flexDirection: 'row',
borderWidth: 1,
borderRadius: 30,
padding: 10,
marginLeft: 20,
marginRight: 20,
// marginTop: Platform.OS === 'ios' ? 0 : -20,
marginBottom: 5,
borderColor: theme.inputBorder,
backgroundColor: theme.insightBg,
},
{color: theme.primaryTextColor},
]}>
<View>
<SearchIcon
style={{left: 2, top: 3, marginRight: 10}}
active={theme.search.inputPlaceholder}
/>
</View>
<TextInput
selectionColor="#25C0D5"
style={[
{
width: '100%',
height: 30,
padding: 6,
color: theme.primaryTextColor,
},
]}
value={props.search}
placeholderTextColor={theme.search.inputPlaceholder}
placeholder="Search Offer Groups"
returnKeyType={'search'}
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing={(e) => props.setSearch(e.nativeEvent.text)}
onChangeText={(text) => props.setSearchValue(text)}
autoFocus={false}
/>
<View style={{position:'absolute', right: 0, padding: 10, top:3}}>
<TouchableOpacity onPress={() => {clearAndRefresh()}}>
<CloseIcon
style={{right: 0, marginRight: 10, }}
active={theme.search.inputPlaceholder}
/>
</TouchableOpacity>
</View>
</View>
Related
react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution
stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}
I am developing a password management app in react-native(expo). I Today, I encountered this glitch/bug where the keyboard automatically hides if a TextInput is below the keyboard level. It works if I position it, above keyboard level. I tried Wrapping it with KeyboardAvoidingView but then, I could not interact with TextInput anymore. Also, I am using Input component from "react-native-elements". Here is the demonstration of the problem.
Below is my code:-
<View
style={{
display: "flex",
flexDirection: "column",
position: "relative",
top: "25%",
marginLeft: 12,
}}
>
<View style={{ display: "flex", flexDirection: "row" }}>
<CheckBox
value={this.state.useAlpha}
onValueChange={(val) => this.setState({ useAlpha: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Alphabets</Text>
</View>
<View
style={{
display: "flex",
flexDirection: "row",
marginTop: 8,
}}
>
<CheckBox
value={this.state.useNum}
onValueChange={(val) => this.setState({ useNum: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Numbers</Text>
</View>
<View
style={{
display: "flex",
flexDirection: "row",
marginTop: 8,
}}
>
<CheckBox
value={this.state.useSym}
onValueChange={(val) => this.setState({ useSym: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Symbols</Text>
</View>
<View
style={{ display: "flex", flexDirection: "row", marginLeft: 6 }}
>
<Text style={{ color: "#002c3e" }}>Password Length:-</Text>
<Input
containerStyle={{ marginTop: -6, marginRight: 6 }}
keyboardType="numeric"
inputContainerStyle={{
borderBottomWidth: 2,
width: 60,
fontSize: 12,
borderBottomColor: "#002c3e",
}}
style={{ marginBottom: -10, fontSize: 12 }}
value={this.state.passwordLength}
onChangeText={(txt) => this.setState({ passwordLength: txt })}
></Input>
</View>
</View>
I am using react-native-actionsheet library.
I want to open react-native Modal when I click on one of the option on action sheet and want to close react-native actionsheet.
Is any method to close actionsheet.
<ActionSheet
ref={o => this.ActionSheet = o}
options={[
(
<TouchableOpacity style={styles.actionTextInline} onPress={() => {
this.openReservationModal(); this.ActionSheet.hide();
}}>
<Icon name="receipt" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline}>
<Icon name="call" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline} onPress={() => { alert("Hello friends !!") }}>
<Icon name="message" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
)
]}
cancelButtonIndex={2}
destructiveButtonIndex={-1}
styles={{
body: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 10,
height: 100
},
cancelButtonBox: {
height: 50,
backgroundColor: '#FFFFFF',
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
buttonBox: {
height: 50,
backgroundColor: '#FFFFFF',
borderRadius: 10,
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
}}
/>
In above code when I perform onPress,want to call this.openReservationModal() and close actionsheet. but nothing happing happened .
This is because react-native-actionsheet is using react native modal internally and the statements you have written on onpress is running asynchronously, that's why nothing happens.
Now you have to use timeout for the second statement and it will works, just use the below code in your onpress and it will works :
Code :
<ActionSheet
ref={o => this.ActionSheet = o}
options={[
(
<TouchableOpacity style={styles.actionTextInline} onPress={() => {
# ----- change here -------
this.ActionSheet.hide();
setTimeout(() => this.openReservationModal(), 1000)
# ----- change here -------enter code here
}}>
<Icon name="receipt" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline}>
<Icon name="call" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline} onPress={() => { alert("Hello friends !!") }}>
<Icon name="message" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
)
]}
cancelButtonIndex={2}
destructiveButtonIndex={-1}
styles={{
body: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 10,
height: 100
},
cancelButtonBox: {
height: 50,
backgroundColor: '#FFFFFF',
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
buttonBox: {
height: 50,
backgroundColor: '#FFFFFF',
borderRadius: 10,
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
}}
/>
I hope this helps....Thanks :)
render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
My suggestion list is too long to view on a page hence, it is hidden when page ends and i can not see all the suggestions, so how can i add a scroll bar in suggestions list so that user can scroll down the list and no record gets lost.
Note: There are multiple tag-autocompletes on my page.
render()
{
return
(
<View style={styles.container}>
<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4', marginBottom: 7 }}>Geo Targeting</Text>
<ScrollView keyboardShouldPersistTaps='handled' >
<View style={{ marginBottom: 15, flex: 1 }}>
<Text style={{ fontSize: 25, color: 'blue' }}> Select Locations</Text>
<RadioForm
ref="radioForm"
style={styles.radioButtonStyle}
radio_props={this.state.radio_props}
initial={this.state.selectedLocation}
formHorizontal={true}
buttonColor={'#2196f3'}
labelStyle={{ marginRight: 20 }}
onPress={(value, index) => {
this.setState({
value: value,
valueIndex: index
})
}} />
</View>
{console.log("include locations: " + this.state.includesuggestions)}
<View style = {styles.includeLocationsContainer}>
<Text style={styles.label}>
Type the name of a country or city to include
</Text>
<View key={1} style={styles.autocompleteContainer}>
<AutoTags
//required
suggestions={this.state.includesuggestions}
tagsSelected={this.state.includeTagsSelected}
handleAddition={this.includeAddition}
handleDelete={this.inlcudeDelete}
//optional
placeholder="Add a location.."
filterData={this.includeFilterData}
renderSuggestion={this.includeRenderSuggestions}
renderTags={this.includeRenderTags}
/>
</View>
</View>
<View style = {styles.excludeLocationsContainer}>
<Text style={styles.label}>
Type the name of a country or city to exclude
</Text>
<View key={2} style={styles.autocompleteexcludeContainer}>
<AutoTags
//required
suggestions={this.state.exculdeSuggestions}
tagsSelected={this.state.excludeTagsSelected}
handleAddition={this.excludeAddition}
handleDelete={this.exlcudeDelete}
//optional
placeholder="Add a location.."
filterData={this.excludeFilterData}
renderSuggestion={this.excludeRenderSuggestions}
renderTags={this.excludeRenderTags}
/>
</View>
</View>
<View style={styles.messageContainer}>
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity={.5}
onPress={this.onSaveLocations} >
<Text style={styles.TextStyle}> SAVE</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
paddingTop: (Platform.OS === 'ios') ? 20 : 30,
padding: 5,
},
includeLocationsContainer: {
marginBottom: 10,
left: 20,
overflow: 'visible',
zIndex: 999,
},
autocompleteContainer: {
overflow: 'visible',
position: 'relative',
zIndex: 999
},
excludeLocationsContainer: {
marginBottom: 10,
left: 20,
marginTop: 15,
overflow: 'visible',
zIndex: 998,
},
autocompleteexcludeContainer: {
marginTop: 15,
overflow: 'visible',
position: 'relative',
zIndex: 999,
},
});
Above is my code along with CSS.
This worked for me:
<AutoTags
listStyle={{maxHeight:150}}
// other props
/>