lsandini
KPCKevin Powell - Community
•Created by lsandini on 8/23/2023 in #front-end
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 🙂
Lorenzo
2 replies