Club page fit design team format+style

This commit is contained in:
Emily Liu 2020-10-20 23:12:33 -04:00
parent 5f18866ae3
commit 6f75ac5260
6 changed files with 68 additions and 16 deletions

View File

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

View File

@ -8,7 +8,8 @@ import {
StatusBar, StatusBar,
ActivityIndicator, ActivityIndicator,
FlatList, FlatList,
TouchableOpacity TouchableOpacity,
Image
} from 'react-native'; } from 'react-native';
import { import {
@ -24,11 +25,14 @@ import { url } from './resources/fetchInfo.json'
const StaffElement = ({item}) => { const StaffElement = ({item}) => {
const [visible, setVisible] = useState(0) 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( return(
<View> <View>
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<Text style={styles.title}>{item.item.name}</Text> <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:<></>} {visible?extra:<></>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>

BIN
app/assets/clubs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
app/assets/staff.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

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

View File

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