How to Make View Filled in at Certain Intervals?

user_8370505 0
Viewed 28

I am currently attempting to create a bar that fills in based on arrays of numbers that are fed to it out of 1440 (for minutes in a day). For instance, if [3, 400] was inputted, the view would fill in the area corresponding to 3-400 minutes with some color.

I'm not sure where to start here, since the only idea I have had is to fill the parent view with 1440 other views which I can then fill based on the input, which certainly would not be a great idea. Any help would be much appreciated.

react-native css
1 Answers

I think I figured it out. This was my solution:

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function TimeAvailabilityIndicator() {
    const testArray = [[130, 210], [1000, 1300], [500, 800]]

    const minuteToPercentageConverter = (minute) => {
        return (minute * 100) / 1440
    }


    return (
        <View style={styles.parentView}>
            {testArray.map(time => {
                return <View
                    style={{
                        position: 'absolute',
                        left: minuteToPercentageConverter(time[0]) + '%',
                        right: (100 - minuteToPercentageConverter(time[1])) + '%',
                        height: 16,
                        backgroundColor: 'red'
                    }}
                />
            })}
        </View>
    )
}

const styles = StyleSheet.create({
    parentView: {
        borderColor: 'black',
        borderWidth: 2,
        height: 20,
        marginTop: 10,
        position: 'relative'
   }
})
user_83705050
Related