├── .gitignore ├── LICENSE ├── README.md └── images ├── flatlist-last-item-margin-bottom-problem.jpg ├── flatlist-last-item-margin-bottom-result.jpg ├── touchable-native-feedback-ripple-border-radius-problem.jpg └── touchable-native-feedback-ripple-border-radius-solution.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2018 Terry Sahaidak terry@sahaidak.com 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native tips and tricks 2 | 3 | > A curated list of helpful tips and trick for react native developers. 4 | 5 | ## Table of contents 6 | 7 | - [Android specific](#android-specific) 8 | - [*Ripple goes outside of the TouchableNativeFeedback with border radius*](#ripple-goes-outside-of-the-touchablenativefeedback-with-border-radius) 9 | - [iOS specific](#ios-specific) 10 | - [*Title for ios example*](#title-for-ios-example) 11 | - [Cross-platform](#cross-platform) 12 | - [*FlatList last item margin bottom*](#flatlist-last-item-margin-bottom) 13 | - [Bundling](#bundling) 14 | - [*How to use symlinks*](#how-to-use-symlinks) 15 | - [*Absolute imports*](#absolute-imports) 16 | - [License](#license) 17 | 18 | ## Android specific 19 | 20 | ### *Ripple goes outside of the TouchableNativeFeedback with border radius* 21 | 22 | __Problem:__ 23 | 24 | Sometimes you need to implement rounded buttons with ripple animation. You will go ahead and use a `TouchableNativeFeedback` with some `borderRadius`. But you'll notice that ripple animation doesn't follow your border radius and goes outside of rounded container. 25 | 26 | Touchable native feedback ripple with border radius problem screenshot 27 | 28 | __Solution:__ 29 | 30 | To fix that wrap your `TouchableNativeFeedback` with another `View` with some styles: 31 | 32 | ```js 33 | 37 | 38 | {/* all your content goes here... */} 39 | 40 | 41 | ``` 42 | 43 | Touchable native feedback ripple with border radius solution screenshot 44 | 45 | __Demo:__ 46 | 47 | [Run snack with the demo](https://snack.expo.io/@terrysahaidak/supportive-celery). 48 | 49 | ## iOS specific 50 | 51 | ### *Title for ios example* 52 | 53 | ## Cross-platform 54 | 55 | ### *FlatList last item margin bottom* 56 | 57 | __Problem:__ 58 | 59 | Sometimes you might want to add an extra whitespace in the bottom of your FlatList. You will see that neither adding `paddingBottom` to the `style` property of the FlatList nor adding extra margin to your list items makes any effect. 60 | 61 | Flatlist last item margin bottom problem screenshot 62 | 63 | __Solution:__ 64 | 65 | The solution to this problem is to add `paddingBottom` style to the `contentContainerStyle`. i.e.: 66 | 67 | ```js 68 | 74 | ``` 75 | 76 | Flatlist last item margin bottom result screenshot 77 | 78 | __Related issues:__ 79 | 80 | - [react-native#15707](https://github.com/facebook/react-native/issues/15707) 81 | 82 | ## Bundling 83 | 84 | ### *How to use symlinks* 85 | 86 | __Problem:__ 87 | 88 | [Symlinks](https://docs.npmjs.com/cli/link.html) are really common and helpful thing when you're developing in monorepo using [lerna](https://github.com/lerna/lerna) or just an example for your library. They will allow you to link your local modules between each other so the module inside your `node_module` folder will be pointing to your local folder and will be up to date with all changes you've made. 89 | Currently metro (the react native packager) doesn't follow symlinks and won't build your bundle. 90 | 91 | __Solution:__ 92 | 93 | To fix that you'll have to: 94 | 95 | 1. Create a symlink of your package ([here](https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557)) is example). 96 | 97 | 2. Run inside your react native project [metro-with-symlinks](https://www.npmjs.com/package/metro-with-symlinks) tool. 98 | 99 | It will generate you a `rn-cli.config.js` file with all the instructions for metro how to resolve symlinks and build the bundle. 100 | 101 | ### *Absolute imports* 102 | 103 | __Problem:__ 104 | 105 | Module imports in your project are usually separated in two types: 106 | 107 | - import npm modules which are resolved relatively to the `node_modules` folder 108 | - import your own modules 109 | 110 | Doing the second, you will always find something like this `import { SomeComponent } from '../SomeComponent';` and it is ok for smaller projects or when you have a relatively independent module. But as your project start to grow, your imports may become a hell: `import { doSomething } from '../../../../../../../some-module';` and it is extremely hard to read or follow this path in your IDE to find the right file. Furthermore, your import will fail if you move dependent file somewhere else during a refactoring. 111 | 112 | __Solution:__ 113 | 114 | Absolute imports in react native. 115 | So, what if we could import our component located in `src/components` from the `src/screens` with something like this: 116 | 117 | ```js 118 | import { SomeComponent } from 'components/SomeComponent'; 119 | ``` 120 | 121 | Just create a `package.json` file under your `src/components` folder with the next content: 122 | 123 | ```json 124 | { 125 | "name": "components" 126 | } 127 | ``` 128 | 129 | It does make sense to create such `package.json` for each root module. So imagine you have a file structure like this: 130 | 131 | ```plain 132 | src/ 133 | components/ 134 | screens/ 135 | config/ 136 | constants/ 137 | i18n/ 138 | utils/ 139 | index.js 140 | package.json - your app's main package.json 141 | ``` 142 | 143 | Just create a similar `package.json` for every folder to become resolvable absolutely. And you will have something like this: 144 | 145 | ```plain 146 | src/ 147 | components/ 148 | package.json - "components" 149 | screens/ 150 | package.json - "screens" 151 | config/ 152 | package.json - "config" 153 | constants/ 154 | package.json - "constants" 155 | i18n/ 156 | package.json - "i18n" 157 | package.json - "app" 158 | index.js 159 | package.json - your app's main package.json 160 | ``` 161 | 162 | ## License 163 | 164 | [MIT](LICENSE) 165 | -------------------------------------------------------------------------------- /images/flatlist-last-item-margin-bottom-problem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrysahaidak/react-native-tips-and-tricks/2b0312316665d6bfa906b03a81b8117ba87d270d/images/flatlist-last-item-margin-bottom-problem.jpg -------------------------------------------------------------------------------- /images/flatlist-last-item-margin-bottom-result.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrysahaidak/react-native-tips-and-tricks/2b0312316665d6bfa906b03a81b8117ba87d270d/images/flatlist-last-item-margin-bottom-result.jpg -------------------------------------------------------------------------------- /images/touchable-native-feedback-ripple-border-radius-problem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrysahaidak/react-native-tips-and-tricks/2b0312316665d6bfa906b03a81b8117ba87d270d/images/touchable-native-feedback-ripple-border-radius-problem.jpg -------------------------------------------------------------------------------- /images/touchable-native-feedback-ripple-border-radius-solution.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrysahaidak/react-native-tips-and-tricks/2b0312316665d6bfa906b03a81b8117ba87d270d/images/touchable-native-feedback-ripple-border-radius-solution.jpg --------------------------------------------------------------------------------