I was able to get #Shoutem/theme working. I want to introduce a new button style along side all the others.
Here is my code.
const theme = Object.assign(UITheme(), {
'shoutem.ui.Button': {
'.new-button': {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
borderRadius: 2,
borderWidth: 1,
borderColor: '#cccccc',
paddingTop: 9,
paddingBottom: 9,
}
}
});
With this code in place styleName="new-button" is the only button available.
How do I make it an addition and not a replacement?
Related
In react native sign in button I am trying to put icon as horizontally left and vertically at the center and the text at the center both horizontally and vertically. With the below code as soon as I do alignSelf as 'center' on the Icon it looses its vertical position. As per the documentation alignSelf should only ovverride the property in cross-axis and not main axis. Here the icon is SVG icon.
const GoogleSignInBtn = ({style, onPress, children}) => {
const {buttonStyles, textStyle, iconStyle} = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyles}>
<GoogleIcon style={iconStyle} />
<Text style={textStyle}>{children}</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10,
},
buttonStyles: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 5,
flex: 1,
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5,
},
iconStyle: {
height: 20,
width: 20,
alignSelf: 'flex-start',
},
[Screen Shot of output][1]};
Try
const styles = StyleSheet.create({
textStyle: {
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10,
marginHorizontal: 'auto',
},
buttonStyles: {
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 5,
flex: 1,
flexDirection: 'row',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5,
},
iconStyle: {
height: 20,
width: 20,
alignSelf: 'center',
},
});
You are indeed overriding alignItems, however it seems for whatever reason your flexDirection is implicitly set to 'column', so the icon is being set to the top of the flexbox.
Changing flexDirection to 'row' allows the items to be oriented horizontally, and thus alignSelf works as desired.
Additionally, I used marginHoritonal: auto to center the text.
See In CSS Flexbox, why are there no “justify-items” and “justify-self” properties? for more information on this.
Have all my styling done for two buttons I am using inside header title to switch back between screens. The iOS implementation works perfect but the elevation style prop for Android is causing some issues. It seems to also pass down the elevation style to the child component which in my case is a TouchableOpacity which makes the button click look a little off. Is there any way to fix this issue? See images for a better idea on click impact...
I have attempted to style the TouchableOpacity to elevation:0 to override the issue with no luck. Just to get the elevation style prop to work I had to set a borderColor: 'transparent'.
static navigationOptions = (navData) => {
return {
headerTitle: (
<View style={styles.titleContainer}>
<TouchableOpacity style={styles.mapTitleButton} onPress={() => { navData.navigation.navigate('Map')}}>
<Text style={[styles.titleFont, style={color: Colors.buttonSelected}]}>MAP</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listTitleButton}>
<Text style={styles.titleFont}>LIST</Text>
</TouchableOpacity>
</View>
),
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
headerRight: (
<View style={styles.placeholder}></View>
),
}
}
}
const styles = StyleSheet.create({
titleContainer: {
alignItems: 'center',
flexDirection: 'row',
height: '60%',
width: '50%',
justifyContent: 'center',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.7,
shadowRadius: 1,
shadowColor: '#000000',
elevation: 5,
borderColor: 'transparent'
},
mapTitleButton: {
backgroundColor: Colors.buttonUnSelected,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
listTitleButton: {
backgroundColor: Colors.buttonSelected,
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
titleFont: {
fontFamily: 'sailec',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
padding: 10,
fontSize: 13
},
container: {
alignItems: 'center',
justifyContent: 'center',
flex: 1
}
});
Android Screen Capture
Did you try with: TouchableWithoutFeedback
Rather than putting elevation in the parent container I fixed it by putting it in the styling for the actual TouchableOpacity. Good to also note that for Android I needed to set borderColor: 'transparent' to also get the elevation to render.
So styling as shown below:
titleContainer: {
alignItems: 'center',
flexDirection: 'row',
height: '60%',
width: '50%',
justifyContent: 'center',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.7,
shadowRadius: 1,
shadowColor: '#000000',
},
mapTitleButton: {
backgroundColor: Colors.buttonUnSelected,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
elevation: 5,
borderColor: 'transparent'
},
listTitleButton: {
backgroundColor: Colors.buttonSelected,
flex:1,
alignItems: 'center',
justifyContent: 'center',
elevation: 5,
borderColor: 'transparent'
},
const stile = StyleSheet.create({
loginButtonn: {
backgroundColor: "#fff",
borderRadius: 30,
height: 44,
marginTop: 30,
width: 326,
justifyContent: 'center',
alignItems: 'center'
},
});
This isn't very well written question, but I can try to answer it.
There are multiple ways of trying to achieve what you are trying to do. My favorite way is to use flexbox, which it looks like you tried to do. You can take a look at the link but here's what you're missing; (Basically just a parent element with display of flex)
const style = StyleSheet.create({
loginButton: {
backgroundColor: "#fff",
borderRadius: 30,
height: 44,
marginTop: 30,
width: 326,
justifyContent: 'center',
alignItems: 'center'
},
container: {
display: 'flex',
width: '100%',
height: '100%'
}
});
In render function (something like):
<div className={style.container}>
<button className={style.loginButton} />
</div>
I am trying to add an icon for my app prototype by using this styling:
swordIcon:{
position: "absolute",
alignSelf: 'flex-start',
paddingTop: "42%"
}
However, it's position is inconsistent and sometimes random. Screenshots will represent that:
I think one time it was also something inbetween.
Why is it happening? Here's styling of the parent element if that's helpful:
container: {
flex: 1,
borderColor: "red",
borderWidth: 1,
alignItems: "center",
paddingTop: "5%",
flexDirection: "column"
},
I use the following style on a component:
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',//About the shadow setting
shadowOffset: { width: 0, height: 2 },//About the shadow setting
shadowOpacity: 0.2,//About the shadow setting
},
textStyle: {
fontSize: 20
}
};
The shadow doesn't get rendered.
Can someone tell me why?
As A. Goodale said, shadow props are only for iOS. With Android, you can use elevation in your View style.
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
elevation: 4,
},
According to this page, the shadow props are only implemented on iOS.