expo / expo/audio-recording-example
Wanting input on best way to update Icons to functional components
- Dominant language
- TypeScript
- Stars
- 134
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
I am a few weeks into my react journey and am using the expo Audio library to work on an app. This project is linked in the expo docs so I have been referencing it quite a bit, and then I though for practice I'd see if I could knock out issue #21 .
My problem is updating Icons - originally I replaced all the `export const RECORD_BUTTON = new Icon(...);` with a functional component like this:
```js
export function RECORD_BUTTON() {
const [assets, _] = useAssets(require('../assets/images/record_button.png'));
const width = 70
const height = 119
return assets ? : null
}
```
which works but in the `styles` object we access the width and the height of each Icon object with `Icons.RECORDING.height` and since RECORD_BUTTON isn't a class anymore, this gives an error.
I am working around it atm by declaring width and height inside the prototype like so:
```js
export function RECORD_BUTTON() {
const [assets, _] = useAssets(require('../assets/images/record_button.png'));
RECORD_BUTTON.prototype.width = 70
RECORD_BUTTON.prototype.height = 119
return assets ? : null
}
```
and then accessing it for `styles` with `RECORD_BUTTON.prototype.width`. Which seems to work, but doesn't *feel* right to me.
I did a bunch of googling and can't seem to figure out the correct way that people upgrade these class components to be compatible with accessing the properties in this way so I figured I'd ask here. Let me know if you have any input.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the Icons definitions and the styles object that reads properties such as Icons.RECORDING.height, then review issue #21 and the Expo Audio example context. Compare the existing Icon objects with the proposed functional components and determine a consistent representation that supports rendering and dimension access without the prototype workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, react-native
- Domain
- mobile-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100