Color different in android emulator and phone compared to computer browser

Description

I was building a simple new app from scratch using React Native and I did a yarn start and selected android. It built the app and ran it on the android emulator (from the android studio AVD manager). The color on my browser is different from what is being displayed on both the android emulator (in the same computer) and on my android phone.

The above picture is a screenshot from my computer.

The above picture is a screenshot from my phone.

Here’s a snippet of the CSS

The container class is a style added to the root <view></view> component.

I tried using a simple Hex code as well and the issue still persists.

Any idea as to why this is happening? Please let me know if you need more information.

Version

0.68.1

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: Linux 5.13 Zorin OS 16
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 10.37 GB / 15.47 GB
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.14.2 - /tmp/yarn--1651418089951-0.9801791225039398/node
    Yarn: 1.22.18 - /tmp/yarn--1651418089951-0.9801791225039398/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 1.8.0_312 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.68 => 0.68.1 
  npmGlobalPackages:
    *react-native*: Not Found
Done in 1.92s.

Steps to reproduce

create a new app with a container using the above mentioned color.

yarn start

press a to run the app on an android emulator / phone

Snack, code example, screenshot, or link to a repository

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container} >
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(130, 106, 170, 255)',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

[cipolleschi]

Issue is not related to React Native, closing it.

[ProgrammingMuffin]

Like I mentioned, the issue is not related to react-native-size-matters. I understand that having third party libraries may have been confusing. So I have replaced ScaledSheet with StyleSheet and gave it a test again. Issue still persists. I have made the snippet more simpler. Thank you for your reply