Dynamic checkbox not functioning as expected

I am running a React Native app.
I want my checkboxes to be dynamic. The below code makes the checkbox dynamic but I am unable to get my desired format.

App.js

constructor(props) {
    super(props)
    this.state = {
      data: [
        { id: 1, key: 'Read', type: 'HeartRate',  checked: false },
        { id: 2, key: 'Write', type: 'HeartRate',  checked: false },
        { id: 3, key: 'Read', type: 'BodyMassIndex',  checked: false },
        { id: 4, key: 'Write', type: 'BodyMassIndex',  checked: false }
            ]
        }
   }


onCheckChanged = (id) => {
    const data = this.state.data;

    const index = data.findIndex(x => x.id === id);
    data[index].checked = !data[index].checked;
    this.setState(data);
}


render() {
    return (
              {
                this.state.data.map((item,key) => 
                <View  style=>
                <Text style={styles.modalText}> {item.type} </Text>
               <CheckBox title={item.key} key={key}  checked={item.checked} onPress={()=>this.onCheckChanged(item.id)}/>
               </View>
               )
            }
    )
}

The output of the above code is:

But I want it to be in this format. "HearRate", "Read" and "Write" are all in 1 row.
How can I achieve this? Any help would be great!