I'm using CheckBox from the react-native-elements. In the Documentation, there are not any IconProps. there is IconRight style which I used but it only aligning the Icon from the right of the title but I want to align the Icon at the end of the View.
here is the code -
<CheckBox
title={item}
key={index}
value={item}
ref={item}
checked={checked}
iconRight
iconType="material"
checkedIcon="clear"
uncheckedIcon="add"
checkedColor="red"
onPress={() => {
this.controlcheck(item, checked);
}}
/>
I want to align the + icon at the right of the end.
You can use this :
<CheckBox
title={<Text style={{flex:1}}>Hello World</Text>}
/>
Related
I am studying react native "bar" developing an app. I am not designing the fine details of the app. But I would like to change the button color at least I've tried this.
<Button style={{ backgroundColor: 'black'}} onPress={() => regiao()} title="Entrar"> </Button>
And several other things, but the hole button is always blue.
Color is a separate variable in your component, do this:
<Button color='black' onPress={() => regiao()} title="Entrar"> </Button>
See: https://reactnative.dev/docs/button
To change the text color to red:
<Button style={{color:'red'}} color='black' onPress={() => regiao()} title="Entrar"> </Button>
Do that:
<Button color='black'></Button>
Without style.
I'm using react-native-paper TextInput to show email icon on the left side of text input and that icon should be green (#22C55E) but it's still showing the default color.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
color="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
You have to add iconColor='#22C55E' add in place of color="#22C55E" props in TextInput.Icon.you will be able to change color easily.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
iconColor="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
Using NativeBase v3 library, There is leftIcon props, but it place icon near of title in center I need icon very left of the button, here is my component;
<Button
width="full"
primary
onPress={() => {}}
leftIcon={<Icon name="check" size={12} color="white" />}
>
<Text style={{color: 'white'}}> Checkout </Text>
</Button>
need to put icon as seem in pic below;
And, do you know whats name of the icon at right? :)
I think you're missing the as prop on your passed icon. And i think the placement can be changed if you add a style prop to the icon
try:
leftIcon={<Icon as={Ionicons} name="check" size={12} color="white" style={{alignSelf: 'flex-start'}} />}
And i think the icons on the right of your image is just three chevron-right with decreasing opacity
I have created on custom dropdown list View that I am showing on click of TextInput. Users can search as well as select items from that list. Now I want to close that window on click outside of that TextInput How to set visibility false on touch outside of TextInput.
{modalVisible ?
(
<View style={styles.emailItem}>
<ShowCustomDropdown globalsearchdata={globalsearchdata} />
</View>
) : null}
<View style={styles.textinputstyle}>
<TextInput
onTouchStart={()=> setModalVisible(true)}
onChangeText={handleChange}
style={styles.searchInput}
placeholder="Type a message"
value={search_term}
/>
</View>
You don't need onTouchStart prop, you can use below props in TextInput, like:
<TextInput
onFocus={() => setModalVisible(true) } //focus received
onBlur={() => setModalVisible(false) } //focus lost
onChangeText={handleChange}
style={styles.searchInput}
placeholder="Type a message"
value={search_term}
/>
onFocus prop will let you know if TextInput is focussed and onBlur prop will let you know when you click outside TextInput or it isn't focussed.
Hope this works for you.
react native change color one item in FlatList after click item
<FlatList
data={this.state.posts}
renderItem={this.renderItem.bind(this)}
keyExtractor={(item, index) => index}
ListEmptyComponent={()=> <Spinner />}
onEndReached={this.handleLoadMore.bind(this)}
onEndReachedThreshold={0.5}
initialNumToRender={1}
/>
after render list click on item and change color item:
renderItem({item}){
return (
<Button transparent>
<TouchableOpacity
onPress={()=>this.likeSave(item.id) }
>
<Icon name="heart" size={30} style={{color:likeColor}} />
</TouchableOpacity>
</Button>
}
after click Icon heart change color Icon heart to red
The multi select example in Flatlist React Native documentation can explain how to solve your problem. Check it out here Flatlist React Native Component