expo / expo/audio-recording-example

Wanting input on best way to update Icons to functional components

Open
#22 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.