Zonetail Explore Library
React native component for PMS Application
1. How to use this library locally
npm link
or yarn link
(not recommend)
1.1 Use Both add a dependency as local symlink. (npm link docs, yarn link docs.) But this solution has technical complications, and the npm and the yarn implimentations give people trouble (as of this writing there are about 40 open npm link issues and over 150 open yarn link issues). If you have tried to use symlinked dependencies while developing a package you've probably run into into a stumbling block, whether simply an unexpected unlink behavior, trouble with peer dependencies, or something bigger.
Go to library root and run (you only have to run this every new version):
npm link
Run the following command to generate the tgz file:
npm pack
Remember that you need to run npm pack
everytime you change the library.
Go to the project that you want to use the library and run the following command to add the library:
yarn add path/to/tgz
Don't forget to install missing pod:
npx pod-install
Run your project:
yarn start --reset-cache
yarn ios or yarn android
yalc
(Recommend)
1.2 Use When developing and authoring multiple packages (private or public), you often find yourself in need of using the latest/WIP versions in other projects that you are working on in your local environment without publishing those packages to the remote registry. NPM and Yarn address this issue with a similar approach of symlinked packages (npm/yarn link
). Though this may work in many cases, it often brings nasty constraints and problems with dependency resolution, symlink interoperability between file systems, etc.
Install yalrc:
npm install -g yalc
or
yarn global add yalc
At the root of library project run the command:
yalc publish
Go to project that you want to install this library and run the command:
yalc add zonetail-explore-library
After that install the library like normal:
yarn
Finally, run the project:
yarn start --reset-cache
yarn ios or yarn android
For more information and usecases please read more at here and here
2. Troubleshoot
If you have some problem please following these step:
-
null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')
=> please installreact-native-gesture-handler
. -
unrecognized font family materialicons
=> this isreact-native-vector-icons
problem, please setup react-native-vector-icons and following this issue: https://github.com/oblador/react-native-vector-icons/issues/965#issuecomment-548042586, link this library manually and then clear cache, run the project. - Invalid Hook When import component please following this link: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
3. Publish step:
3.1 Update local library
- Update the code
- Update the version if needed
- Add tag (if you change the version) and push the code
- Run the command
npm pack
if you use npm locally oryalc push
if you useyalc
3.2 Publish to npm
- Update the code.
- Update the version.
- Add version tag and push to remote.
- Login to npm (skip this step if you already logged in)
- Run the command:
npm publish --access restricted
4. How to use
Init the library with host:
import ZoneTail from 'zonetail-explore-library';
// place this in your App component
Zonetail.init({
advertAgeApiDev: 'https://api-development.zonetail-api.com',
advertAgeApiProd: 'https://api-development.zonetail-api.com',
pmsApiDev: 'https://pms-development.zonetail-api.com',
pmsApiProd: 'https://pms-development.zonetail-api.com',
});
Use the components of library from anywhere:
import {ZoneCarousel, ExploreScreen} from 'zonetail-explore-library';
Enjoy it!