working on event detail screen

App.js

@@ -34,7 +34,7 @@ import VariantList from './UI/Event/More/AddEvent/VariantList';
 import AddVariantValue from './UI/Event/More/AddEvent/AddVariantValue';
 import Filter from './UI/Event/Explore/Filter';
 import Category from './UI/Event/Explore/Category';
-
+import EventDetail from './UI/Event/EventDetail/EventDetail';
 
 
 const Stack = createStackNavigator();
@@ -76,6 +76,8 @@ export default class App extends Component {
         <Stack.Screen name={NavigationRoots.VariantList} component={VariantList} />
         <Stack.Screen name={NavigationRoots.AddVariantValue} component={AddVariantValue} />
         <Stack.Screen name={NavigationRoots.Sort} component={Category} />
+        <Stack.Screen name={NavigationRoots.EventDetail} component={EventDetail} />
+
         <Stack.Screen name={NavigationRoots.Filter}component={Filter} options={{
           title: '',
           ...TransitionPresets.ModalSlideFromBottomIOS,

Component/RatingReview.js

@@ -0,0 +1,75 @@
+
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  StatusBar,
+  TouchableOpacity,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import starIcon from '../assets/star.png';
+import colors from '../CommonClasses/AppColor';
+import eventStyles from '../StyleSheet/EventStyleSheet';
+
+export default class RatingReview extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+  };
+
+  renderRatingReviewView = () => {
+    var views = []
+    var allStartView = [];
+    var valueView = [];
+    var progressView = [];
+    for (let a = 0; a < 5; a++) {
+      var starView = [];
+      for (let b = 0; b <= a; b++) {
+        starView.push(<View style={{ flexDirection: 'row', margin: 5 }}>
+          <Image source={starIcon} style={{ height: 15, width: 15 }} />
+        </View>)
+      }
+      allStartView.push(<View>
+        {starView}
+      </View>)
+      progressView.push(<View style={{ borderRadius: 5, backgroundColor: 'red', height: 10, width: 10 * a + 10, margin: 5, marginTop: 10 }} />)
+      valueView.push(<View style={{ margin: 5 }}>
+        <Text style={eventStyles.subTitleStyle}>{10 * a} </Text>
+      </View>)
+    }
+
+    views.push(<View>
+      <Text style={eventStyles.titleStyle}>{`Ratings and reviews`}</Text>
+      <View style={{ flexDirection: 'row' }}>
+        <View style={{ width: '25%', marginTop: 10 }}>
+          <Text style={{ fontWeight: '600', fontSize: 44 }}>{'4.4'}</Text>
+          <Text style={eventStyles.subTitleStyle}>{`216 ratings`}</Text>
+        </View>
+        <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+          <View style={{ flexDirection: 'row' }}>
+            {allStartView}
+          </View>
+          <View style={{ width: '33%' }}>
+            {progressView}
+          </View>
+          <View>
+            {valueView}
+          </View>
+        </View>
+      </View>
+    </View>)
+    return views;
+  }
+  render() {
+      return (<View>
+        <this.renderRatingReviewView />
+      </View>)
+  }
+}
+const styles = StyleSheet.create({
+  crossStyle: {
+    height: 15,
+    width: 15,
+  },
+});

Constants/NavigationRoots.js

@@ -21,5 +21,5 @@ module.exports  = {
   AddVariantValue: 'AddVariantValue',
   Filter: 'Filter',
   Sort: 'Sort',
-
+  EventDetail: 'EventDetail',
 }

StyleSheet/EventStyleSheet.js

@@ -25,7 +25,7 @@ module.exports = StyleSheet.create({
     fontWeight: '400',
   },
   commonTxtStyle:{
-    fontSize: 16, 
+    fontSize: 14, 
     fontWeight: '500', 
     color: colors.AppGray
   },
@@ -97,5 +97,16 @@ module.exports = StyleSheet.create({
     fontWeight: '500', 
     color: colors.AppGray
   },
+  clearBtnViewStyle : {
+    borderRadius: 4,
+    borderColor: colors.AppTheme,
+    borderWidth: 1,
+    margin: 5,
+    width: '100%',
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.AppWhite,
+  }
 });