<Dropdowndata={linkedToList != null ?
linkedToList.map((item, key) => ({
label: item.claim_slug_id, value: item.claim_id
})) : submittingOption}
textInputStyle={{ marginTop: 0, height: 42, fontSize: 14, fontFamily: 'Poppins-Regular', color: color.black }}
itemTextStyle={{ fontFamily: 'Poppins-Regular', color: color.black }}
selectedItemTextStyle={{ fontFamily: 'Poppins-Regular', color: color.dark_color }}
disableSelectionTick
disableSort
removeLabel
enableSearch
underlineColor={color.bg_color}
value={selectedTypeOfClaim}
onChange={(value, index) => {
}
/>
The issue is that, in the Dropdown menu the text is not align in case of 2 line.
While it's working fine in case of single line.
Related
when we use firstName and lastName without a space - everything is fine
image
but if you add a space to one of the words, the other word rises up
image
code
JSX:
<View style={styles.nameContainer}>
<Text style={styles.firstname} numberOfLines={1}>{firstName}</Text>
<Text style={styles.lastname} numberOfLines={1}>{lastName}</Text>
</View>
Styles:
nameContainer: {
flexDirection: 'row',
maxWidth: 176,
overflow: 'hidden'
},
firstname: {
fontSize: 16,
color: Colors.light.text,
fontWeight: 'bold',
marginEnd: 4
},
lastname: {
fontSize: 16,
color: Colors.light.text,
fontWeight: 'bold',
paddingRight: isRTL ? 0 : 24,
marginRight: isRTL ? 0 : 8,
marginBottom: 4,
},
can someone tell me why this is happening?
Hi check this issue https://github.com/facebook/react-native/issues/10712 might help.
I'm working on react native project ,I'm creating icon Button with text, the text and the icon are not totally visible and I want to know the name of upload's icon :
I'm using Button from react-native-elements:
import {Button} from 'react-native-elements';
This is the code of the button +style :
<Button
icon={{
//I want the name of the upload's icon
//name: ,
size: 15,
color: 'white',
}}
title="Upload Signature"
buttonStyle={{
backgroundColor: '#e88720',
marginLeft: 50,
marginRight: 0,
height: 30,
width: 150,
}}
containerStyle={{
height: 30,
justifyContent: 'center',
marginHorizontal: 20,
}}
titleStyle={{
fontSize: 11,
fontWeight: 'bold',
marginTop: 0,
padding: 9,
textAlign: 'center',
}}
/>
I have been looking for solutions too but decided to remove the height on both the buttonStyle and the containerStyle and it was alot better.
<Button
disabledStyle={{
backgroundColor: '#cecece90',
}}
disabledTitleStyle={{
color: '#000',
}}
buttonStyle={{
width: isLoadingAddress ? 130 : 90,
height: 30,
borderRadius: 10,
backgroundColor: '#fff',
borderColor: '#fff',
}}
containerStyle={{
margin: 5,
marginLeft: 25,
borderColor: '#1874FF',
}}
titleStyle={{
width: '100%',
fontSize: 16,
backgroundColor: 'red',
color: colors.secondary,
fontFamily: 'Sen-Bold',
}}
title={isLoadingAddress ? 'Fetching...' : 'Submit'}
type="clear"
disabled={
!inputAddress.trim() || isLoading
}
onPress={() => _onSubmitAddress()}
/>
I use react-native-material-dropdown and when I select an item, the selected item is visible. How to make it disappear to avoid getting text over an image like this :
Thanks a lot for any help !
<View style={[styles.centeredView, {marginTop:0}]}>
<MaterialDropdown
data={data_dropdown}
pickerStyle={styles.dropdownPickerStyle}
affixTextStyle={{ fontFamily: "FunctionLH" }}
itemTextStyle={{ fontFamily: "FunctionLH" }}
labelTextStyle={{ fontFamily: "FunctionLH" }}
containerStyle={styles.dropdownContainerStyle}
itemCount={10}
dropdownPosition={-4.5}
underlineColor='transparent'
labelExtractor={({ label }) => label}
valueExtractor={({ value }) => value}
propsExtractor={({ props }, index) => props}
onChangeText={(value) => this.choiceAction(value)}
useNativeDriver={true}
/>
<Image
source={require("../../assets/images/btn-filter-by-period.png")}
style={{resizeMode: "contain",
width: "95%",
height: 50,
borderRadius: 100 / 2,
position: 'absolute',
margin: 0,
padding: 0,
height:30,
borderRadius:0}}/>
</View>
I m using GooglePlacesAutocomplete where while typing getting the list of places but some places text containing more than that,so I wanted to wrap the text there.
<GooglePlacesAutocomplete
placeholder='Where To ?'
minLength={4}
autoFocus={true}
listViewDisplayed="auto"
returnKeyType={'search'}
fetchDetails={true}
onPress={(data, details = null) => {
props.notifyChange(details.geometry.location,data);
}}
query={{
key: 'chghgdhgfhgfjhdhklkl',
language: 'en',
}}
nearbyPlacesAPI= 'GooglePlacesSearch'
debounce={200}
styles={ styles }>
</GooglePlacesAutocomplete>
and my styles for that is as follows
const styles = StyleSheet.create({
textInputContainer:{
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0,
zIndex:999,
width:'90%',
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 45,
color: '#5d5d5d',
fontSize: 16,
borderWidth:1,
zIndex:999,
},
predefinedPlacesDescription: {
color: '#1faadb'
},
listView:{
top:45.5,
zIndex:10,
position: 'absolute',
color: 'black',
backgroundColor:"white",
width:'89%',
},
separator:{
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: 'blue',
},
description:{
flexDirection:"row",
flexWrap:"wrap",
fontSize:14,
maxWidth:'89%',
},
});
refer this link https://reactnativeexample.com/customizable-google-places-autocomplete-component-for-ios-and-android-react-native-apps/
but not able to find the solution.help would be appreciated
The width of the ListView showing the results has its width hardcoded to window.with. That is why you wrapping the text isn't working.
There is a potential workaround, and that would be to split the description into multiple lines. You can do this with the renderRow prop. Styling would need to be adjusted for your specific use case.
<GooglePlacesAutocomplete
placeholder='Where To ?'
minLength={4}
autoFocus={true}
listViewDisplayed="auto"
returnKeyType={'search'}
fetchDetails={true}
onPress={(data, details = null) => {
props.notifyChange(details.geometry.location,data);
}}
query={{
key: 'chghgdhgfhgfjhdhklkl',
language: 'en',
}}
nearbyPlacesAPI= 'GooglePlacesSearch'
debounce={200}
renderRow={(rowData) => {
const title = rowData.structured_formatting.main_text;
const address = rowData.structured_formatting.secondary_text;
return (
<View>
<Text style={{ fontSize: 14 }}>{title}</Text>
<Text style={{ fontSize: 14 }}>{address}</Text>
</View>
);
}}
styles={ styles }>
</GooglePlacesAutocomplete>
You would need to add row to your styles and you can description from styles, because it is being overwritten by renderRow
row: {
height: "100%",
},
Disclosure: I am the maintainer of this package.
You can even style the field too.
Follow official doc-
<GooglePlacesAutocomplete
placeholder='Enter Location'
minLength={2}
autoFocus={false}
returnKeyType={'default'}
fetchDetails={true}
styles={{
textInputContainer: {
backgroundColor: 'grey',
},
textInput: {
height: 38,
color: '#5d5d5d',
fontSize: 16,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
How can I change the color of icon in IconButton? The color of icon in the theme (using theme designer) is black however sometimes I need to show a iconbutton in white color. The code below doesn't seem to change the color of icon to white
const iconStyle = {
root: {
color: theme.palette.white
}
};
return (
<div>
<div className={css(styles.close)}>
<IconButton iconProps={{ iconName: 'Close' }} styles={iconStyle} title="Close" ariaLabel="Close" />
</div>
<h4>{title}</h4>
<p>{narrative}</p>
{link}
</div>
);
Here is a codepen demo: https://codepen.io/vitalius1/pen/BgWmYZ
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
selectors: {
':hover .ms-Button-icon': {
color: 'red'
},
':active .ms-Button-icon': {
color: 'yellow'
}
}
},
rootHovered: {backgroundColor: 'black'},
rootPressed: {backgroundColor: 'black'}
}}
/>
Similar to Vitalie's answer you can do this to avoid using rootHovered: https://codepen.io/Jlovett1/pen/vYKEQQd
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
margin: 0,
padding: 0,
selectors: {
'& .ms-Button-icon:hover, .ms-Button-flexContainer:hover': {
backgroundColor: 'black',
color: 'red'
},
}
},
}}
/>