Two tone Colored Card

Question

I'm trying to implement card like following image, I already implemented single color color code as following code,

<View style={{
        width: (window.width) * 0.4,
        height: (window.height) * 0.15,
        backgroundColor:"#FFFFFF",
        elevation: 1.5,
        justifyContent:'center',
        borderRadius: (window.width) * 0.03,
 }}>

</View> 

Can anyone help me to implement card like above with two tone colors ?

Answer 1

Working App: Expo Link

App Output:

UPDATED:

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
import { AntDesign } from '@expo/vector-icons';
const window = Dimensions.get('window');
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.orangeBox}>
        <View
          style={[
            styles.orangeBox,
            {
              zIndex: 100,
              backgroundColor: null,
              justifyContent: 'space-between',
            },
          ]}>
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
            <AntDesign name="youtube" size={24} color="red" />
            <View>
              <Text style={styles.text}>YouTube</Text>
              <Text style={styles.text}>Offer</Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              padding: 5,
            }}>
            <View style={{ justifyContent: 'space-between' }}>
              <View />
              <Text style={[styles.text, { color: 'white' }]}>Free</Text>
            </View>
            <View style={{ marginTop: 2 }}>
              <Text style={[styles.text, { color: 'white', fontSize: 12 }]}>
                100 Mb
              </Text>
              <Text style={[styles.text, { color: 'white', fontSize: 12 }]}>
                7 Days
              </Text>
            </View>
          </View>
        </View>
        <View style={styles.whiteBox}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    padding: 10,
  },
  orangeBox: {
    width: window.width * 0.4,
    height: window.height * 0.15,
    backgroundColor: '#FF6600',
    elevation: 1.5,
    borderRadius: window.width * 0.03,
    overflow: 'hidden',
  },
  whiteBox: {
    position: 'absolute',
    width: window.width * 0.6,
    height: window.height * 0.4,
    backgroundColor: 'white',
    elevation: 1.5,
    bottom: 25,
    right: -20,
    borderRadius: window.width * 0.5,
  },
  text: {
    fontWeight: 600,
    fontSize: 13,
  },
});

Old Solution with only card design:

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const window = Dimensions.get('window');
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.orangeBox}>
        <View style={styles.whiteBox}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    padding: 10,
  },
  orangeBox: {
    width: window.width * 0.4,
    height: window.height * 0.15,
    backgroundColor: '#FF6600',
    elevation: 1.5,
    borderRadius: window.width * 0.03,
    overflow: 'hidden',
  },
  whiteBox: {
    position: 'absolute',
    width: window.width * 0.6,
    height: window.height * 0.4,
    backgroundColor: 'white',
    elevation: 1.5,
    bottom: 22,
    right: -20,
    borderRadius: window.width * 0.5,
  },
});