adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor native paper provider

Browse Source
This commit is contained in:
aeroreyna
2022-03-11 22:11:43 -08:00
parent 7245c448d4
commit dd3685b862
2 changed files with 76 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
App.js
View File

@@ -1,73 +1,77 @@
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
import API from './API.js';
import LoginForm from './components/Login.js';
import { Provider as PaperProvider } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator();
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#000000',
accent: '#0d6efd',
background: "#edf2f7",
},
};
const MainNavigation = () => {
return (
<Tab.Navigator initialRouteName="Home"
activeColor="#0d6efd"
inactiveColor="#FFFFFF"
barStyle={{ backgroundColor: '#000000' }}>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialIcons name="home" color={color} size={26} />
),
tabBarBadge: false
}}
listeners={({ navigation, route }) => ({
tabPress: e => {
navigation.navigate('Feed')
},
})}
/>
<Tab.Screen name="Logout" component={Login} />
</Tab.Navigator>
<Tab.Navigator initialRouteName="Home"
activeColor="#0d6efd"
inactiveColor="#FFFFFF"
barStyle={{ backgroundColor: '#000000' }}>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialIcons name="home" color={color} size={26} />
),
tabBarBadge: false
}}
listeners={({ navigation, route }) => ({
tabPress: e => {
navigation.navigate('Feed')
},
})}
/>
<Tab.Screen name="Logout" component={Login} />
</Tab.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} />
<Stack.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile'
}}
/>
</Stack.Navigator>
</NavigationContainer>
<PaperProvider settings={{
icon: props => <MaterialIcons {...props} />,
}} theme={theme}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={MainNavigation}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile'
}}
/>
</Stack.Navigator>
</NavigationContainer>
</PaperProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginTop: 25,
paddingTop: 10,
backgroundColor: "#edf2f7"
},
});

51
Views/Feed.js
View File

@@ -3,20 +3,8 @@ import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js';
import Post from './../components/Post.js';
import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import NewPost from "./../components/NewPost.js";
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#000000',
accent: '#0d6efd',
background: "#edf2f7",
},
};
let Feed = ({ navigation, route }) => {
@@ -27,7 +15,7 @@ let Feed = ({ navigation, route }) => {
let r = await API.getMe();
setMeProfile(r);
if (route.params && route.params.profileid) {
navigation.navigate('Profile', {profileid: route.params.profileid})
navigation.navigate('Profile', { profileid: route.params.profileid })
} else {
let posts = await API.getPosts();
setPosts(posts);
@@ -36,32 +24,29 @@ let Feed = ({ navigation, route }) => {
//console.log(posts)
}, [route.params]);
const renderPost = (({ item }) => {
if(item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
return (<></>);
return (<Post post={item} viewer={Me} />);
});
return (
<PaperProvider settings={{
icon: props => <MaterialIcons {...props} />,
}} theme={theme}>
<SafeAreaView style={styles.container}>
<View>
<FlatList
data={Posts}
renderItem={renderPost}
keyExtractor={item => item._id || item.createdAt}
ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
refreshing={Posts.length === 0}
onRefresh={()=>{
API.getPosts().then(setPosts);
}}
/>
</View>
<StatusBar style="auto" />
</SafeAreaView>
</PaperProvider>
<SafeAreaView style={styles.container}>
<View>
<FlatList
data={Posts}
renderItem={renderPost}
keyExtractor={item => item._id || item.createdAt}
ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
refreshing={Posts.length === 0}
onRefresh={() => {
API.getPosts().then(setPosts);
}}
/>
</View>
<StatusBar style="auto" />
</SafeAreaView>
);
}