https://github.com/343max/react-native-previewing
https://github.com/343max/react-native-previewing
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/343max/react-native-previewing
- Owner: 343max
- License: mit
- Created: 2020-07-17T21:44:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T11:46:15.000Z (about 3 years ago)
- Last Synced: 2024-04-14T14:21:23.672Z (almost 2 years ago)
- Language: Java
- Size: 4.02 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-previewing
very Quick Previews for native components
## Installation
```sh
npm install -D react-native-previewing
```
## Setup
add the select-preview and the postinstall script to your `package.json`:
```json
"scripts": {
"select-preview": "npx select-preview.js",
"postinstall": "npm run select-preview"
}
```
add Previewing to your root index.js/index.tsx by replacing:
```js
AppRegistry.registerComponent(appName, App)
```
by:
```js
AppRegistry.registerComponent(appName, () => {
const { preview } = require('./preview_temp.js')
return (__DEV__ && previewingRootComponent(preview)) || App
})
```
add these two tasks to your `.vscode/tasks.json`:
```json
"tasks": [
{
"label": "Preview: Show App",
"type": "shell",
"command": "npm run select-preview",
"problemMatcher": [],
"presentation": {
"reveal": "silent",
"clear": true
}
},
{
"label": "Preview: Show Preview for component in current file",
"type": "shell",
"command": "npm run select-preview ${relativeFile}",
"problemMatcher": [],
"presentation": {
"reveal": "silent",
"clear": true
}
}
]
```
## Usage
add a preview to your `.tsx` file:
```jsx
export const MyComponentPreview: PreviewProvider = () => (
)
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT