added placeholders for structural items required for coin details screen

src/screens/coinDetails/children/activityItem.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export const ActivityItem = () => {
+    return (
+        <View>
+            <Text>Activity Item</Text>
+        </View>
+    )
+}

src/screens/coinDetails/children/children.styles.ts

@@ -0,0 +1,17 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  scrollContainer: {
+    padding: 0,
+  },
+  header: {
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  dotStyle: {
+    backgroundColor: '$primaryDarkText',
+  },
+  listWrapper: {
+    backgroundColor: '$primaryBackgroundColor',
+    flex: 1,
+  },
+});

src/screens/coinDetails/children/coinBasics.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export const CoinBasics = () => {
+    return (
+        <View>
+            <Text>Coing basics goes here</Text>
+        </View>
+    )
+}

src/screens/coinDetails/children/coinChart.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export const CoinChart = () => {
+    return (
+        <View>
+            <Text>Coin Chart goes here</Text>
+        </View>
+    )
+}

src/screens/coinDetails/children/coinSummary.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+import { CoinBasics, CoinChart, RangeSelector } from '.'
+
+export const CoinSummary = () => {
+    return (
+        <View>
+            <CoinBasics />
+            <CoinChart />
+            <RangeSelector />
+        </View>
+    )
+}

src/screens/coinDetails/children/index.ts

@@ -0,0 +1,5 @@
+export * from './activityItem';
+export * from './coinBasics';
+export * from './coinChart';
+export * from './rangeSelector'; 
+export * from './coinSummary'

src/screens/coinDetails/children/rangeSelector.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export const RangeSelector = () => {
+    return (
+        <View>
+            <Text>Range Selector</Text>
+        </View>
+    )
+}

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -1,10 +1,25 @@
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 import React from 'react'
+import { BasicHeader } from '../../../components'
+import { FlatList } from 'react-native-gesture-handler'
+import { ActivityItem, CoinSummary } from '../children'
 
 const CoinDetailsScreen = () => {
+
+  const _renderActivityItem = ({item, index}) => {
+    return <ActivityItem />
+  }
+
   return (
-    <View>
-      <Text>coinDetailsScreen</Text>
+    <View style={{flex:1}}>
+      <BasicHeader title="Coin Details" />
+      <FlatList 
+        style={{flex:1}}
+        data={["data"]}
+        renderItem={_renderActivityItem}
+        keyExtractor={(item, index)=>`activity_item_${index}`}
+        ListHeaderComponent={<CoinSummary/>}
+      />
     </View>
   )
 }

src/screens/coinDetails/screen/screen.styles.ts

@@ -0,0 +1,17 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  scrollContainer: {
+    padding: 0,
+  },
+  header: {
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  dotStyle: {
+    backgroundColor: '$primaryDarkText',
+  },
+  listWrapper: {
+    backgroundColor: '$primaryBackgroundColor',
+    flex: 1,
+  },
+});