react-native-debug-toolkit/lib/views/SubViewEnvironment.js

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development

import React from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    ScrollView
} from 'react-native';
import { DebugColors } from '../utils/DebugConst';

const SubViewEnvironment = ({ options, currentValue, onChange }) => {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Environment</Text>
            <ScrollView style={styles.scrollView}>
                {options.map((option, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[
                            styles.option,
                            option.value === currentValue && styles.selectedOption
                        ]}
                        onPress={() => onChange(option.value)}
                    >
                        <Text style={[
                            styles.optionText,
                            option.value === currentValue && styles.selectedOptionText
                        ]}>
                            {option.label}
                        </Text>
                    </TouchableOpacity>
                ))}
            </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 15
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 15,
        color: DebugColors.text
    },
    scrollView: {
        flex: 1
    },
    option: {
        padding: 12,
        borderRadius: 8,
        marginBottom: 8,
        backgroundColor: DebugColors.background,
        borderWidth: 1,
        borderColor: DebugColors.border
    },
    selectedOption: {
        backgroundColor: DebugColors.blue,
        borderColor: DebugColors.blue
    },
    optionText: {
        fontSize: 16,
        color: DebugColors.text
    },
    selectedOptionText: {
        color: DebugColors.white
    }
});

export default SubViewEnvironment;