react-native-shared-element

(★ 2,331)

Native shared element transition "primitives" for react-native 💫

File Explorer

Download Latest Version (.zip)

- - check-repro.yml
- FUNDING.yml
- settings.json
- - org.eclipse.buildship.core.prefs
- .project
- build.gradle
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - splash-icon.png
- - App.tsx
  - logo.png
- - App.tsx
- .gitattributes
- .gitignore
- app.json
- babel.config.js
- index.js
- metro.config.js
- package.json
- README.md
- tsconfig.json
- yarn.lock
- index.js.flow
- - project.pbxproj
- RNSharedElementContent.h
- RNSharedElementContent.m
- RNSharedElementCornerRadii.h
- RNSharedElementCornerRadii.m
- RNSharedElementDelegate.h
- RNSharedElementNode.h
- RNSharedElementNode.m
- RNSharedElementNodeManager.h
- RNSharedElementNodeManager.m
- RNSharedElementStyle.h
- RNSharedElementStyle.m
- RNSharedElementTransition.h
- RNSharedElementTransition.m
- RNSharedElementTransitionItem.h
- RNSharedElementTransitionItem.m
- RNSharedElementTransitionManager.h
- RNSharedElementTransitionManager.m
- RNSharedElementTypes.h
- - Color.web.ts
  - index.web.ts
  - Rect.web.ts
  - RNSharedElementContent.web.ts
  - RNSharedElementNode.web.ts
  - RNSharedElementNodeManager.web.ts
  - RNSharedElementStyle.web.ts
  - RNSharedElementTransition.web.ts
  - RNSharedElementTransitionItem.web.ts
  - RNSharedElementView.web.ts
  - types.ts
  - WORK_IN_PROGRESS.md
- index.tsx
- RNSharedElementTransitionView.tsx
- RNSharedElementTransitionView.web.tsx
- SharedElement.tsx
- SharedElementTransition.tsx
- types.tsx
- - project.json
  - RNVisualClone.csproj
  - RNVisualCloneModule.cs
  - RNVisualClonePackage.cs
- .gitignore
- .npmignore
- RNVisualClone.sln
.eslintrc.js
.gitattributes
.gitignore
babel.config.js
CHANGELOG.md
LICENSE.txt
package.json
README.md
RNSharedElement.podspec
set-android.gif
set-ios.gif
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/IjzerenHein/react-native-shared-element

Downloads the entire project code from GitHub to your computer.

cd react-native-shared-element

Moves into the project folder you just downloaded.

2. .NET

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
.NET SDK The SDK required for the dotnet command.

cd windows

This project's files live in a subfolder, so move into it first.

dotnet restore

Downloads the packages the project depends on.

dotnet run

Builds the project and runs it immediately.

✅ After dotnet run, check the message or address shown in the terminal.

3. Gradle (Java/Kotlin)

Medium

Prerequisites

Git Needed to download the project code from GitHub.
JDK (Java) Required to build and run Java/Kotlin projects.
Gradle If the repo includes gradlew (Gradle Wrapper), you don't need to install Gradle separately.

cd android

This project's files live in a subfolder, so move into it first.

./gradlew build

Builds the project using Gradle.

✅ A BUILD SUCCESSFUL message means it worked. The output is created under build/.

4. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add react-native-shared-element

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.