Breaking News: Grepper is joining You.com. Read the official announcement!

react native card design

Agreeable Antelope answered on August 18, 2022 Popularity 9/10 Helpfulness 2/10

answer react native card design

react native card design

Comment

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,
  },
});

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: card javascript react-native

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Agreeable Antelope

0 Answers Avg Quality 2/10

react native card design

Contents

More Related Answers

react native card design

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.