deeplinks for profiles and posts
This commit is contained in:
Adolfo Reyna
361
App.js
361
App.js
@@ -26,27 +26,6 @@ import MediaView from './components/MediaView.js';
|
||||
import { useSnapshot } from 'valtio';
|
||||
import GlobalState from './contexts/GlobalState.js';
|
||||
import NewGroup from './Views/NewGroup.js';
|
||||
import * as Linking2 from 'expo-linking';
|
||||
|
||||
import { Linking } from 'expo';
|
||||
|
||||
const handleDeepLink = (url) => {
|
||||
// Handle the deep linking URL here
|
||||
alert('Deep link:', url);
|
||||
}
|
||||
|
||||
const checkDeepLinking = async () => {
|
||||
// Check if the app was opened by a deep linking URL
|
||||
const initialUrl = await Linking.getInitialURL();
|
||||
if (initialUrl) {
|
||||
handleDeepLink(initialUrl);
|
||||
}
|
||||
|
||||
// Add an event listener to handle deep linking URLs
|
||||
Linking.addEventListener('url', (event) => {
|
||||
handleDeepLink(event.url);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
@@ -104,20 +83,13 @@ async function registerForPushNotificationsAsync() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
const MainNavigation = ({route}) => {
|
||||
const MainNavigation = ({ route }) => {
|
||||
const gState = useSnapshot(GlobalState);
|
||||
const viewer = gState.me;
|
||||
const [expoPushToken, setExpoPushToken] = useState('');
|
||||
const [notification, setNotification] = useState(false);
|
||||
const notificationListener = useRef();
|
||||
const responseListener = useRef();
|
||||
const url = Linking2.useURL();
|
||||
useEffect(() => {
|
||||
// Do something with url
|
||||
alert(url);
|
||||
}, [url]);
|
||||
|
||||
useEffect(() => {
|
||||
registerForPushNotificationsAsync().then(async (token) => {
|
||||
let isLoggedIn = await API.isLoggedIn();
|
||||
@@ -125,7 +97,6 @@ const MainNavigation = ({route}) => {
|
||||
API.registerToken(token);
|
||||
return setExpoPushToken(token);
|
||||
});
|
||||
checkDeepLinking();
|
||||
|
||||
// This listener is fired whenever a notification is received while the app is foregrounded
|
||||
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
|
||||
@@ -140,10 +111,10 @@ const MainNavigation = ({route}) => {
|
||||
});
|
||||
|
||||
const interval = setInterval(async () => {
|
||||
if(await API.isLoggedIn()){
|
||||
if (await API.isLoggedIn()) {
|
||||
let me = await API.getMe();
|
||||
//console.log(JSON.stringify(viewer), JSON.stringify(me))
|
||||
if(JSON.stringify(viewer) !== JSON.stringify(me)){
|
||||
if (JSON.stringify(viewer) !== JSON.stringify(me)) {
|
||||
console.log("Updating me")
|
||||
GlobalState.me = me;
|
||||
}
|
||||
@@ -160,108 +131,108 @@ const MainNavigation = ({route}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tab.Navigator initialRouteName="Home"
|
||||
activeColor="#0d6efd"
|
||||
inactiveColor="#FFFFFF"
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Feed"
|
||||
component={Feed}
|
||||
options={{
|
||||
tabBarLabel: i18n.t("message.feed"),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="home" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
navigation.navigate('Feed', {reRender: Math.random()});
|
||||
},
|
||||
})}
|
||||
<Tab.Navigator initialRouteName="Home"
|
||||
activeColor="#0d6efd"
|
||||
inactiveColor="#FFFFFF"
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Feed"
|
||||
component={Feed}
|
||||
options={{
|
||||
tabBarLabel: i18n.t("message.feed"),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="home" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
navigation.navigate('Feed', { reRender: Math.random() });
|
||||
},
|
||||
})}
|
||||
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Groups"
|
||||
component={Groups}
|
||||
options={{
|
||||
tabBarLabel: i18n.t('message.groups'),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="groups" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="NewPost"
|
||||
component={NewPostView}
|
||||
options={{
|
||||
tabBarLabel: '',//i18n.t('message.statusUpdate'),
|
||||
tabBarIcon: ({ color, route }) => (
|
||||
<MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
|
||||
),
|
||||
tabBarButton: (props) => (
|
||||
<TouchableOpacity
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
top: -17,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
||||
}}
|
||||
>
|
||||
<View style={{
|
||||
height: 56,
|
||||
width: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: "#c44d56",
|
||||
paddingTop: 13
|
||||
}}>{props.children}</View>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
//console.log("listener", route)
|
||||
if(route.name !== "NewPost"){
|
||||
// Target current profile if one in route
|
||||
navigation.navigate('NewPost', {toProfile: route.params?.profileid});
|
||||
} else {
|
||||
//Send function on child
|
||||
navigation.navigate('NewPost', {toProfile: route.params?.profileid, sendNow: true});
|
||||
}
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Courses"
|
||||
component={Courses}
|
||||
options={{
|
||||
tabBarLabel: i18n.t('message.courses'),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="subscriptions" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="MyProfile"
|
||||
component={Profile}
|
||||
options={{
|
||||
tabBarLabel: viewer.profile?.firstName,
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="person" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
navigation.navigate('MyProfile', {profileid: viewer._id});
|
||||
},
|
||||
})}
|
||||
/>
|
||||
{/*
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Groups"
|
||||
component={Groups}
|
||||
options={{
|
||||
tabBarLabel: i18n.t('message.groups'),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="groups" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="NewPost"
|
||||
component={NewPostView}
|
||||
options={{
|
||||
tabBarLabel: '',//i18n.t('message.statusUpdate'),
|
||||
tabBarIcon: ({ color, route }) => (
|
||||
<MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
|
||||
),
|
||||
tabBarButton: (props) => (
|
||||
<TouchableOpacity
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
top: -17,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
||||
}}
|
||||
>
|
||||
<View style={{
|
||||
height: 56,
|
||||
width: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: "#c44d56",
|
||||
paddingTop: 13
|
||||
}}>{props.children}</View>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
//console.log("listener", route)
|
||||
if (route.name !== "NewPost") {
|
||||
// Target current profile if one in route
|
||||
navigation.navigate('NewPost', { toProfile: route.params?.profileid });
|
||||
} else {
|
||||
//Send function on child
|
||||
navigation.navigate('NewPost', { toProfile: route.params?.profileid, sendNow: true });
|
||||
}
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Courses"
|
||||
component={Courses}
|
||||
options={{
|
||||
tabBarLabel: i18n.t('message.courses'),
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="subscriptions" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="MyProfile"
|
||||
component={Profile}
|
||||
options={{
|
||||
tabBarLabel: viewer.profile?.firstName,
|
||||
tabBarIcon: ({ color }) => (
|
||||
<MaterialIcons name="person" color={color} size={26} />
|
||||
),
|
||||
header: () => { <></> },
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: e => {
|
||||
navigation.navigate('MyProfile', { profileid: viewer._id });
|
||||
},
|
||||
})}
|
||||
/>
|
||||
{/*
|
||||
<Tab.Screen
|
||||
name="Logout"
|
||||
component={Login}
|
||||
@@ -273,8 +244,8 @@ const MainNavigation = ({route}) => {
|
||||
header: () => { <></> },
|
||||
}}
|
||||
/>*/}
|
||||
|
||||
</Tab.Navigator>
|
||||
|
||||
</Tab.Navigator>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -284,66 +255,66 @@ export default function App() {
|
||||
<PaperProvider settings={{
|
||||
icon: props => <MaterialIcons {...props} />,
|
||||
}} theme={theme}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}>
|
||||
<NavigationContainer>
|
||||
<StatusBar style="dark" />
|
||||
<Stack.Navigator screenOptions={{
|
||||
header: (props) => {
|
||||
return (
|
||||
<Appbar.Header style={{backgroundColor: '#fff'}}>
|
||||
{props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{
|
||||
props.navigation.goBack();
|
||||
}} /> : <Appbar.Action icon="menu" style={{padding:0, margin:0}} onPress={()=>{props.navigation.navigate('Menu');}} />}
|
||||
<Appbar.Content title="EMI Fellowship" titleStyle={{}}/>
|
||||
<Appbar.Action icon="chat" onPress={()=>{alert("Chats are comming soon.")}} />
|
||||
<Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
|
||||
<Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />
|
||||
</Appbar.Header>
|
||||
)
|
||||
},
|
||||
}}>
|
||||
<Stack.Screen
|
||||
name="MainNavigation"
|
||||
component={MainNavigation}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Profile"
|
||||
component={Profile}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="NewPost"
|
||||
component={NewPostView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="NewGroup"
|
||||
component={NewGroup}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Search"
|
||||
component={Search}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="ProfileSettings"
|
||||
component={ProfileSettings}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Invite"
|
||||
component={InviteView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Menu"
|
||||
component={MenuView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Notifications"
|
||||
component={NotificationsView}
|
||||
/>
|
||||
<Stack.Screen name="SinglePost" component={SinglePost} />
|
||||
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
|
||||
<Tab.Screen name="Logout" component={Login} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
<MediaView></MediaView>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
|
||||
<NavigationContainer>
|
||||
<StatusBar style="dark" />
|
||||
<Stack.Navigator screenOptions={{
|
||||
header: (props) => {
|
||||
return (
|
||||
<Appbar.Header style={{ backgroundColor: '#fff' }}>
|
||||
{props.navigation.canGoBack() ? <Appbar.BackAction onPress={() => {
|
||||
props.navigation.goBack();
|
||||
}} /> : <Appbar.Action icon="menu" style={{ padding: 0, margin: 0 }} onPress={() => { props.navigation.navigate('Menu'); }} />}
|
||||
<Appbar.Content title="EMI Fellowship" titleStyle={{}} />
|
||||
<Appbar.Action icon="chat" onPress={() => { alert("Chats are comming soon.") }} />
|
||||
<Appbar.Action icon="search" onPress={() => { props.navigation.navigate("Search") }} />
|
||||
<Appbar.Action icon="notifications" onPress={() => { props.navigation.navigate("Notifications") }} />
|
||||
</Appbar.Header>
|
||||
)
|
||||
},
|
||||
}}>
|
||||
<Stack.Screen
|
||||
name="MainNavigation"
|
||||
component={MainNavigation}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Profile"
|
||||
component={Profile}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="NewPost"
|
||||
component={NewPostView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="NewGroup"
|
||||
component={NewGroup}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Search"
|
||||
component={Search}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="ProfileSettings"
|
||||
component={ProfileSettings}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Invite"
|
||||
component={InviteView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Menu"
|
||||
component={MenuView}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Notifications"
|
||||
component={NotificationsView}
|
||||
/>
|
||||
<Stack.Screen name="SinglePost" component={SinglePost} />
|
||||
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
|
||||
<Tab.Screen name="Logout" component={Login} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
<MediaView></MediaView>
|
||||
</KeyboardAvoidingView>
|
||||
</PaperProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user