Adding margins to the right edge of Flex-Start React-Native - css

Question

import React, { Component } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import {
CheckBox, Container, Content, Text, View, Button,
} from 'native-base';
import Fonts from '../common/Fonts';
const checkAllMargin = Dimensions.get('window').height / 3.14;
const styles = StyleSheet.create({
wrapper: {
justifyContent: 'flex-end',
flexDirection: 'column',
flex: 1,
},
moveButtonContainer: {
flexDirection: 'row',
alignSelf: 'flex-end',
marginTop: checkAllMargin,
},
prevButton: {
justifyContent: 'center',
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
backgroundColor: '#333333',
height: 55,
},
nextButton: {
justifyContent: 'center',
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
backgroundColor: '#4FCBFF',
height: 55,
},
moveButtonText: {
textAlign: 'center',
fontFamily: Fonts.NANUMGOTHICBOLD,
fontSize: 18,
},
termsView: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginTop: 21,
},
checkBox: {
marginLeft: 10,
},
termsText: {
alignSelf: 'center',
marginLeft: 17,
height: 16,
fontFamily: Fonts.NANUMGOTHIC,
fontSize: 11,
},
termsTextEnd: {
fontFamily: Fonts.NANUMGOTHIC,
fontSize: 11,
alignSelf: 'center',
},
requiredText: {
color: '#4FCBFF',
},
choiceText: {
color: '#999999',
},
checkAllView: {
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginTop: 35,
},
checkAllText: {
alignSelf: 'flex-end',
marginRight: 42,
},
checkAllBox: {
marginRight: 17,
},
openLinkButton: {
borderColor: '#CCCCCC',
borderRadius: 10,
height: 18,
width: 35,
alignSelf: 'flex-end',
borderWidth: 1,
},
openLinkText: {
fontFamily: Fonts.NANUMGOTHIC,
fontSize: 9,
paddingTop: 3,
paddingLeft: 5,
},
});
class TermsAgreeContainer extends Component {
constructor(props) {
super(props);
this.state = {
agreeTermsOfServices: false,
agreeTermsOfPrivacy: false,
agreeTermsOfCopyright: false,
agreeAll: false,
};
}
checkTermsOfServices = (isCheck) => {
this.setState({
agreeTermsOfServices: isCheck,
});
}
checkTermsOfPrivacy = (isCheck) => {
this.setState({
agreeTermsOfPrivacy: isCheck,
});
}
checkTermsOfCopyright = (isCheck) => {
this.setState({
agreeTermsOfCopyright: isCheck,
});
}
checkAll = (isCheck) => {
this.setState({
agreeTermsOfServices: isCheck,
agreeTermsOfPrivacy: isCheck,
agreeTermsOfCopyright: isCheck,
agreeAll: isCheck,
});
}
render() {
const {
agreeTermsOfServices, agreeTermsOfPrivacy, agreeTermsOfCopyright, agreeAll,
} = this.state;
const {
checkTermsOfServices, checkTermsOfPrivacy, checkTermsOfCopyright, checkAll,
} = this;
return (
<Container>
<Content scrollEnabled={false} contentContainerStyle={styles.wrapper}>
<View style={styles.termsView}>
<CheckBox
checked={agreeTermsOfServices}
onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
style={styles.checkBox}
/>
<Text
style={styles.termsText}
onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
suppressHighlighting
>
TermsOfServices
</Text>
<Text style={[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
<Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
</View>
<View style={styles.termsView}>
<CheckBox
checked={agreeTermsOfPrivacy}
onPress={() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
style={styles.checkBox}
/>
<Text
style={styles.termsText}
onPress={() => checkTermsOfPrivacy(!agreeTermsOfPrivacy)}
suppressHighlighting
>
TermsOfPrivacy
</Text>
<Text style={[styles.termsTextEnd, styles.requiredText]}> (required)</Text>
<Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
</View>
<View style={styles.termsView}>
<CheckBox
checked={agreeTermsOfCopyright}
onPress={() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
style={styles.checkBox}
/>
<Text
style={styles.termsText}
onPress={() => checkTermsOfCopyright(!agreeTermsOfCopyright)}
suppressHighlighting
>
TermsOfCopyright
</Text>
<Text style={[styles.termsTextEnd, styles.choiceText]}> (choice)</Text>
<Text style={[styles.openLinkButton, styles.openLinkText]}>Show</Text>
</View>
<View style={styles.checkAllView}>
<CheckBox
checked={agreeAll}
onPress={() => checkAll(!agreeAll)}
style={styles.checkAllBox}
/>
<Text
style={styles.checkAllText}
onPress={() => checkAll(!agreeAll)}
suppressHighlighting
>
Check All
</Text>
</View>
<View style={styles.moveButtonContainer}>
<Button full style={styles.prevButton}>
<Text style={styles.moveButtonText}>back</Text>
</Button>
<Button full style={styles.nextButton}>
<Text style={styles.moveButtonText}>next</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
export default TermsAgreeContainer;
Currently, the position of the Show button is determined by the Text length on the left.
I would like to move it to the right like the photo.
I want the Show button to be margin 30 based on the right.
However, I do not use margin-right if I use Flex-Start.
How can I place the show button on the right side?

Answer 1

One way could be to divide your current terms row in 2 views, assigning the first one a flex property and just a margin to the second one. Simply wrap the first elements in a <View>, like this:
<View style={styles.termsView}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<CheckBox
checked={agreeTermsOfServices}
onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
style={styles.checkBox}
/>
<Text
style={styles.termsText}
onPress={() => checkTermsOfServices(!agreeTermsOfServices)}
suppressHighlighting>
TermsOfServices
</Text>
<Text style={[styles.termsTextEnd, styles.requiredText]}>
(required)
</Text>
</View>
<Text
style={[
styles.openLinkButton,
styles.openLinkText,
{ marginRight: 10 },
]}>
Show
</Text>
</View>
And repeat this structure for each row.