Details.js

import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity } from 'react-native';
class Users extends React.Component {
  constructor(props) {
  super(props);
  this.state = { };
}
render() {
  return (
    <View  style={styles.container}>
        <Text style={{fontSize:20, marginBottom:25}}>Detail of: </Text>
        <View style={[ {backgroundColor:'white'}, styles.list]} >
             <Text style={styles.listtext}>Name: </Text>
         </View>
         <View style={[ {backgroundColor:'white'}, styles.list]} >
             <Text style={styles.listtext}>Email: </Text>
         </View>
         <View style={[ {backgroundColor:'green'}, styles.list]} >
             <Text style={[ {alignSelf:'center', color:'white',fontSize:20}, styles.listtext]}> User is on a subscription </Text>
         </View>

         <Text style={{fontSize:15,marginBottom:10}}>User isn't on a subscription</Text>
         <View style={[ {backgroundColor:'red'}, styles.list]} >
             <Text style={[ {alignSelf:'center', color:'white',fontSize:20}, styles.listtext]}> Subscribe Now </Text>
         </View>


    </View>
   );
   }
}
export default  Users;
const styles = StyleSheet.create({
container:{
  paddingHorizontal:20,
  paddingVertical: 20,
  backgroundColor:'#f5f5f5',
  flex:1
},
list:{
   paddingHorizontal:20,
   paddingVertical: 20,
   borderRadius: 10,
   flexDirection:'column',
   marginBottom:10
},

});