Added gradient headers

This commit is contained in:
M10T 2020-11-07 08:55:23 -05:00
parent 36a64a25b5
commit a4770d9fa0
5 changed files with 31 additions and 17 deletions

View File

@ -69,8 +69,7 @@ class Announcements extends React.Component {
this.state = {
data: [],
teacherNames: [],
favoriteNames: [],
isLoading:true
favoriteNames: []
}
}
@ -117,7 +116,6 @@ class Announcements extends React.Component {
}
render() {
if (this.state.isLoading) return <></>
return (
<View style={[styles.container]}>
<TeacherButton data={this.state.data.filter(x=>x.teacher==null||x.teacher.trim()==='')} name="No Teacher" navigation={this.props.navigation} />

View File

@ -76,7 +76,7 @@ class Calendar extends React.Component {
render() {
return (
<View>
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={item=><Event item={item}/>}

View File

@ -28,7 +28,7 @@ import StudentWeek from './StudentWeek'
import SSLOps, {SSLInfo} from './SSLOps'
import LunchEvents, {LunchInfo} from './LunchEvents'
import ChallengeWeek from './ChallengeWeek'
import { LinearGradient } from 'react-native-linear-gradient'
import LinearGradient from 'react-native-linear-gradient'
const Stack = createStackNavigator()
@ -61,6 +61,11 @@ class MoreSwitch extends React.Component {
}
}
const background = (<LinearGradient
colors={['#f99', 'white']}
style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
/>)
class More extends React.Component {
render() {
return (
@ -72,7 +77,7 @@ class More extends React.Component {
options={{
title:'More',
headerTitleStyle:styles.headerTitle,
headerStyle:{borderBottomWidth:0.5,borderBottomColor:'black'},
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -82,6 +87,7 @@ class More extends React.Component {
title:'Announcements',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -90,7 +96,8 @@ class More extends React.Component {
options={{
title:'Resources',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -99,7 +106,8 @@ class More extends React.Component {
options={{
title:'Student of the Week',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -108,7 +116,8 @@ class More extends React.Component {
options={{
title:'Lunch Events',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -117,7 +126,8 @@ class More extends React.Component {
options={{
title:'SSL Opportunities',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
@ -126,33 +136,37 @@ class More extends React.Component {
options={{
title:'Challenge of the Week',
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerLeft:null
headerLeft:null,
headerBackground: ()=>background
}}
/>
<Stack.Screen
name="TeacherList"
component={TeacherList}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
title:route.params.name,
headerRight:()=>(<></>)
headerRight:()=>(<></>),
headerBackground: ()=>background
})}
/>
<Stack.Screen
name="LunchInfo"
component={LunchInfo}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
title:route.params.name,
headerRight:()=>(<></>)
headerRight:()=>(<></>),
headerBackground: ()=>background
})}
/>
<Stack.Screen
name="SSLInfo"
component={SSLInfo}
options={({route})=>({
headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
title:route.params.name,
headerBackground: ()=>background,
headerRight:()=>(<></>)
})}
/>

View File

@ -3,7 +3,7 @@ import {StyleSheet, StatusBar} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
marginTop: StatusBar.currentHeight || 0
},
item: {
backgroundColor: 'white',

View File

@ -1,6 +1,8 @@
import {StyleSheet, Dimensions} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
console.log(Dimensions.get('window'))
const styles=StyleSheet.create({
moreitem: {
backgroundColor:'red',