├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── assets ├── Screenshots │ └── example.png └── logo.png ├── example ├── .expo-shared │ └── assets.json ├── .gitignore ├── App.tsx ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── package-lock.json ├── package.json ├── src │ └── TextWrapper.tsx └── tsconfig.json ├── lib ├── RNText.style.ts └── RNText.tsx ├── package-lock.json ├── package.json └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | "@react-native-community", 5 | "airbnb-typescript", 6 | "prettier", 7 | "prettier/@typescript-eslint", 8 | "prettier/react" 9 | ], 10 | parser: "babel-eslint", 11 | plugins: ["react", "react-native"], 12 | env: { 13 | jest: true, 14 | "react-native/react-native": true 15 | }, 16 | rules: { 17 | // allow js file extension 18 | "react/jsx-filename-extension": [ 19 | "error", 20 | { 21 | extensions: [".js", ".jsx", ".tsx", ".ts"] 22 | } 23 | ], 24 | // for post defining style object in react-native 25 | "no-use-before-define": ["error", { variables: false }], 26 | // react-native rules 27 | "react-native/no-unused-styles": 2, 28 | "react-native/split-platform-components": 2, 29 | "react-native/no-inline-styles": 2, 30 | "react-native/no-raw-text": 2 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # Visual Studio Code 33 | # 34 | .vscode/ 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # fastlane 49 | # 50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 51 | # screenshots whenever they are needed. 52 | # For more information about the recommended setup visit: 53 | # https://docs.fastlane.tools/best-practices/source-control/ 54 | 55 | */fastlane/report.xml 56 | */fastlane/Preview.html 57 | */fastlane/screenshots 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # CocoaPods 63 | /ios/Pods/ 64 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node Modules 2 | **/node_modules 3 | node_modules 4 | # Example 5 | example 6 | # Assets 7 | Assets 8 | assets -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: true, 3 | jsxBracketSameLine: false, 4 | singleQuote: false, 5 | trailingComma: "all", 6 | tabWidth: 2, 7 | semi: true, 8 | }; 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 FreakyCoder 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Native Custom Text 2 | 3 | [![Custom Text with cool heading & font family interaction for React Native](https://img.shields.io/badge/-Custom%20Text%20with%20cool%20heading%20%26%20font%20family%20interaction%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-boilerplate) 4 | 5 | [![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-custom-text.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-custom-text) 6 | [![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-custom-text.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-custom-text) 7 | ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) 8 | ![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge) 9 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) 10 | [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) 11 | 12 |

13 | React Native Custom Text 14 |

15 | 16 | ## Installation 17 | 18 | Add the dependency: 19 | 20 | ```ruby 21 | npm i @freakycoder/react-native-custom-text 22 | ``` 23 | 24 | ## Peer Dependencies 25 | 26 | Zero Dependency 27 | 28 | ## Basic Usage 29 | 30 | ```jsx 31 | import Text from "@freakycoder/react-native-custom-text"; 32 | 33 | 34 | Hello Heading 1 35 | ; 36 | ``` 37 | 38 | ## Advanced Usage 39 | 40 | ```jsx 41 | import Text from "@freakycoder/react-native-custom-text"; 42 | 43 | 44 | Heading 3 Bold Right Sided Custom Text 45 | ; 46 | ``` 47 | 48 | ## Custom Advanced Usage (Wrapper) 49 | 50 | If you'are going to use Custom Text rather than Text component on your WHOLE project. I suggest that write a TextWrapper functional component and you can set and use it like original Text component 51 | 52 | ```jsx 53 | import React from "react"; 54 | import Text, { IRNTextProps } from "@freakycoder/react-native-custom-text"; 55 | 56 | interface ITextWrapperProps extends IRNTextProps { 57 | color?: string; 58 | fontFamily?: string; 59 | children?: React.ReactNode; 60 | } 61 | 62 | const TextWrapper: React.FC = ({ 63 | fontFamily = "Helvetica", 64 | color = "#fff", 65 | children, 66 | ...rest 67 | }) => { 68 | return ( 69 | 70 | {children} 71 | 72 | ); 73 | }; 74 | 75 | export default TextWrapper; 76 | ``` 77 | 78 | ### Usage of it 79 | 80 | Here is the example of how to use it, also you can check the example folder. 81 | 82 | ```jsx 83 | // Important! Path will be change depends on your project structure tree 84 | import Text from "../../shared/components/text/TextWrapper"; 85 | 86 | 87 | Example Text for TextWrapper 88 | ; 89 | ``` 90 | 91 | ## Configuration - Props 92 | 93 | | Property | Type | Default | Description | 94 | | ---------- | :--------: | :-----: | ---------------------------------------------------------------- | 95 | | h1 | boolean | false | heading 1 prop | 96 | | h2 | boolean | false | heading 2 prop | 97 | | h3 | boolean | false | heading 3 prop | 98 | | h4 | boolean | false | heading 4 prop | 99 | | h5 | boolean | false | heading 5 prop | 100 | | h6 | boolean | false | heading 7 prop | 101 | | left | boolean | false | make the text left sided | 102 | | center | boolean | false | make the text centered | 103 | | right | boolean | false | make the text right sided | 104 | | bold | boolean | false | make the text style bold (Compatible with Font Family) | 105 | | color | color | "#fff" | change the text's color | 106 | | fontFamily | FontFamily | default | set your own FontFamily directly to the Text component as a prop | 107 | 108 | Any Text props are available like 'numberOfLines' or any other. There is no restriction. 109 | 110 | ### Roadmap 111 | 112 | - [x] ~~LICENSE~~ 113 | - [x] ~~Typescript~~ 114 | - [ ] Write an article about the lib on Medium 115 | 116 | ## Author 117 | 118 | FreakyCoder, kurayogun@gmail.com 119 | 120 | ## License 121 | 122 | React Native Custom Text Library is available under the MIT license. See the LICENSE file for more info. 123 | -------------------------------------------------------------------------------- /assets/Screenshots/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/assets/Screenshots/example.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/assets/logo.png -------------------------------------------------------------------------------- /example/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, StyleSheet } from "react-native"; 3 | import Text from "@freakycoder/react-native-custom-text"; 4 | // import TextWrapper from "./src/TextWrapper"; 5 | 6 | export default class App extends React.Component { 7 | render() { 8 | return ( 9 | 10 | 11 | Heading 1 12 | 13 | 14 | Heading 2 15 | 16 | 17 | Heading 3 18 | 19 | 20 | Heading 4 21 | 22 | 23 | Heading 5 24 | 25 | 26 | Heading 6 27 | 28 | 29 | ); 30 | } 31 | } 32 | 33 | const styles = StyleSheet.create({ 34 | container: { 35 | flex: 1, 36 | backgroundColor: "#fff", 37 | flexDirection: "column", 38 | justifyContent: "space-evenly", 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "expo-example", 4 | "slug": "expo-example", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WrathChaos/react-native-custom-text/0ea892d0d7b18eed13f69964ac9346594dcd9bc3/example/assets/splash.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@freakycoder/react-native-custom-text": "^0.1.2", 12 | "expo": "~49.0.5", 13 | "expo-linear-gradient": "~8.4.0", 14 | "expo-status-bar": "~1.0.3", 15 | "react": "16.13.1", 16 | "react-dom": "16.13.1", 17 | "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", 18 | "react-native-web": "~0.13.12", 19 | "tslib": "^2.1.0" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "~7.9.0", 23 | "@types/react": "~16.9.35", 24 | "@types/react-dom": "~16.9.8", 25 | "@types/react-native": "~0.63.2", 26 | "typescript": "~4.0.0" 27 | }, 28 | "private": true 29 | } 30 | -------------------------------------------------------------------------------- /example/src/TextWrapper.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Text, { IRNTextProps } from "@freakycoder/react-native-custom-text"; 3 | interface ITextWrapperProps extends IRNTextProps { 4 | color?: string; 5 | fontFamily?: string; 6 | children?: React.ReactNode; 7 | } 8 | 9 | const TextWrapper: React.FC = ({ 10 | fontFamily = "Helvetica", 11 | color = "#fff", 12 | children, 13 | ...rest 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ); 20 | }; 21 | 22 | export default TextWrapper; 23 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react-native", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "noEmit": true, 8 | "skipLibCheck": true, 9 | "resolveJsonModule": true, 10 | "strict": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /lib/RNText.style.ts: -------------------------------------------------------------------------------- 1 | import { TextStyle, StyleSheet } from "react-native"; 2 | 3 | export const _setFontFamily = (customFontFamily: string): TextStyle => { 4 | return { 5 | fontFamily: customFontFamily, 6 | }; 7 | }; 8 | 9 | export const _setColor = (color: string): TextStyle => { 10 | return { 11 | color, 12 | }; 13 | }; 14 | 15 | interface Style { 16 | h1: TextStyle; 17 | h2: TextStyle; 18 | h3: TextStyle; 19 | h4: TextStyle; 20 | h5: TextStyle; 21 | h6: TextStyle; 22 | center: TextStyle; 23 | left: TextStyle; 24 | right: TextStyle; 25 | bold: TextStyle; 26 | } 27 | 28 | export default StyleSheet.create