Club page fit design team format+style

app/Clubs.js

@@ -8,7 +8,9 @@ import {
   StatusBar,
   ActivityIndicator, 
   FlatList,
-  TouchableOpacity
+  TouchableOpacity,
+  Image,
+  TouchableHighlight
 } from 'react-native';
 
 import {
@@ -18,25 +20,61 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
 
-const ClubElement = ({item}) => {
-  const [visible, setVisible] = useState(0)
-  const extra = visible?(<Text>{'\n'}Location: {item.item.loc} {"\n\n"}Sponsor: {item.item.sponsor}</Text>):(<></>);
+const Stack = createStackNavigator();
+
+export const ClubInfo = ({route}) => {
+  const item = route.params;
+  return (
+    <View style = {{padding: 10}}>
+      <Text style = {{fontSize: 28}}>Meeting Time and Day: {'\n'}{item.meeting}{"\n\n"}Zoom Link: {'\n'}{item.link}{"\n\n"}Sponsor: {'\n'}{item.sponsor}</Text>
+    </View>
+  )
+}
+function ClubElement (props) {
+  const item = props.item;
   return(
 	<View>
-	  <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-		<Text style={styles.title}>{item.item.name}</Text>
-		{extra}
-	  </TouchableOpacity>
+      <TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('ClubInfo', {data:props.data,name:props.name,meeting:item.meeting,link:item.link,sponsor:item.sponsor})} activeOpacity={0.8}>
+        <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+          <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+          <Text style={styles.title}>{props.item.name}</Text>
+        </View>
+        
+      </TouchableOpacity>
 	</View>
   )
 }
+
+function Club () {
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen 
+          name = "Clubs"
+          component = {Clubs}
+          options={({
+            headerShown: false
+          })}
+        />
+        <Stack.Screen 
+          name = "ClubInfo"
+          component = {ClubInfo}
+          options={({route})=>({
+            title:route.params.name
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  ) 
+}
+
 class Clubs extends React.Component {
-
-  
 	constructor(props) {
     super(props);
 
@@ -91,12 +129,14 @@ class Clubs extends React.Component {
         value={this.state.search}/>
       <FlatList
         data={dataSearch}
-        renderItem={item => <ClubElement item={item}/>}
+        renderItem={({item}) => <ClubElement item={item} name={item.name} navigation={this.props.navigation}/>}
         keyExtractor={item => JSON.stringify(item)}
       />
+      
     </SafeAreaView>
+    
     );
   }
 }
 
-export default Clubs;
+export default Club;

app/Staff.js

@@ -8,7 +8,8 @@ import {
   StatusBar,
   ActivityIndicator, 
   FlatList,
-  TouchableOpacity
+  TouchableOpacity,
+  Image
 } from 'react-native';
 
 import {
@@ -24,11 +25,14 @@ import { url } from './resources/fetchInfo.json'
 
 const StaffElement = ({item}) => {
   const [visible, setVisible] = useState(0)
-  const extra = [...item.item.emails.map(email=>(<Text key={email}>Email: {email}</Text>))]
+  const extra = [...item.item.emails.map(email=>(<Text key={email}>{'\n'}Email: {email}</Text>))]
   return(
 	<View>
-	  <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-		<Text style={styles.title}>{item.item.name}</Text>
+	  <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
+    <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+      <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+      <Text style={styles.title}>{item.item.name}</Text>
+    </View>
 		{visible?extra:<></>}
 	  </TouchableOpacity>
 	</View>

app/styles/liststyles.js

@@ -13,6 +13,13 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     borderRadius: 12,
   },
+  item1: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 2,
+    borderColor: '#bababa',
+    width: '100%',
+  },
   title: {
     fontSize: 28,
   },

app/styles/morestyles.js

@@ -9,6 +9,7 @@ const styles=StyleSheet.create({
 		height: Dimensions.get('window').height*0.075,
 		justifyContent:'center',
 		paddingLeft: '3%',
+		fontSize: 32,
 	},
 	moretext: {
 		color:'#eee',