Skip to content

Commit ff4a799

Browse files
WrathChaosWrathChaos
committed
New gifs are here
1 parent cea1677 commit ff4a799

File tree

7 files changed

+68
-67
lines changed

7 files changed

+68
-67
lines changed

‎README.md‎

Lines changed: 27 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,52 @@
1-
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
1+
<img alt="React Native Animated" src="assets/logo.png" width="1050"/>
22

3-
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
3+
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-component)
44

5-
[![React Native Typescript Library Starter](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
5+
[![Animate any components with React Native Animated Component](https://img.shields.io/badge/-Animate%20any%20components%20with%20React%20Native%20Animated%20Component-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-component)
66

7-
[![npm version](https://img.shields.io/npm/v/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
8-
[![npm](https://img.shields.io/npm/dt/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
7+
[![npm version](https://img.shields.io/npm/v/react-native-animated-component.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-component)
8+
[![npm](https://img.shields.io/npm/dt/react-native-animated-component.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-component)
99
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
1010
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
1111
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1212

1313
<p align="center">
14-
<img alt="React Native Typescript Library Starter"
15-
src="assets/Screenshots/typescript.jpg" />
14+
<img alt="React Native Animated"
15+
src="assets/Screenshots/react-native-animated.gif" />
16+
<img alt="React Native Animated"
17+
src="assets/Screenshots/react-native-animated-component.gif" />
1618
</p>
1719

18-
## Library Usage
19-
20-
- `npm i`
21-
- Delete example folder
22-
- Delete build folder
23-
- Make your own library into the `lib` folder
24-
- Change package.json
25-
- Change README for your own documentation
26-
- `npm run build`
27-
28-
```
29-
> [email protected] build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter
30-
> cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
31-
32-
Build completed!
33-
```
34-
35-
- Test your build/dist into the new project
36-
- Finally, time to npm publish :)
37-
38-
### Below part is for Documentation ! Remove above Library Usage
39-
4020
# Installation
4121

4222
Add the dependency:
4323

4424
```bash
45-
npm i react-native-typescript-library-starter
25+
npm i react-native-animated-component
4626
```
4727

4828
## Peer Dependencies
4929

50-
<h5><i>IMPORTANT! You need install them</i></h5>
51-
52-
```js
53-
"react": ">= 16.x.x",
54-
"react-native": ">= 0.55.x",
55-
```
30+
<i>Zero Dependencies</i>
5631

5732
# Usage
5833

5934
## Import
6035

6136
```jsx
62-
import MyComponent from "react-native-typescript-library-starter";
37+
import RNAnimated from "react-native-animated-component";
6338
```
6439

6540
## Fundamental Usage
6641

6742
```jsx
68-
<MyComponent />
43+
<RNAnimated
44+
appearFrom="left"
45+
animationDuration={1300}
46+
style={{ alignItems: "center" }}
47+
>
48+
{staticData.map(() => renderItem())}
49+
</RNAnimated>
6950
```
7051

7152
## Example Project 😍
@@ -83,21 +64,13 @@ should work of the example project.
8364

8465
## Fundamentals
8566

86-
| Property | Type | Default | Description |
87-
| ----------- | :----: | :-------: | --------------------- |
88-
| title | string | undefined | change the title |
89-
| description | string | undefined | change the descrition |
90-
91-
## Customization (Optionals)
92-
93-
| Property | Type | Default | Description |
94-
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
95-
| enableButton | boolean | false | let you enable the button (must use it for button) |
96-
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
97-
| buttonText | string | undefined | change the button's text |
98-
| style | ViewStyle | default | set or override the style object for the main container |
99-
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
100-
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
67+
| Property | Type | Default | Description |
68+
| ----------------- | :--------: | :-----: | --------------------------------------------------------------------- |
69+
| appearFrom | AppearFrom | "left" | The component will appear from that direction |
70+
| animationDuration | number | 300 | change the animation duration |
71+
| style | ViewStyle | default | set or override the style object for the main container |
72+
| initialDelay | number | default | change the initial delay of the appearing animation |
73+
| delayInterval | number | 200 | change the each children's delay interval in each appearing animation |
10174

10275
## Future Plans
10376

@@ -118,4 +91,4 @@ FreakyCoder, [email protected]
11891

11992
## License
12093

121-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
94+
React Native Animated is available under the MIT license. See the LICENSE file for more info.

‎assets/Screenshots/react-native-animated-component.gif‎

17.9 MB
Loading

‎assets/Screenshots/react-native-animated.gif‎

36.3 MB
Loading

‎assets/Screenshots/typescript.jpg‎

-28.5 KB
Binary file not shown.

‎example/App.tsx‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
import React from "react";
22
import { View, Text, StatusBar, SafeAreaView } from "react-native";
3+
import AppleHeader from "react-native-apple-header";
34
import RNAnimated from "react-native-animated-component";
5+
import RNBounceable from "@freakycoder/react-native-bounceable";
46

5-
const staticData = [1, 2, 3, 4, 5, 6, 7, 1, 1, 4, 5, 31];
7+
const staticData = [
8+
"Quidditch",
9+
"Basketball",
10+
"Running",
11+
"Football",
12+
"Baseball",
13+
"Rugby",
14+
"Gymnastics",
15+
"Cycling",
16+
"Tennis",
17+
"Golf",
18+
"Soccer",
19+
"Yoga",
20+
];
621

722
const App = () => {
8-
const renderItem = () => (
9-
<View
23+
const renderItem = (data: any) => (
24+
<RNBounceable
25+
bounceEffect={0.97}
1026
key={Math.random()}
1127
style={{
1228
height: 50,
13-
width: 250,
29+
width: 325,
1430
marginTop: 12,
1531
borderRadius: 12,
1632
alignItems: "center",
1733
justifyContent: "center",
1834
backgroundColor: "#fff",
35+
shadowRadius: 3,
36+
shadowOpacity: 0.2,
37+
shadowColor: "#757575",
38+
shadowOffset: {
39+
width: 0,
40+
height: 3,
41+
},
1942
}}
2043
>
21-
<Text>Hello</Text>
22-
</View>
44+
<Text>{data}</Text>
45+
</RNBounceable>
2346
);
2447

2548
return (
@@ -28,17 +51,20 @@ const App = () => {
2851
<SafeAreaView
2952
style={{
3053
flex: 1,
31-
backgroundColor: "#ccc",
32-
alignItems: "center",
33-
justifyContent: "center",
3454
}}
3555
>
56+
<AppleHeader
57+
imageSource={{
58+
uri:
59+
"https://images.unsplash.com/photo-1551292831-023188e78222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
60+
}}
61+
/>
3662
<RNAnimated
37-
appearFrom="right"
63+
appearFrom="bottom"
3864
animationDuration={1300}
3965
style={{ alignItems: "center" }}
4066
>
41-
{staticData.map(() => renderItem())}
67+
{staticData.map((item) => renderItem(item))}
4268
</RNAnimated>
4369
</SafeAreaView>
4470
</>

‎example/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
1111
},
1212
"dependencies": {
13+
"@freakycoder/react-native-bounceable": "^0.2.2",
1314
"react": "16.13.1",
1415
"react-native": "0.63.3",
15-
"react-native-animated-component": "^0.1.0"
16+
"react-native-animated-component": "^0.1.0",
17+
"react-native-apple-header": "^0.1.1"
1618
},
1719
"devDependencies": {
1820
"@babel/core": "^7.8.4",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-animated-component",
33
"version": "0.1.0",
4-
"description": "Animate any components with React Native Animated",
4+
"description": "Animate any components with React Native Animated Component",
55
"main": "./build/dist/RNAnimated.js",
66
"repository": "[email protected]:WrathChaos/react-native-animated-component.git",
77
"author": "FreakyCoder <[email protected]>",

0 commit comments

Comments
 (0)