[$250] Dev: Console error when remove workspace member offline

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @situchan
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Go to workspace > Members
2. Invite any member
3. Go offline
4. Tap invited member
5. Remove from workspace
6. Tap Remove from confirm modal

Expected Result:

No console error

Actual Result:

Console error "Invalid prop style supplied to React.Fragment. React.Fragment can only have key and children props." shows

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

console.error.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011958559116572303
• Upwork Job ID: 2011958559116572303
• Last Price Increase: 2026-01-16
• Automatic offers:
• samranahm | Contributor | 110129934

Issue Owner

Current Issue Owner: @samranahm

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[PiyushChandra17]

I can work on this

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Dev: Console error when remove workspace member offline

What is the root cause of that problem?

1. This line is the culprit

App/src/components/DraggableList/index.tsx

Line 80 in 8babc8e

const Container = disableScroll ? Fragment : ScrollView;

While offline if disableScroll === true then it renders Fragment which takes styles as a props

• style={styles.flex1}
• contentContainerStyle={styles.flex1}

2. We are using React.Fragment with style prop which causes this console error, it only accepts two props:

• Key
• children

What changes do you think we should make in order to solve the problem?

Remove the Fragment instead use <View>

const Container = disableScroll ? View : ScrollView;

What alternative solutions did you explore? (Optional)

Or the simplest approach,

 const Container = ScrollView;

<Container
      ref={ref}
      style={styles.flex1}
      contentContainerStyle={styles.flex1}
      scrollEnabled={!disableScroll}
  >

Result

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console error when remove workspace member offline

What is the root cause of that problem?

When removing a workspace member offline, the OfflineWithFeedback component applies strikethrough styles. If the JSX rendering includes Fragments (created with <> syntax), this triggers the console error.

When applying strikethrough styles to denote deleted/pending items, the function uses React.cloneElement() to add style props to all child elements recursively. However, React Fragments (<>...</>) have a special constraint - they only accept key and children props and cannot accept style or other custom props.

What changes do you think we should make in order to solve the problem?

Add a type check for Fragment elements before applying styles

if (child.type === React.Fragment) {
    const childProps = child.props as {children?: React.ReactNode};
    return React.createElement(React.Fragment, {}, applyStrikeThrough(childProps.children));
}

here

App/src/components/OfflineWithFeedback.tsx

Lines 110 to 115 in 75a8599

	const applyStrikeThrough = (childrenProp: React.ReactNode): React.ReactNode => {
	const strikeThroughChildren = mapChildrenFlat(childrenProp, (child) => {
	if (!React.isValidElement(child) || child.type === ImageSVG) {
	return child;
	}

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022011958559116572303