<Dropdown/> has styles props. which expects IDropdownStyles.But not able to change border outline colour. I tried this,
root: {
width: 300, color: "red", backgroundColor: "red", borderColor: "red",
borderTopColor: "red",
outlineColor: "red",
borderRightColor: "red",
},
dropdown: {
width: 300, color: "red", backgroundColor: "red", borderColor: "blue",
borderTopColor: "red"
, outlineColor: "red",
borderRightColor: "red",
},
But the colour is not reflected. Is any other way to achieve this?
Use title property inside styles:
<Dropdown
...
styles={{
title: {
borderColor: 'red',
}
}}
/>
Codepen working example.
Related
I am using the react-native-mapbox-gl library and I am showing some points on a map. Each has its own callout to display additional information when the respective point is pressed.
I have found the docs/Callout.md and Callout.js source and and example using it in example/src/examples/ShowPointAnnotation.js. This was a great help, thank you so much for the example... I might though doing something really wrong and I have spent days already on this...
My issue is that when I press one annotation, the styling of the annotations appears to be lost (they go all black). Similarity, the styling for the callouts don't seem to be applied. They all black, too. I have shared code and screenshots bellow.
<MapboxGL.PointAnnotation
key={id}
id={id}
coordinate={coordinate}
title={title}
onSelected={feature => {
debugger
this.onAnnotationSelected(i, feature)
}}
onDeselected={this.onAnnotationDeselected}
>
<View
style={[
styles.annotationContainer,
{
backgroundColor: bgColour,
borderRadius: ANNOTATION_SIZE / 2,
borderWidth: StyleSheet.hairlineWidth,
borderColor: borderColor
}
]}
>
<Text style={[styles.annotationFill, { color: borderColor }]}>
{studio.id}
</Text>
</View>
<MapboxGL.Callout
style={[
styles.calloutContainer,
{ backgroundColor: bgColour, borderColor: borderColor }
]}
title={title}
>
<View
style={[
styles.calloutContent,
{
backgroundColor: bgColour,
borderColor: borderColor
}
]}
>
<Text style={[styles.annotationFill, { color: borderColor }]}>
{title}
</Text>
</View>
<View
style={[
styles.tip,
styles.calloutContent,
{
backgroundColor: bgColour,
borderColor: borderColor
}
]}
/>
</MapboxGL.Callout>
</MapboxGL.PointAnnotation>
And stylings
const ANNOTATION_SIZE = 32
const styles = StyleSheet.create({
annotationContainer: {
width: ANNOTATION_SIZE,
height: ANNOTATION_SIZE,
alignItems: 'center',
justifyContent: 'center'
},
annotationFill: {
color: 'black'
},
container: {
flex: 1
},
calloutContainer: {
alignItems: 'center',
justifyContent: 'center',
width: 180,
zIndex: 9999999
},
calloutContent: {
flex: 1,
position: 'relative',
padding: 8,
borderRadius: 3,
borderWidth: 1
},
calloutTitle: {
width: ANNOTATION_SIZE,
height: ANNOTATION_SIZE,
color: 'black',
textAlign: 'center'
},
calloutTip: {
zIndex: 1000,
marginTop: -2,
elevation: 0,
backgroundColor: 'transparent',
borderTopWidth: 16,
borderRightWidth: 8,
borderBottomWidth: 0,
borderLeftWidth: 8,
borderTopColor: 'white',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent'
}
})
I am concerned though as well that I should not be using PointAnnotation, as it is marked to be deprecated. Is there an alternative way to achieve the same? Could someone point me into right direction? I am happy to contribute too if needed.
I want to change the color of the dropdown icon on the right of SectionedMultiSelect from the default color. Here is my code:
<SectionedMultiSelect
items={items}
IconRenderer={Icon}
uniqueKey="id"
// subKey="children"
selectText="Click to select Expertise"
showDropDowns={true}
onSelectedItemsChange={(selectedItems) => {
setDidUpdate(true);
setExpertise(selectedItems)
}}
selectedItems={expertise}
colors= {{
primary: 'red'
}}
styles={{
// chipText: {
// maxWidth: Dimensions.get('screen').width - 90,
// },
chipContainer : {
// backgroundColor: 'red',
// color: 'green',
borderRadius: 16,
borderWidth: 2,
borderColor: 'white',
marginTop: 10
},
chipText: {
color: 'white',
},
chipIcon: {
color: 'white',
},
button: {
backgroundColor: '#FF9017',
},
selectToggle: {
color: 'white',
},
selectToggleText: {
color: 'white',
// backgroundColor: 'red',
borderWidth: 2,
borderRadius:25,
borderColor: '#fff',
padding: 5,
paddingLeft: 15
},
}}
/>
I have tried changing it through the styles and the color props but to no avail.
I have following component:
<TouchableOpacity style={styles.event} onPress={onPress}>
<View style={styles.dateContainer}>
<Text style={styles.eventDate}>Sent at : {event.sentAt}</Text>
</View>
<View style={styles.eventTextContainer}>
<Text style={styles.eventText}>{event.text}</Text>
</View>
</TouchableOpacity>
then in my styles:
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
}),
eventTextContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
eventText: {
fontSize: 20,
fontWeight: '700',
}
The shadow is being applied to the text, which I dont want, only want it applied to the touchable opacity, what am I doing wrong?
This is similar to another stackoverflow question, the key to avoid this problem is applying a background color to the container with the shadow styles, in your case is the event style.
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
backgroundColor: "#FFF",
}),
I am new to react native and I am using react-navigation & react-navigation-material-bottom-tabs.
All I want to do is curve the top-right corner and top-left corner of bottom tab bar.
My Code:
const screen1 = createMaterialBottomTabNavigator(
{
Home: {
screen: HomeScreen,
style : {
backgroundColor: 'black'
}
},
About: AboutScreen,
Scan: ScanScreen,
Fav: AllScreen
},
{
initialRouteName: "Home",
activeColor: 'red',
inactiveColor: 'blue',
barStyle: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'white',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderTopColor: '#000',
borderBottomColor: '#000',
borderLeftColor: '#000',
borderRightColor: '#000',
},
}
);
Sorry, I'm not react-native pro but after debugging for some time i came up with solution by adding overflow: 'hidden' to barStyle. The problem lies in child div as it inherits background color which overlaps with your rounded border.
barStyle: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor:'orange',
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderColor: 'transparent',
overflow: 'hidden',
},
see working snack.expo
I want to implement react-native-modal-dropdown functionality in my app,
here is the code
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>{Strings.Location}</Text>
<View style={styles.input}>
<Image
style={styles.mapIcon}
source={require('../assets/map_pic_icon.png')}
/>
<ModalDropdown
onSelect={(index, value) => { this.setState({ selected: value }) }}
options={['option 1', 'option 2', 'option 3', 'option 4']}
defaultValue={Strings.Gaston}
dropdownTextStyle={{ backgroundColor: '#fff', fontSize: 18, color: colors.black }}/*Style here*/
textStyle={{ fontSize: 18, color: colors.gunmetal, alignSelf: 'flex-start', marginLeft: 10 }}
dropdownStyle={{ flex: 1, width: '90%', marginVertical: 10, borderWidth: 1, borderColor: colors.light_gray }}
style={{ flex: 1, width: '100%', backgroundColor: colors.white, justifyContent: 'center' }}
/>
<Image
style={styles.iconStyle}
source={require('../assets/down_arrow_blue.png')}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
viewStyle: {
margin: 10,
},
input: {
height: 50,
width: '100%',
marginTop: 8,
borderRadius: 2,
borderColor: colors.light_gray,
fontSize: 20,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
iconStyle: {
margin: 20,
alignSelf: 'flex-end'
},
mapIcon: {
margin: 10,
alignSelf: 'center',
},
});
using this code my screen looks like this
my problem is when i click on blue color down arrow image then drodown is not opening it is only opening when i click on text .
How to solve this
And one more issue is dropdown width is not aligning properly to parent.
It is coming like this
Can anyone please tell me how to show dropdown list when icon is clicked and how to align the drodownlist list width properly.