react-native-instagram - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #macos #windows #cli #kubernetes #vue #awesome-list #security #pytorch #mcp #ios #open-source

react-native-instagram

(★ 330)

Instagram iOS page transitions implementation with FlashList and Reanimated

파일 탐색기

최종 버전 다운로드 (.zip)

- icon.png
- DetailScreenHeader.tsx
- ImageCard.tsx
- ImageDescriptions.tsx
- ImageDetailList.tsx
- ImageDetailListItem.tsx
- ImageHeader.tsx
- ImageItem.tsx
- animation.ts
- api.ts
- feed.ts
- ui.ts
- detail-screen.tsx
- use-animated-values.ts
- useDetailScreen.ts
- useGestureHandlerValues.ts
- Details.tsx
- Home.tsx
- api.ts
- calculations.ts
.env
.gitignore
app.json
App.tsx
babel.config.js
eas.json
index.js
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/enesozturk/react-native-instagram

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-instagram

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn ios

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
    <img alt="app icon" height="128" src="./assets/icon.png">
    <h1 align="center">React Native Instagram Page Transition</h1>
</p>

> **Warning**
> This is an experimental project. I have always been impressed with Instagram's iOS page transitions. I tried to implement the same with the following technologies. The result was much better than I expected. There are still some things to do to provide the same experience. Using it in production is not recommended.

## Stack

- [Expo](https://expo.dev/) (SDK 44)
- TypeScript
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)
- [FlashList](https://github.com/shopify/flash-list)
- [React Native Fast Image](https://github.com/DylanVann/react-native-fast-image)
- [SWR](https://swr.vercel.app/) for requests
- [Unsplash API](https://unsplash.com/developers) for awesome images.

## Want to try?

If you want to try this on your device, you can install and run the app in a few seconds with the following commands;

Install the packages:

```
yarn install
```

Run the app with the following command.

> **Warning**
> Be sure that Expo CLI is installed.

```bash
yarn ios
```

That's it, enjoy 🤞🏽

## Unsplash API

In this project, I used Unsplash API to get awesome images. To try on your own, you'll need to create and app on Unsplash dashboard and get the Client ID and replace that id in the `/constants/api.ts` with `YOUR_UNSPLASH_CLIENT_ID`.

## Challanges / Todo's

- [ ] Integrate with the [transition api](https://github.com/software-mansion/react-native-reanimated/pull/2561) from Reanimated.
- [ ] Custom list inside details screen. Just like the Instagram, in every detail screen, we can implement new lists by fetching another query. Currently, it's just rendering FlashList with only selected image.
  - [ ] After scrolling down in details list, when close the details screen, we can do show first image by fading or change the original one with the last image scrolled.
- [ ] Integrating this with the React Navigation would be super cool.

## License

The source code is made available under the [MIT license](./LICENSE).

## Show Your Support

If you like this project, please give a star and follow me on Github for more 🤩