Skip to content

Instantly share code, notes, and snippets.

@joaquin-viera
Last active Oct 21, 2021
Embed
What would you like to do?
Global Feed - Mobile App
import React, {useEffect, useState} from 'react';
import {
SafeAreaView,
ActivityIndicator,
View,
Text,
StyleSheet,
} from 'react-native';
import {
StreamApp,
FlatFeed,
Activity,
StatusUpdateForm,
LikeButton,
UserBar,
} from 'react-native-activity-feed';
const App = () => {
// Hooks
const [userToken, setUserToken] = useState(null);
const [loading, setLoading] = useState(true);
// Function to call backend API endpoint to get user private token
const callApi = async () => {
const response = await fetch('http://localhost:3000');
const userResponse = await response.json();
return userResponse;
};
// When our application starts, we will call the API endpoint
useEffect(() => {
callApi().then(response => {
setUserToken(response.userToken);
setLoading(false);
});
}, []);
// GetStream API KEY and APP ID
const STREAM_API_KEY = 'qkswp9afyz49';
const STREAM_APP_ID = '1147074';
// Custom header for our Global feed posts
const renderHeader = props => {
const {activity} = props;
const {actor} = activity;
return (
<View style={{marginLeft: 10}}>
<UserBar username={actor.data.name || 'Unknown User'} avatar={actor.data.profileImage} />
</View>
);
};
// Each post/activity will contain the custom header and a like button
const renderActivity = props => {
return (
<Activity
Header={renderHeader(props)}
{...props}
Footer={<LikeButton {...props} />}
/>
);
};
// While our applications brings the secret user token, we will render a spinner
return loading ? (
<ActivityIndicator />
) : (
<SafeAreaView style={styles.container} forceInset={{top: 'always'}}>
<Text style={styles.title}>Global Feed</Text>
<StreamApp
apiKey={STREAM_API_KEY}
appId={STREAM_APP_ID}
token={userToken}
userId="tester">
<FlatFeed Activity={renderActivity} notify />
<StatusUpdateForm feedGroup={'timeline'} />
</StreamApp>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightblue',
height: '100%',
},
title: {
textAlign: 'center',
fontSize: 25,
fontWeight: '700',
},
});
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment