Related
I am trying to make an element with style={styles.settingsButtonContainer} not to depend on position of other elements on the view, but to be always in the top right corner of the screen. I am trying in this way:
<View style={styles.container}>
<RCActivityIndicator animating={showActivityIndicator} />
<RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
<Text style={styles.title}>Noughts and Crosses</Text>
<Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
<TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
<Text style={styles.buttonText}>New game</Text>
</TouchableHighlight>
<Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
<Field state={fieldState} size={fieldSize} winner={winCombination} onCellPress={onCellPress} />
</ScrollView>
<View style={styles.settingsButtonContainer}>
<TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
<Image source={require('../img/settings.png')} style={styles.settingsIcon} />
</TouchableHighlight>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
title: {
textAlign: 'center',
fontSize: 33,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
button: {
alignItems: 'center',
padding: 5,
margin: 5,
marginLeft: 10,
marginRight: 10,
borderRadius: 20,
height: 35,
justifyContent: 'center'
},
newGameButton: {
backgroundColor: theme.colors.primary,
paddingLeft: 15,
paddingRight: 15,
},
buttonText: {
fontSize: 25,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
tip: {
textAlign: 'center',
fontSize: 25,
marginLeft: 10,
marginRight: 10,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
turnContainer: {
textAlign: 'center',
fontSize: 33,
fontFamily: theme.fonts.primary,
color: theme.colors.text,
marginLeft: 10,
},
turn: {
fontSize: 30,
fontFamily: theme.fonts.noughtsAndCrosses,
},
privacy: {
textAlign: 'center',
color: theme.colors.secondaryText,
fontSize: 15,
textDecorationLine: "underline",
marginTop: 20
},
settingsButtonContainer: {
position: 'absolute',
top: 5,
right: 5,
height: 50,
width: 50,
alignSelf: 'flex-end',
},
settingsButton: {
height: 50,
width: 50,
borderRadius: 25,
},
settingsIcon: {
height: 50,
width: 50
},
settings: {
marginTop: 30
},
buttonsContainer: {
flexDirection: 'row',
alignItems: 'center'
}
});
But it just takes a full row for itself, so the ScrollView doesn't take 100% height. How to make it work?
try to wrap the settingsButtonContainer
and use
settingButtonContainerWrapped: {
alignItem: 'flex-end',
flexDirection : 'row',
},
Actually the issue was in another element, that was on top of the ScrollView - it was RCActivityIndicator who took this place. I styled it, and it worked.
Use css:
[eleSelector] {
position: absolute;
right: 0;
top: 0;
}
Check HTML element Selector in CSS
As given in the image, the text 10 shares is on the top left corner. I want to center 10 shares vertically. I have tried some methods to make it come to the center of the yellow view.
render() {
return (
<View
style={styles.grandParentView}>
<View
style={styles.parentView}>
<View
style={styles.childView}>
<Text
style={styles.topLeftView}
key={'cardTitle'}>
{`APPL`}
</Text>
<Text
style={styles.topRightView}
key={'cardTitle2'}>
{`$1000.00`}
</Text>
</View>
<View
style={styles.childView}>
<Text
style={styles.bottomLeftView}
key={'cardTitle3'}>
{`10 shares`}
</Text>
<View
style={styles.redView}
key={'cardTitle4'}>
<Text
style={styles.buttonLeftView}
key={'cardTitle4'}>
{`+$200.00`}
</Text>
<Text
style={styles.buttonRightView}
key={'cardTitle4'}>
{`+0.02%`}
</Text>
</View>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
grandParentView: {
flex: 1,
marginTop: 60,
alignSelf: 'baseline',
flexDirection: 'row'
},
newView:{
flex:1,
alignContent: 'center'
},
parentView: {
flex: 1,
marginVertical: 5,
marginHorizontal: 5,
alignSelf: 'baseline',
backgroundColor: 'blue',
flexDirection: 'column',
},
childView: {
marginVertical: 5,
marginHorizontal: 5,
paddingHorizontal: 5,
backgroundColor: 'green',
flexDirection: 'row',
alignContent: 'center',
justifyContent: 'center'
},
topLeftView: {
flex: 1,
color: 'black',
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: 'yellow',
alignSelf: 'stretch',
textAlign: 'left',
paddingLeft: 5
},
bottomLeftView: {
flex: 1,
color: 'black',
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: 'yellow',
height: 50,
alignSelf: 'stretch',
textAlign: 'left',
paddingLeft: 5
},
topRightView: {
flex: 1,
color: 'black',
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: 'red',
alignSelf: 'stretch',
textAlign: 'right',
paddingRight: 5
},
redView: {
flex: 1,
flexDirection: 'row',
color: 'black',
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: 'red',
alignSelf: 'stretch',
textAlign: 'right',
paddingRight: 5
},
buttonLeftView:{
flex: 6,
color: 'black',
marginVertical: 5,
height: 50,
marginHorizontal: 5,
backgroundColor: 'cyan',
alignSelf: 'stretch',
textAlign: 'right',
paddingRight: 5
},
buttonRightView:{
flex: 4,
color: 'black',
height: 50,
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: 'cyan',
alignSelf: 'stretch',
textAlign: 'right',
paddingRight: 5
}
});
I want to center the bottomLeft item (10 shares) vertically. Now it is showing top left in the view. I am new to react-native so I don't have much experience using flex and alignment. Thanks for the help in advance.
add textAlignVertical property and set it to center and change textAlign to center in your bottomLeftView style.
bottomLeftView: {
flex: 1,
color: "black",
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: "yellow",
height: 50,
alignSelf: "stretch",
textAlign: "center",
paddingLeft: 5,
textAlignVertical: "center"
}
Just add textAlignVerticle property in bottomLeftView style and set it to center
bottomLeftView: {
flex: 1,
color: "black",
marginVertical: 5,
marginHorizontal: 5,
backgroundColor: "yellow",
height: 50,
alignSelf: "stretch",
textAlign: "left",
paddingLeft: 5,
textAlignVertical: "center"
}
I am using React Native and I have 2 inline buttons, the search and add buttons:
What I need is to create some space between these buttons without affecting the left and right edge.
This is how I am using the JSX:
<View style={globalStyles.stretchContent}>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Add</Text>
</TouchableOpacity>
</View>
And the stylesheet:
touchableBtnDropOffItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
As you know React Native uses flexbox and I am having a hard time trying to achieve what I need. The thing is that if I apply margin, it will reduce the width of the buttons on the end of each one. For example: I need the search button to be completely aligned with the text All Passengers List (9). If I apply marginHorizontal it will reduce the width, it will create a margin on both sides of the 2 buttons so it won't be aligned anymore with the text I mentioned.
So, what can I do in this case?
touchableBtnDropOffItem: {
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
flexBasis: 45%,
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
add flexBasis: 45% to the button and add justifyContent: 'space-between' to the stretchContent.
flexBasis is something like width when used inside flexbox
The easiest way to fix this is, keep a width for both the button and use justifyContent: 'space-around' and if want space in between button's left or right too use justifyContent: 'space-between'.
For your example,
touchableBtnDropOffItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
width: '40%'
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
The simplest thing to do is set the buttons to have a width slightly less than half (45% or 40%), then float each button (float Search to the left, and Add to the right):
(I think the below syntax is correct - if it's not valid React code, please tell me how to fix it).
<View style={globalStyles.stretchContent}>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor; float: left; },
]}
>
<Text style={{ color: '#fff' }}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor; float: right; },
]}
>
<Text style={{ color: '#fff' }}>Add</Text>
</TouchableOpacity>
</View>
And in the stylesheet:
touchableBtnDropOffItem: {
width: 45%,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
},
I animate my view up 120 pixels when the keyboard opens for a Modal I have. When the keyboard closes, the view returns 120 pixels down. The problem is, the area that goes off screen at the top, when it gets animated back, the view is slightly smaller, and it gets slightly smaller each time, Here is the code - I will put a comment to show the view that is shrinking:
<Animated.View
style={{
paddingTop: 5,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: this.state.yPosition,
marginBottom: this.state.yPositionPositive,
flex: 1,
marginLeft: (Dimensions.get('window').width - 300) / 4,
backgroundColor: 'rgba(0,0,0,0.8)',
width: 300,
borderRadius: 4,
borderWidth: 0,
}}>
<View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
<View style={{height: 126, backgroundColor: 'blue', alignItems: 'stretch'}}>
<ScrollView contentContainerStyle={{flexGrow:1}} style={{flexDirection: 'column', backgroundColor: '#e6fffe'}}>
<View style={{height: 90, backgroundColor: 'red', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingTop: 5, paddingBottom: 5, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}>
<View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
<Image
source={require('../assets/billythekid2.jpg')}
style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
/>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
</View>
</View>
</View>
<View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}>
<View style={{flexDirection: 'row', flex: 0.5}}>
<View style={{flex: 0, alignSelf: 'center'}}>
<Text style={{fontSize: 16, fontWeight: '700'}}>
eamon.white
</Text>
</View>
</View>
</View>
</View>
<View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}>
<Text
style={{
width: 280,
flex: 0,
backgroundColor: '#e6fffe',
paddingLeft: 5,
borderWidth: 0,
borderRadius: 4,
color: '#000',
fontSize: 14,
}}>
{this.state.messageFromSender}
</Text>
</View>
</ScrollView>
</View>
<View style={{flex: 1}} onLayout={(event) => {
this.setState({height: event.nativeEvent.layout.height});
}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text
style={{
flex: 0,
width: Dimensions.get('window').width,
color: 'white',
fontWeight: '700',
marginTop: 5,
marginBottom: 5
}}>
Date(s) Needed:
</Text>
{this.showCalendar()}
</View>
</TouchableWithoutFeedback>
<View style={{ flex: 0, marginBottom: 10, justifyContent: 'center', flexDirection: 'column', marginTop: 0 }}>
<TextInput
style={{
width: 280,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: '#ffffff',
paddingLeft: 5,
borderRadius: 4,
height: this.state.height - 313
}}
onChangeText={text => this.setState({ message: text })}
value={this.state.message}
multiline={true}
numberOfLines={2}
onFocus={this.animateUp}
placeholder='Type a message...'
/>
</View>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
RESPOND
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
ACCEPT
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
DECLINE
</Text>
</TouchableOpacity>
</View>
</View>
</Animated.View>
Animations:
animateUp = () => {
Animated.parallel([
Animated.timing(this.state.yPosition, {
toValue: -120,
duration: 300,
}),
Animated.timing(this.state.yPositionPositive, {
toValue: 120,
duration: 300,
})
]).start();
}
Animated.parallel([
Animated.timing(this.state.yPosition, {
toValue: 0,
duration: 1,
}),
Animated.timing(this.state.yPositionPositive, {
toValue: 0,
duration: 1,
})
]).start()
It starts out like this:
Each time the keyboard opens and closes, and the animation happens, pushing the top of the modal off the screen, the ScrollView shrinks a little - until it ends up looking like this:
Any suggestions would be great.
If you need to animate a view when the keyboard opens, use KeyboardAvoidingView:
https://facebook.github.io/react-native/docs/keyboardavoidingview
I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup.
I'm new to React Native so other things I did might be wrong, forgive me for that :)
This is a screenshot of the popup when it is open
This is some of the code:
From the Popup component:
render() {
if (!this.props.open) {
return <View />
}
return (
<View style={styles.container}>
<View style={styles.popupStyle}>
<View style={{flex:1, justifyContent: 'center', marginRight: 10}}>
<View style={styles.amountEnterStyle}>
<TextInput
keyboardType={'numeric'}
underlineColorAndroid='transparent'
autoCorrect={false}
style={styles.textInputStyle}
value={this.state.amount}
onChangeText={this._onAmountEnter.bind(this)} />
<Text style={styles.currencyTextStyle}>NIS</Text>
</View>
<View style={styles.separatorStyle} />
<View style={styles.categorySectionStyle}>
{this._renderCategoryDropdown()}
</View>
</View>
<View style={{justifyContent: 'center'}}>
<TouchableWithoutFeedback
onPress={this._onAddPaymentClicked.bind(this)} >
<View style={{width: 110, height:100, backgroundColor: "#ff0000"}} />
</TouchableWithoutFeedback>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
},
amountEnterStyle: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
textInputStyle: {
width: 100,
fontSize: 50,
fontWeight: 'bold',
height: 65,
flex: 1,
marginTop: -20,
paddingBottom: 0,
marginBottom: 0,
marginLeft:10,
textAlignVertical: 'center'
},
currencyTextStyle: {
fontSize: 50,
color: '#c0c0c0',
marginTop: -20,
textAlignVertical: 'center'
},
separatorStyle: {
height: 2,
marginTop: 0,
backgroundColor: '#c0c0c0',
},
categorySectionStyle: {
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: 8
},
categoryColorDotStyle: {
width: 20,
height: 20,
borderRadius: 100/2,
marginLeft: 10,
marginTop: 5,
},
categoryTextStyle: {
fontSize: 24,
marginHorizontal: 4,
color: '#c0c0c0',
marginLeft: 10,
paddingRight: 10,
marginTop: -3
},
popupStyle: {
width: Dimensions.get('window').width - 60,
flexDirection: 'row',
justifyContent: 'space-between',
height: 150,
paddingRight:10,
paddingLeft:10,
borderRadius: 2,
margin: 20,
padding: 10,
opacity: 1,
borderRadius: 10,
backgroundColor: '#ffffff'
},
dropdownSeparator: {
height: 1,
backgroundColor: 'cornflowerblue'
},
And this is the hosting component:
render() {
var totalIncome = this.props.balance.totalIncome;
var totalExpanses = this.props.balance.totalExpanses;
return (
<View style={{flex:1, justifyContent: 'space-between'}}>
<Image pointerEvents='none' source={require('../../res/background.png')} style={styles.container} />
<MainScreenHeader onSettingPress={this._onBalanceSettingsPress.bind(this)}/>
<MainBalanceCounter totalCount={totalIncome} currentCount={totalIncome-totalExpanses} />
<View style={{justifyContent: 'center', alignItems: 'center', marginBottom: 150}}>
<AddPaymentButton onPress={this._onAddPaymentPress.bind(this)} />
<PaymentPopup
open={this.state.paymentPopupOpen}
onAddPaymentClicked={this._onPaymentPopupAddClicked.bind(this)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
innerContainer: {
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
backgroundColor: 'transparent'
},
});
I was trying man things to have a view that will catch clicks that happens outside of the popup, but no success.
Any help will be much appreciated,
Thanks,
Giora.
have you tried out react-native-modalbox? I use it in my applications and it works pretty great. If you have touch events behind the modal, it will close. Also, you can define how large you'd like the modal to be. It doesn't have to take up the whole screen.
Otherwise, you were on the right track. You'd need a TouchableWithoutFeedback component that covers the full width and height of the screen. Your popup would be alongside of this component with a higher zIndex. Let me know if you'd like to go this route and I can provide more advice. Cheers!