Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sieuhuflit/instagram_feed
Instagram feed
https://github.com/sieuhuflit/instagram_feed
Last synced: 18 days ago
JSON representation
Instagram feed
- Host: GitHub
- URL: https://github.com/sieuhuflit/instagram_feed
- Owner: sieuhuflit
- Created: 2019-06-28T12:24:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T18:20:29.000Z (about 2 years ago)
- Last Synced: 2024-04-13T14:48:02.679Z (8 months ago)
- Language: JavaScript
- Size: 25.3 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Week 2 - **Instagram feed 🌄**
## Introduction 🌟
Let's build a news 📰 app 📱 using [React Native](https://facebook.github.io/react-native/) & [Expo](https://expo.io/). Our app will help users find information about current world 🌎 events. We'll do so by requesting data from a 3rd party API and then consuming this data in our application.
### What is the final result
### Features 🏆
- [ ] Create header with Instagram logo and `inbox` button
- [ ] Add post owner avatar image and name
- [ ] Create like button
- [ ] Create comment button
- [ ] Create share button
- [ ] Create likes count
- [ ] Alert when press on any button
### Learning Objectives ✍️📚📝 ️
1. Learn how to layout with Flexbox [Read](https://facebook.github.io/react-native/docs/flexbox)
### **Milestone 1 🛣🏃 Init project**
**A)** Use `expo init` to create your project. I'm calling mine `instagram-feed`.
### **Milestone 2 🛣🏃 Instagram header**
Add the Instagram header, try to figure out how to layout this
- Add the `Image` logo Instagram : [How to use Image](https://facebook.github.io/react-native/docs/image)
- With a lot of `resizeMode`, `resizeMode` is use to determines how to resize the image when the frame doesn't match the raw image dimensions. [ResizeMode](https://facebook.github.io/react-native/docs/image#resizemode)
```
```
- This layout just simple 1 row and 2 items in there. Try to use
```
```
- But you will see it a little bit to the left side. Try to add 1 more `Tricky empty view` to make it center
```
```
### **Milestone 3: 🌄 1 Post image**
Download some big wallpapers image and put in the `assets` folder.
| `assets` folder : Is the place you put all of images of application
Then try to display the simple image you just downloaded
```
```
### **Milestone 4 🌄 Multiple post image ?**
A/ Download multiple big wallpapers image and put in the `assets` folder.
Then create a fake array of feeds. With some data
- id : Unique feed id
- name : Name of of that post
- image : Link of image
- avatar : Avatar of poster
- likeCount : Number of likes of image
```
const feedData = [
{
id: 1,
name: 'CoderSchool',
image: require('./assets/1.jpeg'),
likeCount: 128,
avatar: require('./assets/avatar.jpeg')
},
{
id: 2,
name: 'Whoami',
image: require('./assets/2.jpeg'),
likeCount: 20,
avatar: require('./assets/avatar.jpeg')
},
{
id: 3,
name: 'Wellcome Home',
image: require('./assets/3.jpeg'),
likeCount: 520,
avatar: require('./assets/avatar.jpeg')
},
];
```
Try to loop through the array data using `map`
```
{feedData.map(feed => {
return (
...
)
}
```
B/ Add poster avatar and name. This time try to put the style in `StyleSheet.create` to make your code look clean
```
render() {
return (
{feed.name}
)
}
const styles = StyleSheet.create({
nameWrapper: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginVertical: 7,
marginHorizontal: 12
},
imageAvatar: {
width: 46,
height: 46,
borderRadius: 23
},
posterName: {
marginLeft: 12,
fontSize: 15,
fontWeight: '500'
}
})
```
### **Milestone 5 🛣🏃 Like, Comment, Share**
A/ Now we need to create 3 button Like, Comment, and Share button. Go find your needed icon at here : [Set Icon](https://expo.github.io/vector-icons/)
```
```
### **Milestone 6 🛣🏃PRESS IT**
Now we need to add `onPress` action to each icon . Example with the first one : Like.
Here is the documentation about Alert : [Alert](https://facebook.github.io/react-native/docs/alert)
```
alert("Liked")}
/>
```
Make sure you try this and the `alert` display.
Try to try it yourself with something like prompt `yes`, `no` actions
[Alert](https://facebook.github.io/react-native/docs/alert)
```
Alert.alert(
'Alert Title',
'Are you sure like this image',
[
{text: 'Yes', onPress: () => console.log('Yes. I like this image')},
{
text: 'No',
onPress: () => console.log('I am not sure'),
style: 'cancel',
},
],
{cancelable: false},
);
```
### **Milestone 7 🛣🏃How many likes you have ???**
Display the total likes count of your image.
```
{feed.likeCount} likes
```