Problem with UI width-height : "%" vs dimension.get('window') - react-native

Question

So im trying to do a responsive UI ,when i put width or height "100%" in my component its not working in my screen correctly ,but when i put Dimensions.get('window').width * 1 works perfect but i dont understand why.I have read some other questions too in the forum but i still dont get it .Thats not static data?
My component name is books at the near the start of CSS code. Its a container of books.
Thanks in advance.
//React imports
import React, { useState,useEffect} from 'react';
import { StyleSheet, Text, View , Image, Pressable, ScrollView, Modal, Alert, Dimensions , Platform} from 'react-native';
import { useNavigation } from '#react-navigation/native';
//Icon imports
import { FontAwesome } from '#expo/vector-icons';
//APIs imports
import axios from 'axios';
import { Buffer } from "buffer";
//My imports
import Header from './Header';
//.Env imports
import {URL} from '#env';
export default function BooksRented() {
return (
//Container
<View style = {styles.container}>
<Header />
{/* ScrollView for Rent Books */}
<ScrollView>
<View style = {{width:'80%',height:'10%',backgroundColor:'black',alignItems:'center',justifyContent:'center',alignSelf:'center',marginTop:'3%',borderRadius:15,flexDirection:'row'}}>
<FontAwesome name="book" size={24} color="white" />
<Text style = {{color:'white',fontSize:22,marginLeft:'5%'}}>Rent Books</Text>
</View>
<View style = {styles.books}>
{book2.map((item)=>{
return (
<View style = {styles.bookContainer} key = {item.id}>
<Text style = {styles.itemTitle}>
{item.title}
</Text>
{/* Here we are making a book image pressable and keep the book object to use it later as modal */}
<Pressable style = {styles.itemImage} onPress={ () => { setBookShow(item); setModalBookVisible(!ModalBookVisible)}}>
<Image
style = {{width:'100%',height:'100%',borderRadius:15 , marginTop:'5%'}}
source = {{uri :'data:image/png;base64,' + Buffer.from(item.image.data,'hex').toString('base64')}}
/>
</Pressable>
</View>
)
})}
</View>
</ScrollView>
</View>
);
}
//Components Style
const styles = StyleSheet.create({
container:{
backgroundColor:'white',
height:'100%',
width:'100%'
},
//Each element - book
books:{
flexDirection:'row',
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
backgroundColor:'red',
width: Dimensions.get('window').width * 1, ** <-------Thats my Component **
height: Dimensions.get('window').height * 1 ** <-------Thats my Component **
},
bookContainer:{
alignItems:'center',
justifyContent:'center',
backgroundColor:'black',
borderRadius:15,
margin:'3%',
padding:'3%',
width: Dimensions.get('window').width * 0.35,
height: Dimensions.get('window').height * 0.30
},
itemTitle:{
textAlign:'center',
width:'80%',
fontWeight:'bold',
fontSize : 12,
color:'white'
},
itemImage:{
width:'90%',
height:'80%',
alignItems:'center',
justifyContent:'center',
borderRadius:15,
},
//Modal for Books
bookModal:{
alignItems:'center',
height:Platform.OS ==='ios' ? '70%' : '80%',
width:'80%',
backgroundColor:'black',
marginTop:Platform.OS ==='ios' ? '40%' : '19%',
marginLeft:'10%',
borderRadius:25,
borderWidth:1,
elevation:15
},
//Modal Texts
bookShowTitleText:{
textAlign:'center',
fontWeight:'bold',
color:'white',
fontSize: 15
},
bookShowCategoryText:{
textAlign:'center',
color:'white',
fontSize : 15
},
textInsideModal:{
textAlign:'center',
color:'white',
fontSize : 14
},
bookShowDescribeText:{
textAlign:'center',
fontWeight:'bold',
fontSize : 15
},
scrollViewForDescribeModal:{
backgroundColor:'white',
flexDirection:'column',
padding:'5%'
},
describeText:{
fontSize : 15
},
//Modal pressables
pressableInsideModal:{
borderWidth:6,
borderRadius:11,
elevation:5,
backgroundColor:'grey',
width:'45%',
height:Platform.OS ==='ios' ? '7%' : '9%',
paddingTop:'2%',
alignItems:'center'
},
});