generated from WrathChaos/react-native-typescript-library-starter
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9e0b44a
commit f501611
Showing
14 changed files
with
184 additions
and
274 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,26 @@ | ||
| <img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/> | ||
| <img alt="React Native Gorgeous Header" src="assets/logo.png" width="1050"/> | ||
|
|
||
| [](https://github.com/WrathChaos/react-native-typescript-library-starter) | ||
| [](https://github.com/WrathChaos/react-native-gorgeous-header) | ||
|
|
||
| [](https://github.com/WrathChaos/react-native-typescript-library-starter) | ||
| [](https://github.com/WrathChaos/react-native-gorgeous-header) | ||
|
|
||
| [](https://www.npmjs.com/package/react-native-typescript-library-starter) | ||
| [](https://www.npmjs.com/package/react-native-typescript-library-starter) | ||
| [](https://www.npmjs.com/package/react-native-gorgeous-header) | ||
| [](https://www.npmjs.com/package/react-native-gorgeous-header) | ||
|  | ||
| [](https://opensource.org/licenses/MIT) | ||
| [](https://github.com/prettier/prettier) | ||
|
|
||
| <p align="center"> | ||
| <img alt="React Native Typescript Library Starter" | ||
| src="assets/Screenshots/typescript.jpg" /> | ||
| <img alt="React Native Gorgeous Header" | ||
| src="assets/Screenshots/React-Native-Gorgeous-Header.png" /> | ||
| </p> | ||
|
|
||
| ## Library Usage | ||
|
|
||
| - `npm i` | ||
| - Delete example folder | ||
| - Delete build folder | ||
| - Make your own library into the `lib` folder | ||
| - Change package.json | ||
| - Change README for your own documentation | ||
| - `npm run build` | ||
|
|
||
| ``` | ||
| > [email protected] build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter | ||
| > cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed! | ||
| Build completed! | ||
| ``` | ||
|
|
||
| - Test your build/dist into the new project | ||
| - Finally, time to npm publish :) | ||
|
|
||
| ### Below part is for Documentation ! Remove above Library Usage | ||
|
|
||
| # Installation | ||
|
|
||
| Add the dependency: | ||
|
|
||
| ```bash | ||
| npm i react-native-typescript-library-starter | ||
| npm i react-native-gorgeous-header | ||
| ``` | ||
|
|
||
| ## Peer Dependencies | ||
|
|
@@ -59,37 +37,51 @@ npm i react-native-typescript-library-starter | |
| ## Import | ||
|
|
||
| ```jsx | ||
| import MyComponent from "react-native-typescript-library-starter"; | ||
| import GorgeousHeader from "react-native-gorgeous-header"; | ||
| ``` | ||
|
|
||
| ## Fundamental Usage | ||
|
|
||
| ```jsx | ||
| <MyComponent /> | ||
| <GorgeousHeader | ||
| menuImageSource={menuImage} | ||
| searchImageSource={searchImage} | ||
| profileImageSource={{ | ||
| uri: | ||
| "https://images.unsplash.com/photo-1514846226882-28b324ef7f28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80", | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| # Configuration - Props | ||
|
|
||
| | Property | Type | Default | Description | | ||
| | -------- | :-----: | :-----: | ------------------------------------------------------- | | ||
| | outline | boolean | true | make the button outline | | ||
| | solid | boolean | false | make the button with a solid background and a shadow | | ||
| | gradient | boolean | false | make the button with a gradient background and a shadow | | ||
| | width | number | 150 | change the button's width | | ||
| ## Gorgeous Header Props | ||
|
|
||
| | Property | Type | Default | Description | | ||
| | ------------------- | :------: | :----------------------------: | ----------------------------------------------------------------------- | | ||
| | title | string | Order | change the title | | ||
| | subtitle | string | Healthy food can keep you fit. | change the subtitle | | ||
| | searchIcon | asset | default | set your own icon for the search one | | ||
| | titleTextStyle | style | default | set your own style for title text | | ||
| | subtitleTextStyle | style | default | set your own style for subtitle text | | ||
| | searchBarStyle | style | default | set your own style for search text input container | | ||
| | searchInputStyle | style | default | set your own style for search text input | | ||
| | menuImageStyle | style | default | set your own style for hamburger menu image | | ||
| | menuImageSource | asset | default | set your own image instead of default hamburger menu image | | ||
| | menuImageOnPress | function | undefined | use this to set your own function for pressing the hamburger menu image | | ||
| | profileImageStyle | style | default | set your own style for profile image | | ||
| | profileImageSource | asset | undefined | use this to set your own image for profile image | | ||
| | profileImageOnPress | function | undefined | use this to set your own function for pressing the profile image | | ||
|
|
||
| ## Future Plans | ||
|
|
||
| - [x] ~~LICENSE~~ | ||
| - [ ] Write an article about the lib on Medium | ||
|
|
||
| # Change Log | ||
|
|
||
| Change log will be here ! | ||
|
|
||
| ## Author | ||
|
|
||
| FreakyCoder, [email protected] | ||
|
|
||
| ## License | ||
|
|
||
| React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info. | ||
| React Native Gorgeous Header is available under the MIT license. See the LICENSE file for more info. | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,28 @@ | ||
| /** | ||
| * Sample React Native App | ||
| * https://github.com/facebook/react-native | ||
| * | ||
| * @format | ||
| * @flow strict-local | ||
| */ | ||
| import React from "react"; | ||
| import { StatusBar } from "react-native"; | ||
| import GorgeousHeader from "react-native-gorgeous-header"; | ||
| import { SafeAreaView } from "react-native-safe-area-context"; | ||
| // ? Assets | ||
| const menuImage = require("./assets/menu.png"); | ||
| const searchImage = require("./assets/search.png"); | ||
| const profileImageUri = | ||
| "https://images.unsplash.com/photo-1514846226882-28b324ef7f28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"; | ||
|
|
||
| import React from 'react'; | ||
| import { | ||
| SafeAreaView, | ||
| StyleSheet, | ||
| ScrollView, | ||
| View, | ||
| Text, | ||
| StatusBar, | ||
| } from 'react-native'; | ||
|
|
||
| import { | ||
| Header, | ||
| LearnMoreLinks, | ||
| Colors, | ||
| DebugInstructions, | ||
| ReloadInstructions, | ||
| } from 'react-native/Libraries/NewAppScreen'; | ||
|
|
||
| const App: () => React$Node = () => { | ||
| const App = () => { | ||
| return ( | ||
| <> | ||
| <StatusBar barStyle="dark-content" /> | ||
| <SafeAreaView> | ||
| <ScrollView | ||
| contentInsetAdjustmentBehavior="automatic" | ||
| style={styles.scrollView}> | ||
| <Header /> | ||
| {global.HermesInternal == null ? null : ( | ||
| <View style={styles.engine}> | ||
| <Text style={styles.footer}>Engine: Hermes</Text> | ||
| </View> | ||
| )} | ||
| <View style={styles.body}> | ||
| <View style={styles.sectionContainer}> | ||
| <Text style={styles.sectionTitle}>Step One</Text> | ||
| <Text style={styles.sectionDescription}> | ||
| Edit <Text style={styles.highlight}>App.js</Text> to change this | ||
| screen and then come back to see your edits. | ||
| </Text> | ||
| </View> | ||
| <View style={styles.sectionContainer}> | ||
| <Text style={styles.sectionTitle}>See Your Changes</Text> | ||
| <Text style={styles.sectionDescription}> | ||
| <ReloadInstructions /> | ||
| </Text> | ||
| </View> | ||
| <View style={styles.sectionContainer}> | ||
| <Text style={styles.sectionTitle}>Debug</Text> | ||
| <Text style={styles.sectionDescription}> | ||
| <DebugInstructions /> | ||
| </Text> | ||
| </View> | ||
| <View style={styles.sectionContainer}> | ||
| <Text style={styles.sectionTitle}>Learn More</Text> | ||
| <Text style={styles.sectionDescription}> | ||
| Read the docs to discover what to do next: | ||
| </Text> | ||
| </View> | ||
| <LearnMoreLinks /> | ||
| </View> | ||
| </ScrollView> | ||
| <GorgeousHeader | ||
| menuImageSource={menuImage} | ||
| searchImageSource={searchImage} | ||
| profileImageSource={{ | ||
| uri: profileImageUri, | ||
| }} | ||
| /> | ||
| </SafeAreaView> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| scrollView: { | ||
| backgroundColor: Colors.lighter, | ||
| }, | ||
| engine: { | ||
| position: 'absolute', | ||
| right: 0, | ||
| }, | ||
| body: { | ||
| backgroundColor: Colors.white, | ||
| }, | ||
| sectionContainer: { | ||
| marginTop: 32, | ||
| paddingHorizontal: 24, | ||
| }, | ||
| sectionTitle: { | ||
| fontSize: 24, | ||
| fontWeight: '600', | ||
| color: Colors.black, | ||
| }, | ||
| sectionDescription: { | ||
| marginTop: 8, | ||
| fontSize: 18, | ||
| fontWeight: '400', | ||
| color: Colors.dark, | ||
| }, | ||
| highlight: { | ||
| fontWeight: '700', | ||
| }, | ||
| footer: { | ||
| color: Colors.dark, | ||
| fontSize: 12, | ||
| fontWeight: '600', | ||
| padding: 4, | ||
| paddingRight: 12, | ||
| textAlign: 'right', | ||
| }, | ||
| }); | ||
|
|
||
| export default App; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.