CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
Never Mind
Never Mind

Reputation: 297

React Native Style check box and text separation

I am trying to make a register page for an application. I want to put a check box for accepting terms and conditions, but I can't find out how to put the check box slightly to the left of the text. Currently, it is put on the first letter of the text

<View style={{flexDirection: 'row', alignItems: 'center'}>
     <CheckBox style =checked={this.state.agreeTNCs} onPress={() => this.setState({agreeTNCs: !this.state.agreeTNCs})} testID="tncsBox"/>
     <Hyperlink linkStyle={{color: '#2980b9'}} onPress={() => this.props.screenChangeHandler(routes.loggedOut.termsAndConditions)}>
         <Text>I agree to the Nowzi Terms and Conditions</Text>
     </Hyperlink>
</View>

Upvotes: 0

Views: 793

Answers (1)

Jules Dupont
Jules Dupont

Reputation: 7567

Try adding a non-breaking space between the two:

<View style={{flexDirection: 'row', alignItems: 'center'}>
     <CheckBox style =checked={this.state.agreeTNCs} onPress={() => this.setState({agreeTNCs: !this.state.agreeTNCs})} testID="tncsBox"/>
     &nbsp;
     <Hyperlink linkStyle={{color: '#2980b9'}} onPress={() => this.props.screenChangeHandler(routes.loggedOut.termsAndConditions)}>
         <Text>I agree to the Nowzi Terms and Conditions</Text>
     </Hyperlink>
</View>

Upvotes: 1

Related Questions