Answers to: Convert the image to React Native Screen

Convert the image to React Native Screen

Asked on 7/31/2026, 2 pageviews

Converted Designs

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import Svg, { Polygon, Circle, Rect } from 'react-native-svg';

const { width } = Dimensions.get('window');
const CARD_WIDTH = (width - 48) / 2; // two cards with gap

export default function NeonPanelsScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        {/* Card 01 */}
        <View style={styles.card}>
          <View style={styles.badge}>
            <Text style={styles.badgeText}>01</Text>
          </View>

{/* Subtle bottom glow circle */}
          <View style={styles.bottomGlow} />

{/* Ground ring and glow (SVG for crisp circles) */}
          <Svg width="100%" height="100%" viewBox="0 0 320 520" style={styles.svgLayer}>
            <Circle cx="160" cy="420" r="110" stroke="rgba(0,255,230,0.75)" strokeWidth="5" fill="none" />
            <Circle cx="160" cy="420" r="80" stroke="rgba(0,255,230,0.55)" strokeWidth="4" fill="none" />
          </Svg>
        </View>

{/* Card 02 */}
        <View style={styles.card}>
          <View style={styles.badge}>
            <Text style={styles.badgeText}>02</Text>
          </View>

{/* Central glowing platform with a teal logo (SVG) */}
          <Svg width="100%" height="100%" viewBox="0 0 320 520" style={styles.svgLayer}>
            {/* vertical glow ring */}
            <Circle cx="160" cy="420" r="110" stroke="rgba(0,255,230,0.85)" strokeWidth="6" fill="none" />
            <Circle cx="160" cy="420" r="60" stroke="rgba(0,255,230,0.6)" strokeWidth="3" fill="none" />

{/* Teal isometric cube-like logo */}
            <Polygon
              points="120,140 200,140 170,170 90,170"
              fill="#10f3d0"
              opacity="0.95"
            />
            <Polygon
              points="90,170 170,170 150,200 70,200"
              fill="#0bd8c8"
              opacity="0.95"
            />
            <Polygon
              points="140,140 170,170 170,200 140,170"
              fill="#0ad1c6"
              opacity="0.85"
            />
          </Svg>

{/* Subtle glow at bottom-right to hint a platform */}
          <View style={styles.bottomRightGlow} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0a0f14',
    paddingTop: 40,
    paddingHorizontal: 12,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  card: {
    width: CARD_WIDTH,
    height: 520,
    borderRadius: 22,
    borderWidth: 2,
    borderColor: 'rgba(0,255,230,0.7)',
    backgroundColor: '#0b1117',
    overflow: 'hidden',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'flex-end',
    shadowColor: '#00e6cc',
    shadowOpacity: 0.4,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 6 },
    elevation: 6,
  },
  badge: {
    position: 'absolute',
    top: 8,
    left: 8,
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: '#11d6d6',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 2,
  },
  badgeText: {
    color: '#001c1c',
    fontWeight: '700',
    fontSize: 12,
  },
  bottomGlow: {
    position: 'absolute',
    bottom: -60,
    left: '50%',
    width: 180,
    height: 180,
    marginLeft: -90,
    borderRadius: 90,
    backgroundColor: 'rgba(0, 255, 230, 0.25)',
    // soft glow effect
    shadowColor: '#00ffd0',
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.8,
    shadowRadius: 20,
  },
  bottomRightGlow: {
    position: 'absolute',
    bottom: 28,
    right: 28,
    width: 72,
    height: 72,
    borderRadius: 36,
    backgroundColor: 'rgba(0,255,230,0.28)',
  },
  svgLayer: {
    position: 'absolute',
    left: 0,
    top: 0,
  },
});

by GPT-5 Nano

Converted Designs

Request another