generated from WrathChaos/react-native-typescript-library-starter
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: README is updated and version 1 is publishing
- Loading branch information
1 parent
8fc4ff2
commit d052431
Showing
4 changed files
with
78 additions
and
68 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,116 +1,126 @@ | ||
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/> | ||
<img alt="React Native Social Auth Helper" src="assets/logo.png" width="1050"/> | ||
|
||
[![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) | ||
|
||
[![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) | ||
[![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) | ||
[![npm version](https://img.shields.io/npm/v/react-native-social-auth-helper.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-social-auth-helper) | ||
[![npm](https://img.shields.io/npm/dt/react-native-social-auth-helper.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-social-auth-helper) | ||
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) | ||
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) | ||
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) | ||
|
||
<p align="center"> | ||
<img alt="React Native Typescript Library Starter" | ||
src="assets/Screenshots/typescript.jpg" /> | ||
</p> | ||
|
||
## Library Usage | ||
|
||
- `npm i` | ||
- `npm run husky:setup` | ||
- 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` | ||
|
||
``` | ||
> react-native-typescript-library-starter@0.1.0 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-social-auth-helper | ||
``` | ||
|
||
## Peer Dependencies | ||
|
||
<h5><i>IMPORTANT! You need install them</i></h5> | ||
|
||
```js | ||
"react": ">= 16.x.x", | ||
"react-native": ">= 0.55.x" | ||
```json | ||
"@invertase/react-native-apple-authentication": ">= 2.1.5", | ||
"@react-native-firebase/auth": ">= 14.8.0", | ||
"@react-native-google-signin/google-signin": ">= 7.2.2", | ||
"react-native-fbsdk-next": ">= 8.0.0" | ||
``` | ||
|
||
# Usage | ||
|
||
## Import | ||
|
||
```jsx | ||
import MyComponent from "react-native-typescript-library-starter"; | ||
import { | ||
appleLogin, | ||
facebookLogin, | ||
fetchFacebookUserData, | ||
googleLogin, | ||
} from "react-native-social-auth-helper"; | ||
``` | ||
|
||
## Fundamental Usage | ||
## Facebook Login Usage | ||
|
||
```jsx | ||
<MyComponent /> | ||
```js | ||
import { | ||
facebookLogin, | ||
fetchFacebookUserData, | ||
} from "react-native-social-auth-helper"; | ||
import { AccessToken } from "react-native-fbsdk-next"; | ||
|
||
export const handleFacebookLogin = async () => { | ||
await facebookLogin(); | ||
const fbCredential = await AccessToken.getCurrentAccessToken(); | ||
const fbAccessToken = fbCredential.accessToken.toString(); | ||
// Create a Firebase credential with the AccessToken | ||
const authCredential = auth.FacebookAuthProvider.credential( | ||
fbCredential.accessToken, | ||
); | ||
const fbUserData = await fetchFacebookUserData(fbAccessToken); | ||
const { id, email, name, picture } = fbUserData.data; | ||
await auth().signInWithCredential(authCredential); | ||
// Successfully login and fetched the facebook user data | ||
// ... your logic | ||
} | ||
``` | ||
|
||
## Example Project 😍 | ||
|
||
You can checkout the example project 🥰 | ||
|
||
Simply run | ||
|
||
- `npm i` | ||
- `react-native run-ios/android` | ||
## Google Login Usage | ||
|
||
should work of the example project. | ||
Do not forget to add your webCientId for Google configuration | ||
|
||
# Configuration - Props | ||
|
||
## Fundamentals | ||
```js | ||
import { googleLogin } from "react-native-social-auth-helper"; | ||
import { GoogleSignin } from "@react-native-google-signin/google-signin"; | ||
|
||
GoogleSignin.configure({ | ||
offlineAccess: false, | ||
webClientId: | ||
"your-web-client-id", | ||
}); | ||
|
||
export const handleGoogleLogin = async () => { | ||
await GoogleSignin.hasPlayServices(); | ||
const { authCredential, user } = await googleLogin(); | ||
const { id, email, name, photo } = user; | ||
// Successfully login and fetched the google user data | ||
// ... your logic | ||
} | ||
``` | ||
|
||
| Property | Type | Default | Description | | ||
| ----------- | :----: | :-------: | --------------------- | | ||
| title | string | undefined | change the title | | ||
| description | string | undefined | change the descrition | | ||
|
||
## Customization (Optionals) | ||
## Apple Login Usage | ||
|
||
| Property | Type | Default | Description | | ||
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- | | ||
| enableButton | boolean | false | let you enable the button (must use it for button) | | ||
| onPress | function | undefined | set your own logic for the button functionality when it is pressed | | ||
| buttonText | string | undefined | change the button's text | | ||
| style | ViewStyle | default | set or override the style object for the main container | | ||
| buttonStyle | ViewStyle | default | set or override the style object for the button style | | ||
| ImageComponent | Image | default | set your own component instead of default react-native Image component | | ||
```js | ||
import { appleLogin } from "react-native-social-auth-helper"; | ||
|
||
export const handleGoogleLogin = async () => { | ||
const { appleAuthRequestResponse, userCredential } = await appleLogin(); | ||
const { email, fullName } = appleAuthRequestResponse; | ||
const userData = { | ||
id: userCredential.user.uid, | ||
socialId: userCredential.user.providerData[0].uid, | ||
socialType: SOCIAL_TYPE.APPLE, | ||
email: email, | ||
username: fullName?.givenName || null, | ||
photo: userCredential.user.photoURL, | ||
}; | ||
// Successfully login and fetched the apple user data | ||
// ... your logic | ||
} | ||
``` | ||
|
||
## Future Plans | ||
|
||
- [x] ~~LICENSE~~ | ||
- [ ] Write an article about the lib on Medium | ||
|
||
# Change Log | ||
|
||
Change log will be here ! | ||
|
||
## Author | ||
|
||
FreakyCoder, kurayogun@gmail.com | ||
|
||
## License | ||
|
||
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info. | ||
React Native Social Auth Helper is available under the MIT license. See the LICENSE file for more info. |
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 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