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

110
App.js
View File

@@ -1,73 +1,77 @@
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react'; import React 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 { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; 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 Login from "./Views/Login.js"
import Feed from "./Views/Feed.js" import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js" import Profile from "./Views/Profile.js"
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator(); const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#000000',
accent: '#0d6efd',
background: "#edf2f7",
},
};
const MainNavigation = () => { const MainNavigation = () => {
return ( return (
<Tab.Navigator initialRouteName="Home" <Tab.Navigator initialRouteName="Home"
activeColor="#0d6efd" activeColor="#0d6efd"
inactiveColor="#FFFFFF" inactiveColor="#FFFFFF"
barStyle={{ backgroundColor: '#000000' }}> barStyle={{ backgroundColor: '#000000' }}>
<Tab.Screen <Tab.Screen
name="Feed" name="Feed"
component={Feed} component={Feed}
options={{ options={{
tabBarLabel: 'Home', tabBarLabel: 'Home',
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<MaterialIcons name="home" color={color} size={26} /> <MaterialIcons name="home" color={color} size={26} />
), ),
tabBarBadge: false tabBarBadge: false
}} }}
listeners={({ navigation, route }) => ({ listeners={({ navigation, route }) => ({
tabPress: e => { tabPress: e => {
navigation.navigate('Feed') navigation.navigate('Feed')
}, },
})} })}
/> />
<Tab.Screen name="Logout" component={Login} /> <Tab.Screen name="Logout" component={Login} />
</Tab.Navigator> </Tab.Navigator>
) )
} }
export default function App() { export default function App() {
return ( return (
<NavigationContainer> <PaperProvider settings={{
<Stack.Navigator> icon: props => <MaterialIcons {...props} />,
<Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} /> }} theme={theme}>
<Stack.Screen <NavigationContainer>
name="Profile" <Stack.Navigator>
component={Profile} <Stack.Screen
options={{ name="Home"
tabBarLabel: 'Profile' component={MainNavigation}
}} options={{ headerShown: false }}
/> />
</Stack.Navigator> <Stack.Screen
</NavigationContainer> 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 { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js'; import API from './../API.js';
import Post from './../components/Post.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"; import NewPost from "./../components/NewPost.js";
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#000000',
accent: '#0d6efd',
background: "#edf2f7",
},
};
let Feed = ({ navigation, route }) => { let Feed = ({ navigation, route }) => {
@@ -27,7 +15,7 @@ let Feed = ({ navigation, route }) => {
let r = await API.getMe(); let r = await API.getMe();
setMeProfile(r); setMeProfile(r);
if (route.params && route.params.profileid) { if (route.params && route.params.profileid) {
navigation.navigate('Profile', {profileid: route.params.profileid}) navigation.navigate('Profile', { profileid: route.params.profileid })
} else { } else {
let posts = await API.getPosts(); let posts = await API.getPosts();
setPosts(posts); setPosts(posts);
@@ -36,32 +24,29 @@ let Feed = ({ navigation, route }) => {
//console.log(posts) //console.log(posts)
}, [route.params]); }, [route.params]);
const renderPost = (({ item }) => { const renderPost = (({ item }) => {
if(item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups') if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
return (<></>); return (<></>);
return (<Post post={item} viewer={Me} />); return (<Post post={item} viewer={Me} />);
}); });
return ( return (
<PaperProvider settings={{
icon: props => <MaterialIcons {...props} />, <SafeAreaView style={styles.container}>
}} theme={theme}> <View>
<SafeAreaView style={styles.container}> <FlatList
<View> data={Posts}
<FlatList renderItem={renderPost}
data={Posts} keyExtractor={item => item._id || item.createdAt}
renderItem={renderPost} ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
keyExtractor={item => item._id || item.createdAt} refreshing={Posts.length === 0}
ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />} onRefresh={() => {
refreshing={Posts.length === 0} API.getPosts().then(setPosts);
onRefresh={()=>{ }}
API.getPosts().then(setPosts); />
}} </View>
/> <StatusBar style="auto" />
</View> </SafeAreaView>
<StatusBar style="auto" />
</SafeAreaView>
</PaperProvider>
); );
} }