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'
},
}
},
}}
/>
Related
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 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',
},
}}
/>
I am creating a multi-select grid Flatlist and it seems to work fine in IOS phone but it doesn't work at all on Android phone. On IOS it can select an item when clicked, but on Android it just flickers when you select/click an item.
I am really, really can't figure it out. Please help.
Thank you,
[Flatlist-Grid as per code][1]
import {
View, TouchableOpacity, StyleSheet, Text, ScrollView,
Image,
} from 'react-native'
import { MaterialIcons } from '#expo/vector-icons';
export default class StoreSelector extends Component {
constructor() {
super()
this.state = {
dataList: [
{ name: 'exp: date', key: '#ffsdsf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#01713f', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#fsdaff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#00b0a6', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#ffgadsf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#fdfdf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#fsdff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#ec008c', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#005baa', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#fceff', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#ffwf', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#000', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
{ name: 'exp: date', key: '#ea3440', image: <Image style={{ height: 110, width: 110, backgroundColor: 'red' }} /> },
]
}
}
componentDidMount() {
let arr = this.state.dataList.map((item, index) => {
this.isSelected = false
return { ...item }
})
this.setState({ dataList: arr })
}
selectionHandler = (ind) => {
const { dataList } = this.state
let arr = dataList.map((item, index) => {
if (ind == index) {
item.isSelected = !item.isSelected
}
return { ...item }
})
this.setState({ dataList: arr })
}
render() {
const { dataList } = this.state
return (
<View style={styles.scrollContainer}>
<ScrollView >
<View style={styles.container}>
{
dataList.map((item, index) => {
return (
<TouchableOpacity
key={item.key}
onPress={() => this.selectionHandler(index)}
style={styles.boxContainer}>
<View style={styles.img}>{item.image}</View>
<View>{item.isSelected ? <MaterialIcons name="check-box" size={24} color="#fbbe2f" /> : <MaterialIcons name="check-box-outline-blank" size={24} color="grey" />}</View>
</TouchableOpacity>
)
})
}
</View>
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
scrollContainer: {
flex: 1,
},
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
boxContainer: {
height: 110,
width: 110,
margin: 7,
},
img: {
elevation: 5,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
shadowColor: '#000',
shadowOffset: { width: 1, height: 2 },
shadowOpacity: .3,
shadowRadius: 3,
borderWidth: 0.5,
borderColor: '#eee'
}
})
[1]: https://i.stack.imgur.com/hrRVS.png
You have given elevation to image element which is appearing above your checkbox so on select action it gets selected but not visible as it is under the image.
Now question is how will you see the checkbox?
Option 1: Remove the elevation
img: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
shadowColor: '#000',
shadowOffset: { width: 1, height: 2 },
shadowOpacity: .3,
shadowRadius: 3,
borderWidth: 0.5,
borderColor: '#eee'
}
Option 2: Make the elevation of the icons higher then the image elevation
<View>
{item.isSelected ?
<MaterialIcons name="check-box" size={24} color="#fbbe2f" style={{elevation:10}}/>
:
<MaterialIcons name="check-box-outline-blank" size={24} color="grey" style={{elevation:10}}/>}
</View>
I referred to lot of places but still the issue persist, I've a card list here im displaying just four cards, now I want each row to have two cards each, but unable to do so. Here is the code for reference.
<View style={styles.panelBox}>
<TouchableOpacity
activeOpacity={1}
onPress={() => navigation.navigate('ExploreCareersIndex', { pathway_id: pathway.id })}
style={[styles.card]}>
<ImageBackground
resizeMode='cover'
style={styles.cardBody}
imageStyle={styles.imageRadius}
source={{uri: pathway.avatar_url}}>
</ImageBackground>
<Text style={styles.textImageStyle}>{pathway.name}</Text>
</TouchableOpacity>
</View>
and the CSS
panelBox: {
paddingHorizontal: 15,
paddingLeft: 10,
paddingRight: 10,
backgroundColor:'blue',
flexDirection:'row',
flexWrap:'wrap',
flex:1,
flexBasis:2,
},
card: {
backgroundColor: Colors.white,
width: "40%",
height:130,
textAlign: "center",
backgroundColor:'red',
},
cardBody: {
padding: 10,
justifyContent: "space-between",
overflow: "hidden",
shadowColor: Colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
height: 80,
},
imageRadius: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
},
cardtitle: {
textAlign: "left",
fontSize: 12,
lineHeight: 16,
color: Colors.white,
fontFamily: primaryFont.fontMedium,
paddingRight: 10,
},
textImageStyle: {
textAlign: 'center',
fontSize: 12.5,
fontFamily: primaryFont.fontMedium,
marginTop: 5,
color: Colors.gray4,
height: '100%',
},
still unsure why it isnt working. If you still need more reference I can provide some screenshot as well.
Since you are trying to display a list of items try to use FlatList or SectionList. Using numColumns Props in React Native FlatList you can easily display multiple columns layout.
Check below sample
import React, { Component } from "react";
import { View, FlatList, StyleSheet, Text, Dimensions } from "react-native";
const ScreenWidth = Dimensions.get("window").width;
const DATA = [
{
id: "1",
title: "1"
},
{
id: "2",
title: "2"
},
{
id: "3",
title: "3"
}
];
export default class Example extends Component {
renderItems = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
render() {
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={this.renderItems}
keyExtractor={item => item.id}
numColumns={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
item: {
width: (ScreenWidth - 40) / 2 - 10,
backgroundColor: "#000",
padding: 10,
marginVertical: 10,
marginHorizontal: 10
},
title: {
fontSize: 32,
color: "#fff",
alignSelf: "center"
}
});
If you have any doubts feel free to ask. Hope this will helps you.
Not sure is this what you want, two card in a row. So, in react-native you can just flex:1 for parent, and set width:'100%' for child, and it will auto divided by two.
.grandparent{
display:flex;
flex-direction:column;
}
.parent{
display:flex; // in react-native just flex:1
}
.child{
background-color:#333;
height:100px;
width:100%;
border:1px solid #ccc;
text-align:center;
color:#fff;
font-size:30px;
}
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
<div class="child">4</div>
</div>
</div>
You need to add ScrollView Insid the ScrollView add cards then in ScrollView add property horizontal={true}
Created by referring to https://snack.expo.io/rJBRhOLU-
const cardOne = require("../../image/doginfo-1.png");
const cardTwo = require("../../image/doginfo-2.png");
const cardThree = require("../../image/doginfo-3.png");
const cardFour = require("../../image/doginfo-4.png");
class AdvancedDeck extends Component {
constructor(props) {
super(props);
this.sate = {
cardIndex: 0,
swipedAllCards: false,
swipeDirection: "",
cards: [
{
text: "Card One",
name: "One",
image: cardOne
},
{
text: "Card Two",
name: "Two",
image: cardTwo
},
{
text: "Card Three",
name: "Three",
image: cardThree
},
{
text: "Card Four",
name: "Four",
image: cardFour
}
]
};
}
renderCard = (card, index) => {
return (
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={card.image} />
<Body>
<Text>{card.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: "cover",
width: null,
flex: 1,
height: 300
}}
source={card.image}
/>
</CardItem>
<CardItem>
<IconNB name={"ios-heart"} style={{ color: "#ED4A6A" }} />
<Text>
{card.name}-{index}
</Text>
</CardItem>
</Card>
);
};
onSwipedAllCards = () => {
this.setState({
swipedAllCards: true
});
};
swipeLeft = () => {
this.swiper.swipeLeft();
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Advanced Deck Swiper</Title>
</Body>
<Right />
</Header>
<View style={{ flex: 1, padding: 12 }}>
<Swiper
ref={swiper => {
this.swiper = swiper;
}}
onSwiped={this.onSwiped}
onSwipedLeft={() => this.onSwiped("left")}
onSwipedRight={() => this.onSwiped("right")}
onSwipedTop={() => this.onSwiped("top")}
onSwipedBottom={() => this.onSwiped("bottom")}
onTapCard={this.swipeLeft}
cards={this.props.cards}
cardIndex={this.props.cardIndex}
cardVerticalMargin={80}
renderCard={this.renderCard}
onSwipedAll={this.onSwipedAllCards}
showSecondCard={false}
stackSize={3}
stackSeparation={15}
overlayLabels={{
bottom: {
title: "BLEAH",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
},
left: {
title: "NOPE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: "LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: "SUPER LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
/>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
position: "absolute",
bottom: 50,
left: 0,
right: 0,
justifyContent: "space-between",
padding: 15
}}
>
<Button
style={{ backgroundColor: "black" }}
onPress={() => this.swiper.swipeBack()}
title="Swipe Back"
>
<Icon name="arrow-back" />
<Text>Swipe Left</Text>
</Button>
<Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
<Text>Swipe Right</Text>
<Icon name="arrow-forward" />
</Button>
</View>
</Container>
);
}
}
export default AdvancedDeck;
How can I fix it?
I changed the code to contact-native-check-swiper to write back button because it did not turn into a back button while writing the existing default-base checkswiper.
Any answer is welcome. Please help me a lot.
The problem is with
<Swiper
...
cards={this.props.cards}
...
You've defined the cards in this.state = { cards: ... } instead