Skip to content

Commit 13036a3

Browse files
WrathChaosWrathChaos
committed
EmptyState library is ready to publish
1 parent a0576f5 commit 13036a3

File tree

17 files changed

+217
-288
lines changed

17 files changed

+217
-288
lines changed

‎README.md

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,98 @@
1-
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
1+
<img alt="React Native Empty State" 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-empty-state)
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+
[![React Native Empty State](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-empty-state)
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/@freakycoder/react-native-empty-state.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-empty-state)
8+
[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-empty-state.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-empty-state)
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 Empty State"
15+
src="assets/Screenshots/react-native-empty-state.jpg" />
1616
</p>
1717

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-
> react-native-typescript-library-starter@0.1.0 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-
4018
# Installation
4119

4220
Add the dependency:
4321

4422
```bash
45-
npm i react-native-typescript-library-starter
23+
npm i @freakycoder/react-native-empty-state
4624
```
4725

4826
## Peer Dependencies
4927

5028
<h5><i>IMPORTANT! You need install them</i></h5>
5129

5230
```js
53-
"react": ">= 16.x.x",
54-
"react-native": ">= 0.55.x",
31+
"@freakycoder/react-native-bounceable": ">= 0.2.2",
5532
```
5633

5734
# Usage
5835

5936
## Import
6037

6138
```jsx
62-
import MyComponent from "react-native-typescript-library-starter";
39+
import MyComponent from "@freakycoder/react-native-empty-state";
6340
```
6441

6542
## Fundamental Usage
6643

6744
```jsx
68-
<MyComponent />
45+
<EmptyState
46+
enableButton
47+
buttonText="Refresh"
48+
imageSource={emptyStateImage}
49+
title="Opps! Anything here :("
50+
description="We cannot find anything here, try again sometime"
51+
/>
6952
```
7053

54+
## Example Project 😍
55+
56+
You can checkout the example project 🥰
57+
58+
Simply run
59+
60+
- `npm i`
61+
- `react-native run-ios/android`
62+
63+
should work of the example project.
64+
7165
# Configuration - Props
7266

73-
| Property | Type | Default | Description |
74-
| -------- | :-----: | :-----: | ------------------------------------------------------- |
75-
| outline | boolean | true | make the button outline |
76-
| solid | boolean | false | make the button with a solid background and a shadow |
77-
| gradient | boolean | false | make the button with a gradient background and a shadow |
78-
| width | number | 150 | change the button's width |
67+
## Fundamentals
7968

80-
## Future Plans
69+
| Property | Type | Default | Description |
70+
| ----------- | :----: | :-------: | --------------------- |
71+
| title | string | undefined | change the title |
72+
| description | string | undefined | change the descrition |
8173

82-
- [x] ~~LICENSE~~
83-
- [ ] Write an article about the lib on Medium
74+
## Customization (Optionals)
8475

85-
# Change Log
76+
| Property | Type | Default | Description |
77+
| -------------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
78+
| enableButton | boolean | false | let you enable the button (must use it for button) |
79+
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
80+
| buttonText | string | undefined | change the button's text |
81+
| style | ViewStyle | default | set or override the style object for the main container |
82+
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
83+
| titleTextStyle | TextStyle | default | set or override the style object for the title text style |
84+
| buttonTextStyle | TextStyle | default | set or override the style object for the button's text style |
85+
| descriptionTextStyle | TextStyle | default | set or override the style object for the description text style |
86+
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
8687

87-
Change log will be here !
88+
## Future Plans
89+
90+
- [x] ~~LICENSE~~
8891

8992
## Author
9093

9194
FreakyCoder, kurayogun@gmail.com
9295

9396
## License
9497

95-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
98+
React Native Empty State is available under the MIT license. See the LICENSE file for more info.

‎assets/Screenshots/react-native-empty-state.png

416 KB
Loading

‎assets/Screenshots/typescript.jpg

-28.5 KB
Binary file not shown.

‎example/App.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
import React from "react";
2-
import {
3-
SafeAreaView,
4-
StyleSheet,
5-
ScrollView,
6-
View,
7-
Text,
8-
StatusBar,
9-
} from "react-native";
10-
import EmptyState from "./lib/EmptyState";
2+
import { StatusBar, SafeAreaView } from "react-native";
3+
import GorgeousHeader from "react-native-gorgeous-header";
4+
import EmptyState from "@freakycoder/react-native-empty-state";
5+
6+
const emptyStateImage = require("./assets/empty-icon.png");
7+
const menuImage = require("./assets/menu.png");
8+
const searchImage = require("./assets/search.png");
119

1210
const App = () => {
1311
return (
1412
<>
1513
<StatusBar barStyle="dark-content" />
16-
<SafeAreaView
17-
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
18-
>
14+
<SafeAreaView>
15+
<GorgeousHeader
16+
menuImageSource={menuImage}
17+
searchImageSource={searchImage}
18+
placeholder="Search any healhty food..."
19+
profileImageSource={{
20+
uri:
21+
"https://images.unsplash.com/photo-1514846226882-28b324ef7f28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80",
22+
}}
23+
/>
1924
<EmptyState
25+
enableButton
26+
buttonText="Refresh"
27+
imageSource={emptyStateImage}
2028
title="Opps! Anything here :("
2129
description="We cannot find anything here, try again sometime"
22-
buttonText="Refresh"
2330
/>
2431
</SafeAreaView>
2532
</>

‎example/lib/local-assets/empty-icon.png renamed to ‎example/assets/empty-icon.png

File renamed without changes.

‎example/assets/menu.png

3.73 KB
Loading

‎example/assets/search.png

19.7 KB
Loading

‎example/lib/EmptyState.style.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎example/lib/EmptyState.tsx

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎example/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"@freakycoder/react-native-bounceable": "^0.2.2",
1414
"react": "16.13.1",
15-
"react-native": "0.63.3"
15+
"react-native": "0.63.3",
16+
"react-native-gorgeous-header": "^0.1.0"
1617
},
1718
"devDependencies": {
1819
"@babel/core": "^7.8.4",

‎lib/EmptyState.style.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
Dimensions,
3+
ViewStyle,
4+
ImageStyle,
5+
TextStyle,
6+
StyleSheet,
7+
} from "react-native";
8+
const { width: ScreenWidth } = Dimensions.get("window");
9+
10+
interface Style {
11+
container: ViewStyle;
12+
imageStyle: ImageStyle;
13+
buttonTextStyle: TextStyle;
14+
containerGlue: ViewStyle;
15+
titleTextStyle: TextStyle;
16+
descriptionTextStyle: TextStyle;
17+
descriptionContainer: ViewStyle;
18+
buttonStyle: ViewStyle;
19+
}
20+
21+
export default StyleSheet.create<Style>({
22+
container: {
23+
alignItems: "center",
24+
justifyContent: "center",
25+
},
26+
imageStyle: {
27+
width: 300,
28+
height: 300,
29+
},
30+
buttonTextStyle: {
31+
fontSize: 16,
32+
color: "#fdfdfd",
33+
},
34+
containerGlue: {
35+
marginTop: 16,
36+
alignItems: "center",
37+
justifyContent: "center",
38+
},
39+
titleTextStyle: {
40+
fontSize: 24,
41+
},
42+
descriptionContainer: {
43+
marginTop: 24,
44+
paddingLeft: 16,
45+
paddingRight: 16,
46+
},
47+
descriptionTextStyle: {
48+
fontSize: 14,
49+
color: "#757575",
50+
textAlign: "center",
51+
},
52+
buttonStyle: {
53+
height: 45,
54+
marginTop: 72,
55+
borderRadius: 24,
56+
alignItems: "center",
57+
justifyContent: "center",
58+
width: ScreenWidth * 0.5,
59+
backgroundColor: "#1ca9df",
60+
shadowRadius: 8,
61+
shadowOpacity: 0.3,
62+
shadowColor: "#1ca9df",
63+
shadowOffset: {
64+
width: 0,
65+
height: 3,
66+
},
67+
},
68+
});

0 commit comments

Comments
 (0)