Subscription page design in react native
Subscription page design in react native example Payment Page design
Follow Below Code to Design a creative subscription page UI Design
import React, {Component} from 'react';
import {View, StyleSheet,ScrollView} from 'react-native';
import {Form,Card, CardItem,Item, Input, Body, Text, CheckBox, Button} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
class AuthScene extends Component {
render() {
return (
<ScrollView>
<Text style={[styles.textContainer, styles.signin,{marginTop:20,color:"#19ad79"}]}>Subscription Page</Text>
<View style={{flex:1,marginRight:10,marginLeft:10}}>
<Card>
<CardItem style={{margin:10}}>
<Body>
<Text style={{fontSize:25,textAlign:"center",alignItems:"center",fontWeight:"bold",color:"#19ad79"}}>
₹ 999/Year
</Text>
</Body>
</CardItem>
</Card>
</View>
<View style={styles.loginAs}>
<Text style={styles.loginText}>Payment as</Text>
<CheckBox checked={true} />
<Body>
<Text style={styles.cboxText}>CARD</Text>
</Body>
<CheckBox checked={false} />
<Body>
<Text style={styles.cboxText}>UPI</Text>
</Body>
</View>
<View>
<View style={{flexDirection:"row",flex:1}}>
<Icon name="check" size={20} color="#19ad79" style={{marginStart:20}}/>
<Text style={{marginStart:10}}>Access All Features</Text>
</View>
<View style={{flexDirection:"row",flex:1,marginTop:6}}>
<Icon name="check" size={20} color="#19ad79" style={{marginStart:20}}/>
<Text style={{marginStart:10}}>Multiple Users Access</Text>
</View>
<View style={{flexDirection:"row",flex:1,marginTop:6}}>
<Icon name="check" size={20} color="#19ad79" style={{marginStart:20}}/>
<Text style={{marginStart:10}}>24/7 Technical Support</Text>
</View>
<View style={{flexDirection:"row",flex:1,marginTop:6}}>
<Icon name="check" size={20} color="#19ad79" style={{marginStart:20}}/>
<Text style={{marginStart:10}}>ADS Free</Text>
</View>
</View>
<View style={styles.Button}>
<Button block style={styles.mainBtn}>
<Text style={[styles.btnText,{fontSize:16,borderRadius:5}]}>Subscribe</Text>
</Button>
</View>
</ScrollView>
);
}
}
export default AuthScene;
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative',
flexDirection:"column"
},
textContainer: {
color: '#FCFDFF',
fontFamily: 'GoogleSans-Bold',
fontSize: 24,
marginBottom: 30,
position: 'relative',
top: '10%',
alignSelf: 'center',
},
formArea: {
alignSelf: 'center',
width: '100%',
backgroundColor: '#ffffff',
borderRadius: 5,
top: '10%',
paddingBottom: 40,
},
signin: {
top: 0,
color: '#2D3057',
marginTop: 15,
},
formItems: {
marginTop: 15,
borderBottomColor: '#2D3057',
},
Input: {
fontFamily: 'Poppins-Bold',
fontSize: 12,
},
loginAs: {
paddingLeft: 46.6,
display: 'flex',
flexDirection: 'row',
marginTop: 15,
marginBottom: 20,
alignItems: 'center',
},
loginText: {
color: '#2D3057',
fontSize: 10,
fontFamily: 'GoogleSans-Bold',
fontWeight: 'bold',
},
cboxText: {
fontFamily: 'GoogleSans-Medium',
fontSize: 10,
},
Button: {
padding: 30.8,
borderRadius: 4,
},
mainBtn: {
backgroundColor: '#1DDCAF',
},
btnText: {
color: '#2D3057',
fontFamily: 'GoogleSans-Medium',
fontSize: 12,
},
});
 |
| RESULT |