Kevin Powell - Community•10mo ago

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

CGMSIM v.3

A real time Type I Diabetes Simulation, for learning and practising purposes.

1 Reply

lsandini•10mo ago

ok got it :

     <LinearGradient
        colors={['#00a4b5','#ffb300']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1.7, y: 1.2}}
        locations={[0.5, 0.5]} // Sharp transition
        style={styles.gradient}
    >

     <LinearGradient
        colors={['#00a4b5','#ffb300']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1.7, y: 1.2}}
        locations={[0.5, 0.5]} // Sharp transition
        style={styles.gradient}
    >

Gaming

Programming

CSS in React Native and Expo SDK