Unnecessary rendering

[sftechswdev]

Hi,
Upon integrating the react-native-unistyles library into my project and configuring it according to the provided instructions, I've noticed that the component I'm working with is rendering twice. Is this expected behaviour? Please use the sample code below to check it.

Version:
"react-native": "0.72.12",
"react-native-unistyles": "^2.5.1"

App.tsx

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
import './unistyles';
import {createStyleSheet, useStyles} from 'react-native-unistyles';

function App(): JSX.Element {
  const {styles} = useStyles(styleSheet);

  console.log('render count');

  return (
    <SafeAreaView style={styles.appContainer}>
      <Text style={styles.text}>Hello World!</Text>
    </SafeAreaView>
  );
}

const styleSheet = createStyleSheet(theme => ({
  appContainer: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  text: {
    fontSize: 25,
    color: theme.colors.text,
  },
}));

export default App;

unistyles.ts

import {UnistylesRegistry} from 'react-native-unistyles';

const lightTheme = {
  colors: {
    background: 'rgb(200, 200, 200)',
    text: 'rgb(25, 25, 25)',
  },
};

type AppThemes = {
  light: typeof lightTheme;
};

declare module 'react-native-unistyles' {
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addThemes({
  light: lightTheme,
}).addConfig({
  adaptiveThemes: false,
});

[jpudysz]

Copy-pasted your example and here is the result:

[sftechswdev]

Thanks for the quick response. I'm new to React and must be doing something wrong. This happens on Android emulator and can't confirm if it also happens on iOS emulator.

[jpudysz]

I will check it on Android too, will let you know

[sftechswdev]

I can confirm that it doesn't happen on iOS.

[jpudysz]

On Android is the same behaviour (one single render of the App component). I don't get it, you have the same output in the console. Where is the problem?

[sftechswdev]

I noticed something with the insets. In the first render, top and bottom has values and 0 in the second render.

rec.mp4

[jpudysz]

Oh i see! You're using simulator with the notch. Nice catch!

Here is the simillar issue: #170

I will work on it this week

[sftechswdev]

Thanks a lot.

[jpudysz]

No, thank you a lot!

Please check new version 2.5.2 with fix.

https://github.com/jpudysz/react-native-unistyles/releases/tag/v2.5.2

[sftechswdev]

Resolved, Thanks for the quick fix.