Following the steps in the previous section, I expect styled components to render correctly. However, I observe unstyled components on the page initially. These components only get styled after the <style id="react-native-stylesheet"></style> tag is added to the head, causing a noticeable flicker. This issue is particularly evident when slowing the speed using network throttling.
Additionally, this flicker is observed while using other React Native component libraries, such as native-base.
Steps to Reproduce:
Follow the steps provided in the previous section to render styled components.
Observe the initial rendering of the components.
Notice the flicker as the styles are applied after the <style id="react-native-stylesheet"></style> tag is added to the head.
Use network throttling to slow down the speed and observe the issue more clearly.
Expected Behavior:
Styled components should render without flicker, with styles applied immediately upon rendering.
Observed Behavior:
Components initially render without styles, causing a flicker when the styles are subsequently applied.
Additional Information:
Issue does not exist in Next js 12
The flicker is also observed with other React Native component libraries, as sample I used native-base.
The issue is more pronounced when using network throttling to slow down the speed.
Before CSS is applied:After CSS is applied
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:25 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 21.7.3
npm: 10.5.0
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.2.3 // There is a newer version (14.2.4) available, upgrade recommended!
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
Link to the code that reproduces this issue
https://github.com/soniankur948/RN-flicker
To Reproduce
http://localhost:3000Current vs. Expected behavior
Bug Report
Description:
Following the steps in the previous section, I expect styled components to render correctly. However, I observe unstyled components on the page initially. These components only get styled after the
<style id="react-native-stylesheet"></style>tag is added to the head, causing a noticeable flicker. This issue is particularly evident when slowing the speed using network throttling.Additionally, this flicker is observed while using other React Native component libraries, such as
native-base.Steps to Reproduce:
<style id="react-native-stylesheet"></style>tag is added to the head.Expected Behavior:
Styled components should render without flicker, with styles applied immediately upon rendering.
Observed Behavior:
Components initially render without styles, causing a flicker when the styles are subsequently applied.
Additional Information:
native-base.Before CSS is applied:
After CSS is applied
Provide environment information
Which area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
No response