Updated Home Page Navigation

App.js

@@ -5,10 +5,10 @@
  * @format
  */
 
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
 import 'react-native-gesture-handler';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   SafeAreaView,
   ScrollView,
@@ -20,13 +20,15 @@ import {
 } from 'react-native';
 import LoginPage from './screens/LoginPage';
 import HomePageNavigator from './navigation/HomePageNavigator';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const AppStack = createNativeStackNavigator();
 
 
 const App = () => {
- 
+
   return (
+
     <NavigationContainer>
       <AppStack.Navigator iniialRouteName="Home" headerShown={true}>
         <AppStack.Screen
@@ -39,13 +41,15 @@ const App = () => {
         <AppStack.Screen
           name="Home"
           component={HomePageNavigator}
-          options={{headerShown: false}}
+          options={{ headerShown: false }}
         />
       </AppStack.Navigator>
       {/* <View style={styles.appContainer}>
         <Text>App</Text>
       </View> */}
     </NavigationContainer>
+
+
   );
 };
 

POC_Documentation.md

@@ -8,4 +8,5 @@
 4. Setup the assets with fonts, svg and static images as per requirements
     <a>https://blog.logrocket.com/adding-custom-fonts-react-native/</a>
 5. Setup React-native-linear-gradient
-<a>https://blog.logrocket.com/complex-gradients-react-native-linear-gradient/</a>
+    <a>https://blog.logrocket.com/complex-gradients-react-native-linear-gradient/</a>
+6. Setup Experimental Android Animation on Project

assets/images/images.js

@@ -3,7 +3,8 @@ const images = {
     newscout_light: require("./newscout_logo_light.png"),
     imageCard: require("../images/hp_newscard.png"),
     horizontalCard: require("../images/pubg.png"),
-    verticalCard: require("../images/VertCard.png")
+    verticalCard: require("../images/VertCard.png"),
+    noBookmark: require("../images/no_bookmark.png")
 }
 
 export default images;

components/molecules/SearchTextInput.js

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { TextInput } from 'react-native-paper'
+import colors from '../../theme/colors'
+import fonts from '../../theme/fonts'
+
+const SearchTextInput = () => {
+  return (
+    <View style={styles.container}>
+      <TextInput
+        editable
+        mode='outlined'
+        placeholder='Which article you would like to see'
+        placeholderTextColor={colors.lightGray}
+        dense
+        style={{
+          fontFamily: fonts.type.medium,
+          fontSize: fonts.getSize(11),
+          paddingVertical: 2,
+          paddingHorizontal: 16,
+
+        }}
+        outlineStyle={{
+          borderRadius: 24
+
+        }}
+        contentStyle={{
+          fontFamily: fonts.type.regular,
+          fontSize: fonts.getSize(14),
+          color: colors.gray
+        }}
+        left={() => <IonIcon name='search-outline' size={24} color={colors.black} />}
+        right={() => <List.Icon icon={"search"} color={colors.black} />}
+
+        activeOutlineColor={colors.lightGray}
+        activeUnderlineColor={colors.lightGray}
+        outlineColor={colors.lightGray}
+        cursorColor={colors.gray}
+        onChangeText={(text) => {
+          if (text.length > 0) {
+            setSearching(true)
+          } else {
+            setSearching(false)
+          }
+        }}
+        onSubmitEditing={null}
+      // onChangeText={text => onChangeText(text)}
+      />
+    </View>
+
+  )
+}
+
+export default SearchTextInput
+
+const styles = StyleSheet.create({
+  container:{
+    paddingVertical: fonts.getSize(8)
+  }
+})

components/organisms/Cards/CategoryCard.js

@@ -0,0 +1,37 @@
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import colors from '../../../theme/colors'
+import fonts from '../../../theme/fonts'
+
+const CategoryCard = ({ onPress, title, textStyle, cardStyle }) => {
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={[cardStyle, styles.cardContainer]}>
+                <Text style={[textStyle, styles.cardText]}>{title}</Text>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default CategoryCard
+
+const styles = StyleSheet.create({
+    cardContainer: {
+        height: 164,
+        width: 164,
+        backgroundColor: colors.tertiaryColor,
+        borderRadius: fonts.getSize(8),
+        padding: fonts.getSize(11),
+        justifyContent:'flex-end',
+        
+    },
+    cardText: {
+        fontFamily: fonts.type.semibold,
+        alignSelf: 'flex-end',
+        color: colors.white,
+        fontSize: fonts.getSize(14),
+        maxWidth: "80%",
+        textAlign:'right'
+    }
+
+})

components/organisms/Cards/HorizontalNewsCardVariant.js

@@ -0,0 +1,119 @@
+import { StyleSheet, Text, View, TouchableWithoutFeedback, Image } from 'react-native'
+import React from 'react'
+import metrics from '../../../theme/metrics'
+import fonts from '../../../theme/fonts'
+import colors from '../../../theme/colors'
+import images from '../../../assets/images/images'
+import BookmarkButton from '../Buttons/BookmarkButton'
+import ShareButton from '../Buttons/ShareButton'
+
+
+const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress }) => {
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.topSection}>
+        <View style={styles.textContainer}>
+          <TouchableWithoutFeedback onPress={onPress}>
+            <Text style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
+          </TouchableWithoutFeedback>
+        </View>
+        <View style={styles.imageContainer}>
+          <View style={styles.imageSub}>
+            <Image source={image ?? images.horizontalCard} style={styles.image} />
+          </View>
+        </View>
+      </View>
+      <View style={styles.middleSection}>
+        <View style={styles.descriptors}>
+          <Text style={styles.timeDescriptor}>{timestamp ?? "27 mins ago"}</Text>
+        </View>
+        <View style={styles.utilButtons}>
+          <BookmarkButton size={20} onPress={true} />
+          <ShareButton size={20} onPress={true} />
+        </View>
+      </View>
+      <View style={styles.bottomSection}>
+      <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
+      </View>
+    </View>
+  )
+}
+
+export default HorizontalNewsCardVariant
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    width: 'auto',
+    maxWidth: metrics.screenWidth,
+    maxHeight: fonts.getSize(220),
+    backgroundColor: colors.white,
+    borderRadius: fonts.getSize(15),
+    padding: fonts.getSize(16)
+    // paddingBottom:fonts.getSize(24)
+  },
+  topSection: {
+
+    height: "55%",
+    flexDirection: 'row',
+    width: '100%',
+    maxWidth: '100%',
+    justifyContent: 'space-between'
+
+  },
+  middleSection:{
+    flexDirection:'row',
+   
+    justifyContent:'space-between'
+  },
+  bottomSection: {
+    
+  },
+  imageContainer: {
+    width: "35%",
+
+  },
+  textContainer: {
+    width: "65%",
+    height: '100%',
+
+    justifyContent: 'center',
+    gap: fonts.getSize(12),
+
+  },
+  headline: {
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(18),
+    color: colors.black,
+
+  },
+  tagline: {
+    fontSize: fonts.getSize(12),
+    fontFamily: fonts.type.regular,
+    overflow:'hidden'
+  },
+  descriptors: {
+    justifyContent:'center'
+  },
+  categoryDescriptor: {
+    fontFamily: fonts.type.light
+  },
+  timeDescriptor: {
+    fontFamily: fonts.type.light
+  },
+  imageSub: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: fonts.getSize(8)
+  },
+  utilButtons: {
+    flexDirection: 'row',
+    //  padding:0
+    // alignItems: 'flex-start',
+    // justifyContent: 'flex-end',
+    // backgroundColor: colors.black
+  }
+})

components/organisms/Headers/NewscoutHomeHeader.js

@@ -2,17 +2,14 @@ import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
 import NewscoutLogo from '../../molecules/NewscoutLogo'
 import fonts from '../../../theme/fonts'
-import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons"
-import colors from '../../../theme/colors'
 import Header from '../../atoms/Header'
 
-const NewscoutHomeHeader = ({onPress}) => {
+const NewscoutHomeHeader = ({ children }) => {
   return (
     <Header >
-      <NewscoutLogo style={styles.headerLogo}/>
-      <TouchableWithoutFeedback onPress={onPress}>
-        <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30}/>
-      </TouchableWithoutFeedback>
+      <NewscoutLogo style={styles.headerLogo} />
+
+      {children}
     </Header>
   )
 }
@@ -20,8 +17,8 @@ const NewscoutHomeHeader = ({onPress}) => {
 export default NewscoutHomeHeader
 
 const styles = StyleSheet.create({
-    headerLogo:{
-        height: fonts.getSize(64),
-        width: fonts.getSize(64)
-    },
+  headerLogo: {
+    height: fonts.getSize(64),
+    width: fonts.getSize(64)
+  },
 })

components/organisms/Headers/NewscoutTitleHeader.js

@@ -24,7 +24,7 @@ export default NewscoutTitleHeader
 
 const styles = StyleSheet.create({
     title: {
-        fontFamily: fonts.type.regular,
+        fontFamily: fonts.type.semibold,
         fontSize: fonts.getSize(16),
         color: colors.black,
     },

components/organisms/Sections/NoBookmarkSection.js

@@ -0,0 +1,60 @@
+import { Image,ImageBackground, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import colors from '../../../theme/colors'
+import images from '../../../assets/images/images'
+import fonts from '../../../theme/fonts'
+
+const NoBookmarkSection = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}><Image source={images.noBookmark} style={[styles.image]}/></View>
+      <Text style={styles.headline}>You have no bookmarked news</Text>
+        <TouchableWithoutFeedback  onPress={null}>
+            <View style={styles.button}><Text style={styles.buttonText}>Explore News</Text></View>
+        </TouchableWithoutFeedback>
+    </View>
+  )
+}
+
+export default NoBookmarkSection
+
+const styles = StyleSheet.create({
+    container:{
+        backgroundColor:colors.white,
+        height:'100%',
+        alignItems:'center',
+        justifyContent:'center',
+        paddingHorizontal: fonts.getSize(16)
+    },
+    imageContainer:{
+        
+    },
+    image:{
+      height:300,
+      width: 300,
+      maxHeight: '80%',
+      maxWidth: '80%'
+    },
+    headline:{
+        color: colors.topColor,
+        fontFamily: fonts.type.semibold,
+        fontSize: fonts.getSize(16),
+        paddingBottom: fonts.getSize(32)
+    },
+    button:{
+        backgroundColor: colors.tertiaryColor,
+        marginHorizontal: fonts.getSize(24),
+        maxWidth: '100%',
+        width:'100%',
+        flexDirection: 'row',
+        alignItems:'center',
+        justifyContent:'center',
+        borderRadius: fonts.getSize(4)
+    },
+    buttonText:{
+       
+       paddingVertical: fonts.getSize(12),
+       color:colors.white,
+       fontFamily:fonts.type.regular
+    }
+})

navigation/BookmarkNavigator.js

@@ -19,13 +19,13 @@ const BookmarkNavigator = ({ route, navigation }) => {
                 name="BookmarkLanding"
                 options={(navigation) => ({
                     header: () => <NewscoutTitleHeader title={"My Bookmarks"}>
-                        <TouchableWithoutFeedback onPress={() => {}}>
+                        <TouchableWithoutFeedback onPress={() => {navigation.navigate('Details')}}>
                             <OctiIcon name='three-bars' size={24} color={colors.topColor} />
                         </TouchableWithoutFeedback>
                     </NewscoutTitleHeader>
                 })}
                 component={BookmarkPage} />
-            <Stack.Screen name="Sidebar" component={SidebarPage} />
+            
             {/* <Stack.Screen name="Notifications" component={Notifications} />
         <Stack.Screen name="Profile" component={Profile} />
         <Stack.Screen name="Settings" component={Settings} /> */}

navigation/LandingPageNavigator.js

@@ -1,42 +1,55 @@
-import {View, Text, UIManager, Platform} from 'react-native';
+import { View, Text, UIManager, Platform } from 'react-native';
 import React from 'react';
-import {createDrawerNavigator} from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 import LandingPage from '../screens/LandingPage';
 import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader';
 import metrics from '../theme/metrics';
 import SidebarPage from '../screens/SidebarPage';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons";
+import colors from '../theme/colors';
+
 
 const Drawer = createDrawerNavigator();
 
 const LandingPageNavigator = () => {
-  const isLargeScreen = metrics.screenWidth >= 768;
+    const isLargeScreen = metrics.screenWidth >= 768;
 
-  if (
-    Platform.OS === 'android' &&
-    UIManager.setLayoutAnimationEnabledExperimental
-  ) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-  return (
-    <Drawer.Navigator
-      initialRouteName="LandingPage"
-      screenOptions={{
-        drawerType: 'front',
-        drawerStyle: isLargeScreen ? null : {width: '100%'},
-      }}
-      drawerContent={({navigation}) => <SidebarPage navigation={navigation} />}>
-      <Drawer.Screen
-        name="LandingPage"
-        component={LandingPage}
-        options={({navigation}) => ({
-          headerShown: true,
-          header: () => (
-            <NewscoutHomeHeader onPress={() => navigation.toggleDrawer()} />
-          ),
-        })}
-      />
-    </Drawer.Navigator>
-  );
+    if (
+        Platform.OS === 'android' &&
+        UIManager.setLayoutAnimationEnabledExperimental
+    ) {
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+    return (
+        <Drawer.Navigator
+            initialRouteName="LandingPage"
+            screenOptions={{
+                drawerType: 'front',
+                drawerStyle: isLargeScreen ? null : { width: '100%' },
+            }}
+            drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
+            <Drawer.Screen
+                name="LandingPage"
+                component={LandingPage}
+                options={({ navigation }) => ({
+                    headerShown: true,
+                    header: () => (
+                        <NewscoutHomeHeader>
+                            <View style={{alignItems:'center',flexDirection: 'row',gap: 16}}>
+                                <TouchableWithoutFeedback onPress={null}>
+                                    <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30} />
+                                </TouchableWithoutFeedback>
+                                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                                    <MaterialIcon name='list' color={colors.topColor} size={30} />
+                                </TouchableWithoutFeedback>
+                            </View>
+                        </NewscoutHomeHeader>
+                    ),
+                })}
+            />
+        </Drawer.Navigator>
+    );
 };
 
 export default LandingPageNavigator;

navigation/SearchPageNavigator.js

@@ -1,11 +1,21 @@
 import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import SearchPage from '../screens/SearchPage';
+
+const Stack = createNativeStackNavigator();
 
 const SearchPageNavigator = () => {
   return (
-    <View>
-      <Text>SearchPageNavigator</Text>
-    </View>
+   <Stack.Navigator
+    initialRouteName=''
+   >
+    <Stack.Screen
+      name="SearchPage"
+      component={SearchPage}
+      options={({navigation}) => ({headerShown: false})}
+    />
+   </Stack.Navigator>
   )
 }
 

screens/BookmarkPage.js

@@ -1,14 +1,44 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { FlatList, StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import NoBookmarkSection from '../components/organisms/Sections/NoBookmarkSection'
+import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant';
+import fonts from '../theme/fonts';
+import SearchTextInput from '../components/molecules/SearchTextInput';
 
 const BookmarkPage = () => {
+  const data = ["1", "2", "3", "4", "5"];
+  //const data = []
   return (
     <View>
-      <Text>BookmarkPage</Text>
+      {data.length <= 0 ? <NoBookmarkSection /> :
+
+        <View style={styles.container}>
+          <View >
+            <SearchTextInput/>
+            <FlatList
+            showsVerticalScrollIndicator={false}
+              ItemSeparatorComponent={() => <View style={{height: fonts.getSize(8)}}></View>}
+              // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+              ListHeaderComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+              data={data}
+              renderItem={(item) => <HorizontalNewsCardVariant onPress={true}/>}
+              keyExtractor={item => data.indexOf(item)}
+
+            />
+          </View>
+
+        </View>
+      }
+
     </View>
   )
 }
 
 export default BookmarkPage
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: fonts.getSize(16),
+    
+  }
+})

screens/RecentPosts.js

@@ -1,14 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-
-const RecentPosts = () => {
-  return (
-    <View>
-      <Text>RecentPosts</Text>
-    </View>
-  )
-}
-
-export default RecentPosts
-
-const styles = StyleSheet.create({})

screens/SearchPage.js

@@ -1,14 +1,93 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
+import { StyleSheet, Text, TouchableWithoutFeedback, View, ScrollView} from 'react-native'
+import React, { useState } from 'react'
+import fonts from '../theme/fonts'
+import colors from '../theme/colors'
+import { List, TextInput } from 'react-native-paper'
+import IonIcon from 'react-native-vector-icons/Ionicons'
+import CategoryCard from '../components/organisms/Cards/CategoryCard'
+import SearchTextInput from '../components/molecules/SearchTextInput'
+
+
+
+const recentSearches = [
+  "Battlegrounds Mobile India iOS release date",
+  "Battlegrounds Mobile India iOS release date",
+  "Battlegrounds Mobile India iOS release date",
+  "Battlegrounds Mobile India iOS release date",
+  "Battlegrounds Mobile India iOS release date",
+  "Battlegrounds Mobile India iOS release date"
+]
+
+const categories = ["Sector Update", "Regional Update", "Politics", "Finance", "Sports", "Regional Update", "Entertainment",'Sexual Wellness']
 
 const SearchPage = () => {
+
+  const [isSearching, setSearching] = useState(false)
+
   return (
-    <View>
-      <Text>SearchPage</Text>
+    <View style={styles.searchPageContainer}>
+      <View style={styles.searchContainer}>
+        <SearchTextInput/>
+
+      </View>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.recentContainer}>
+          <Text style={styles.sectionTitle}>
+            Recent Searches
+          </Text>
+          <View style={{ gap: 8, paddingVertical: fonts.getSize(8) }}>
+            {recentSearches.map((item) =>
+              <TouchableWithoutFeedback onPress={null}>
+                <View style={{ flexDirection: 'row' }}>
+                  <Text style={{ paddingRight: fonts.getSize(8) }}>#</Text>
+                  <Text style={{ fontFamily: fonts.type.regular, textDecorationLine: 'underline' }}>{item}</Text>
+                </View>
+
+              </TouchableWithoutFeedback>
+            )}
+          </View>
+          <View style={styles.categoriesContainer}>
+            <Text style={[{}, styles.sectionTitle]}>Browse by Category</Text>
+            <View style={styles.categoryCardContainer}>
+              {categories.map((item) => <CategoryCard id={`${item}`} title={item} />)}
+
+            </View>
+          </View>
+        </View>
+      </ScrollView>
     </View>
   )
 }
 
 export default SearchPage
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  searchPageContainer: {
+    paddingHorizontal: fonts.getSize(16)
+  },
+  searchContainer: {
+    paddingVertical: fonts.getSize(8)
+  },
+  searchText: {
+
+  },
+  recentContainer: {
+    paddingHorizontal: fonts.getSize(8),
+    paddingVertical: fonts.getSize(8)
+  },
+  sectionTitle: {
+    fontFamily: fonts.type.medium,
+    color: colors.black,
+    fontSize: fonts.getSize(15)
+  },
+  categoriesContainer: {
+    paddingVertical: fonts.getSize(8),
+    paddingBottom: fonts.getSize(92)
+  },
+  categoryCardContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+    paddingVertical: fonts.getSize(12)
+  }
+})

screens/SidebarPage.js

@@ -6,13 +6,14 @@ import {
   UIManager,
   View,
 } from 'react-native';
-import React from 'react';
+import React, { useState } from 'react';
 import NewscoutLogo from '../components/molecules/NewscoutLogo';
 import fonts from '../theme/fonts';
 import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularPrimaryBackButton';
-import {List} from 'react-native-paper';
+import { List } from 'react-native-paper';
 import colors from '../theme/colors';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { ScrollView } from 'react-native-gesture-handler';
 
 const data = [
   {
@@ -37,13 +38,28 @@ const data = [
   },
 ];
 
-const SidebarPage = ({navigation}) => {
+const SidebarPage = ({ navigation }) => {
   if (
     Platform.OS === 'android' &&
     UIManager.setLayoutAnimationEnabledExperimental
   ) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
+
+
+
+  const [isExpanded, setExpanded] = useState(
+    data.map((item) => {
+      return {
+        key: item.title,
+        value: false
+      };
+    }).reduce((result, item) => {
+      result[item.key] = item.value;
+      return result;
+    }, {})
+  )
+
   return (
     <View style={styles.sideBarContainer}>
       <View style={styles.logoContainer}>
@@ -52,31 +68,43 @@ const SidebarPage = ({navigation}) => {
       <View style={styles.buttonContainer}>
         <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
       </View>
-      <View style={styles.accordionContainer}>
-        <List.AccordionGroup>
-          {data.map(item => (
-            <List.Accordion
-              style={styles.accordionStyle}
-              titleStyle={styles.accordionTextStyle}
-              onPress={() =>
-                LayoutAnimation.configureNext(
-                  LayoutAnimation.Presets.easeInEaseOut,
-                )
-              }
-              right={() => <EntypoIcon name="chevron-down" size={12}/>}
-              id={data.indexOf(item)}
-              title={item.title}>
-              {item.subTitles.map(subTitle => (
-                <List.Item
-                  style={styles.accordionItemStyle}
-                  titleStyle={styles.accordionItemTextStyle}
-                  title={subTitle}
-                />
-              ))}
-            </List.Accordion>
-          ))}
-        </List.AccordionGroup>
-      </View>
+      <ScrollView>
+        <View style={styles.accordionContainer}>
+          <List.AccordionGroup>
+            {data.map(item => (
+              <List.Accordion
+                key={data.indexOf(item)}
+                id={`${data.indexOf(item)}`}
+                style={[styles.accordionStyle]}
+                titleStyle={[styles.accordionTextStyle, {}]}
+                onPress={() => {
+                  // setExpandedsetIsShowingText(!isShowingText);
+                  // LayoutAnimation.configureNext(
+                  //   LayoutAnimation.Presets.easeInEaseOut,
+                  // )
+                  // const nextState = { ...isExpanded };
+                  // nextState[item.title] = !nextState[item.title];
+                  //console.log("set state changes");
+                  // setExpanded(nextState);
+                }}
+                expanded={isExpanded[item.title]}
+                left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name="box" size={24} /></View>}
+                right={() => <EntypoIcon name="chevron-down" size={12} />}
+                title={item.title}>
+                {item.subTitles.map(subTitle => (
+                  <List.Item
+                    key={item.subTitles.indexOf(subTitle)}
+                    style={styles.accordionItemStyle}
+                    titleStyle={styles.accordionItemTextStyle}
+                    title={subTitle}
+                  />
+                ))}
+              </List.Accordion>
+            ))}
+          </List.AccordionGroup>
+        </View>
+      </ScrollView>
+
     </View>
   );
 };
@@ -107,7 +135,7 @@ const styles = StyleSheet.create({
     borderRadius: fonts.getSize(8),
     borderWidth: fonts.getSize(3),
     borderColor: colors.lightGray,
-    maxHeight: fonts.getSize(52)
+    maxHeight: fonts.getSize(52),
   },
-  accordionTextStyle: {fontFamily: fonts.type.medium},
+  accordionTextStyle: { fontFamily: fonts.type.medium },
 });

theme/colors.js

@@ -11,7 +11,8 @@ const colors = {
     baseColor: "#03053D",
     tertiaryColor: "#1E656D",
     quaternaryColor: "#2E0505",
-    lightGray: "#E3E3E3"
+    lightGray: "#E3E3E3",
+    gray: "#575757"
 }
 
 export default colors;