1 reply

CSS in React Native and Expo SDK

Hello all, one more newbie here. I have made a web app and styled the website in a very simple way, adding some simple CSS over Bootstrap 4.6. (https://cgmsim.com)

An iOS/Android app adding some features for my web app users (push notifications) is in the works. We use Expo SDK to simplify the development and distribution to TestFlight and Playstore.

I open my web app in a WebView, so no need to modify the website itself. My mobile app has a "HomeView", that I am trying to style in the same way as the website itself, but I am stumbling upon a simple issue. I can't seem to achieve the same background "diagonal split" using Expo/React Native as I have in my website using the CSS below.

Are there differences in the CSS "terms" ? For example backgroundColor in my app:

<View style={{ backgroundColor: '#00a4b5' }}>
<Tabs... />
</View>

... and my website's background CSS:

.bg-texture {
background: linear-gradient(
-45deg,
var(--background-color2) 33%,
transparent 0
),
linear-gradient(-45deg, var(--background-color1) 100%, transparent 0);
}

.bg-texture-collage {
background: linear-gradient(
-45deg,
var(--background-color2) 33%,
transparent 0
),
linear-gradient(-45deg, var(--background-color1) 67%, transparent 0),
linear-gradient(-45deg, var(--background-color2) 100%, transparent 0);
}

Any help appreciated