Subscription page design in react native
subscription page design in react native example Payment Page design
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 |